add playwright-based e2e tests with visual regression testing, add a snapshot test of the 03_graphs example for starters, updating CSS to use a local font to guarantee the same font across platforms (f.e. local vs CI) for consistent screenshots. Update tsconfig to ignore compiling TS files in e2e/, playwright handles those directly

Author: trusktr

.github/workflows/tests.yml

@@ -14,10 +14,34 @@ jobs:
         node-version: [lts/*]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: npm
       - run: npm clean-install
+      - run: npx playwright install --with-deps chromium
+
+      # Uncomment this if for some reason you suspect CI (Linux) build differes from local, then you can inspect output.
+      # - name: Upload dist artifact
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: dist
+      #     path: dist/
+
       - run: npm test
+
+      - name: Upload Playwright rest results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-test-results
+          path: test-results/
+
+      - name: Upload Playwright e2e snapshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-e2e-snapshots
+          path: e2e/**/*-snapshots/

.gitignore

@@ -5,3 +5,4 @@
 build/npm*
 node_modules
 npm-debug.log
+test-results/

assets/style.css

@@ -1,6 +1,18 @@
+@font-face {
+  font-family: 'Allerta';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../examples/font/Allerta/Allerta-Regular.woff2") format('woff2');
+
+  /* No idea what this is, copied from Google Fonts embed code */
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 body {
 	background: #fff;
-	font-family: Helvetica, Arial, sans;
+	font-family: Allerta, Helvetica, Arial, sans-serif;
+	letter-spacing: -0.03em;
 }
 
 a {
@@ -22,7 +34,7 @@ h2 {
 	font-size: 3em;
 	color: #333;
 	margin-top: 0;
-	letter-spacing: -0.05em;
+	letter-spacing: -0.1em;
 }
 
 #info h2 {

e2e/graphs.spec.ts

@@ -0,0 +1,14 @@
+import {test, expect} from '@playwright/test'
+
+test('03_graphs.html — easing curve thumbnails', async ({page}) => {
+	await page.goto('/examples/03_graphs.html', {waitUntil: 'load'})
+
+	// Wait for the 2000ms tween animations to finish drawing all curves.
+	await page.waitForTimeout(2500)
+
+	// The grid of canvas thumbnails should now show complete easing curves.
+	await expect(page).toHaveScreenshot('03_graphs.webp', {
+		fullPage: true,
+		maxDiffPixelRatio: 0.01,
+	})
+})

e2e/graphs.spec.ts-snapshots/03-graphs.webp

@@ -0,0 +1,16 @@
+import {defineConfig} from '@playwright/test'
+
+export default defineConfig({
+	testDir: '.',
+	snapshotPathTemplate: '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
+	webServer: {
+		command: 'python3 -m http.server 3333',
+		cwd: process.cwd(),
+		port: 3333,
+		reuseExistingServer: true,
+	},
+	use: {
+		baseURL: 'http://localhost:3333',
+		viewport: {width: 1280, height: 1030},
+	},
+})

e2e/playwright.config.ts

@@ -19,9 +19,9 @@ <h2>20 _ timeline</h2>
 			<p>Sequencing with Timeline: sequential by default, parallel via offsets and labels.</p>
 		</div>
 		<div style="position: absolute; top: 100px; left: 400px">
-			<div id="target1" data-x="0" data-rotation="0" class="box">sequential</div>
-			<div id="target2" data-x="0" data-rotation="0" class="box">parallel</div>
-			<div id="target3" data-x="0" data-rotation="0" class="box">labels + nesting</div>
+			<div id="target1" data-y="0" data-rotation="0" class="box">sequential</div>
+			<div id="target2" data-y="0" data-rotation="0" class="box">parallel</div>
+			<div id="target3" data-y="0" data-rotation="0" class="box">labels + nesting</div>
 		</div>
 
 		<script type="module">
@@ -35,43 +35,38 @@ <h2>20 _ timeline</h2>
 			function init() {
 				// 1. Sequential: add() appends after the last child (replaces chain).
 				const target1 = document.getElementById('target1')
-				const seq = new Timeline()
-					.add(new Tween(target1.dataset).to({x: 200}, 800).easing(Easing.Quadratic.InOut))
-					.add(new Tween(target1.dataset).to({x: 0}, 800).easing(Easing.Quadratic.InOut))
-					.onUpdate(function () {
-						updateBox(target1, target1.dataset)
-					})
-				seq.start()
-				timelines.push(seq)
+				const sequence = new Timeline()
+					.add(new Tween(target1.dataset).to({y: 200}, 800).easing(Easing.Quadratic.InOut))
+					.add(new Tween(target1.dataset).to({y: 0}, 800).easing(Easing.Quadratic.InOut))
+					.onUpdate(() => updateBox(target1, target1.dataset))
+				sequence.start()
+				timelines.push(sequence)
 
 				// 2. Parallel: explicit offset 0 starts children together
 				// (two tweens, two different properties of the same box).
 				const target2 = document.getElementById('target2')
-				const par = new Timeline()
-					.add(new Tween(target2.dataset).to({x: 200}, 1000).easing(Easing.Sinusoidal.InOut), 0)
+				const parallel = new Timeline()
+					.add(new Tween(target2.dataset).to({y: 200}, 1000).easing(Easing.Sinusoidal.InOut), 0)
 					.add(new Tween(target2.dataset).to({rotation: 360}, 1000).easing(Easing.Sinusoidal.InOut), 0)
-					.onUpdate(function () {
-						updateBox(target2, target2.dataset)
-					})
-				par.start()
-				timelines.push(par)
+					.add(new Tween(target2.dataset).to({y: 0}, 1000).easing(Easing.Sinusoidal.InOut))
+					.onUpdate(() => updateBox(target2, target2.dataset))
+				parallel.start()
+				timelines.push(parallel)
 
 				// 3. Labels and nesting: an inner timeline inside an outer one.
 				// The spin starts 200ms after the 'moved' label, leaving a gap.
 				const target3 = document.getElementById('target3')
 				const inner = new Timeline()
-					.add(new Tween(target3.dataset).to({x: 200}, 600).easing(Easing.Quadratic.Out), 0)
+					.add(new Tween(target3.dataset).to({y: 200}, 600).easing(Easing.Quadratic.Out), 0)
 					.addLabel('moved', 600)
 					.add(new Tween(target3.dataset).to({rotation: 180}, 600).easing(Easing.Quadratic.InOut), {
 						at: 'moved',
 						offset: 200,
 					})
 					.add(new Tween(target3.dataset).to({rotation: 0}, 600).easing(Easing.Quadratic.InOut))
-					.add(new Tween(target3.dataset).to({x: 0}, 600).easing(Easing.Quadratic.InOut))
+					.add(new Tween(target3.dataset).to({y: 0}, 600).easing(Easing.Quadratic.InOut))
 
-				const outer = new Timeline().add(inner, 0).onUpdate(function () {
-					updateBox(target3, target3.dataset)
-				})
+				const outer = new Timeline().add(inner, 0).onUpdate(() => updateBox(target3, target3.dataset))
 				outer.start()
 				timelines.push(outer)
 			}
@@ -86,7 +81,7 @@ <h2>20 _ timeline</h2>
 
 			function updateBox(box, params) {
 				const s = box.style,
-					transform = 'translateX(' + Math.floor(params.x) + 'px) rotate(' + Math.floor(params.rotation) + 'deg)'
+					transform = 'translateY(' + Math.floor(params.y) + 'px) rotate(' + Math.floor(params.rotation) + 'deg)'
 				s.webkitTransform = transform
 				s.mozTransform = transform
 				s.transform = transform

examples/20_timeline.html

@@ -1,6 +1,18 @@
+@font-face {
+  font-family: 'Allerta';
+  font-style: normal;
+  /* font-weight: 400; */
+  font-display: swap;
+  src: url("../font/Allerta/Allerta-Regular.woff2") format('woff2');
+
+  /* No idea what this is, copied from Google Fonts embed code */
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 body {
 	background: #fff;
-	font-family: Helvetica, Arial, sans;
+	font-family: Allerta, Helvetica, Arial, sans-serif;
+	letter-spacing: -0.03em;
 }
 
 a {
@@ -39,7 +51,7 @@ button:hover {
 	font-size: 3em;
 	color: #333;
 	margin-top: 0;
-	letter-spacing: -0.05em;
+	letter-spacing: -0.1em;
 }
 
 #info h2 {

examples/css/style.css

@@ -0,0 +1,94 @@
+Copyright (c) 2010, Matt McInerney (matt@pixelspread.com),
+with Reserved Font Name Allerta.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.