chore: reconfigure snaptests

.github/workflows/update-snapshots.yml

@@ -7,9 +7,9 @@ on:
         description: 'Target branch'
         required: true
       purge_snapshots:
-          description: 'Delete all snapshots before regenerating them'
-          type: boolean
-          default: false
+        description: 'Delete all snapshots before regenerating them'
+        type: boolean
+        default: false
 
 jobs:
   update-snapshots:
@@ -58,6 +58,7 @@ jobs:
         run: pnpm -r build
 
       - name: Purge existing snapshots
+        continue-on-error: true
         if: ${{ github.event.inputs.purge_snapshots == 'true' }}
         run: rm packages/themes/**/snapshots/**/*.png
 

packages/create-kolibri/templates/kolibri-theme/.knip.json

@@ -2,8 +2,5 @@
 	"entry": ["src/index.ts"],
 	"ignoreBinaries": [],
 	"ignoreDependencies": [],
-	"project": ["src/**/*.ts"],
-	"rules": {
-		"classMembers": "warn"
-	}
+	"project": ["src/**/*.ts"]
 }

packages/themes/bmf/package.json

@@ -7,7 +7,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"test": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test --update-snapshots snapshot.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.4",

packages/themes/default/package.json

@@ -44,7 +44,7 @@
 		"lint": "eslint src && tsc --noemit",
 		"prepack": "unbuild",
 		"test": "THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test",
-		"test-update": "THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"test-update": "THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots snapshot.spec.js",
 		"pretest": "pnpm build",
 		"pretest-update": "pnpm build"
 	},

packages/themes/ecl/package.json

@@ -10,8 +10,8 @@
 		"test:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test",
 		"test:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test",
 		"xtest-update": "npm-run-all test-update:*",
-		"test-update:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
-		"test-update:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
+		"test-update:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test --update-snapshots snapshot.spec.js",
+		"test-update:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test --update-snapshots snapshot.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.4",

packages/themes/itzbund/package.json

@@ -7,7 +7,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"xtest": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test",
-		"xtest-update": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
+		"xtest-update": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots snapshot.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.4",

packages/tools/kolibri-cli/.knip.json

@@ -2,8 +2,5 @@
 	"entry": ["src/index.ts"],
 	"ignoreBinaries": [],
 	"ignoreDependencies": ["@public-ui/components", "loglevel", "mocha"],
-	"project": ["src/**/*.ts"],
-	"rules": {
-		"classMembers": "warn"
-	}
+	"project": ["src/**/*.ts"]
 }

packages/tools/kolibri-cli/src/migrate/runner/abstract-task.ts

@@ -36,10 +36,6 @@ export abstract class AbstractTask {
 		return this.dependentTasks;
 	}
 
-	public getDescription(): string | undefined {
-		return this.description;
-	}
-
 	public getIdentifier(): string {
 		return this.identifier;
 	}

packages/tools/visual-tests/.knip.json

@@ -1,10 +1,7 @@
 {
-	"entry": ["src/index.ts"],
+	"entry": ["src/index.js", "tests/**/*.js"],
 	"ignore": ["playwright.config.js"],
 	"ignoreBinaries": [],
 	"ignoreDependencies": ["@public-ui/sample-react", "serve"],
-	"project": ["src/**/*.ts"],
-	"rules": {
-		"classMembers": "warn"
-	}
+	"project": ["src/**/*.ts"]
 }

packages/tools/visual-tests/README.md

@@ -15,7 +15,7 @@
 		"lint": "eslint src",
 		"prepack": "unbuild",
 		"test": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots snapshot.spec.js",
 		"unused": "knip"
 	},
 	"devDependencies": {

packages/tools/visual-tests/playwright.config.js

@@ -36,18 +36,24 @@ export default defineConfig({
 
 	/* Configure projects for major browsers */
 	projects: [
-		// {
-		// 	name: 'chrome',
-		// 	use: { ...devices['Desktop Chrome'] },
-		// },
+		{
+			/**
+			 * Special browser configurations for forced colors, media, and reduced motion
+			 * does only work in Chromium-based browsers.
+			 *
+			 * See https://playwright.dev/docs/api/class-page#page-emulate-media
+			 */
+			name: 'chrome',
+			use: { ...devices['Desktop Chrome'] },
+		},
 		// {
 		// 	name: 'edge',
 		// 	use: { ...devices['Desktop Edge'] },
 		// },
-		{
-			name: 'firefox',
-			use: { ...devices['Desktop Firefox'] },
-		},
+		// {
+		// 	name: 'firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
 	],
 
 	/* Run your local dev server before starting the tests */

packages/tools/visual-tests/tests/axe.spec.js

@@ -0,0 +1,9 @@
+import test from '@playwright/test';
+import { createAxeTests } from './lib/tests.axe.js';
+
+createAxeTests(test, {
+	colorScheme: 'light',
+	forcedColors: 'none', // only works with chromium
+	media: 'screen',
+	reducedMotion: 'reduce',
+});

packages/tools/visual-tests/tests/drafts/axe.contrast-dark.darft.js

@@ -0,0 +1,13 @@
+import test from '@playwright/test';
+import { createAxeTests } from '../lib/tests.axe.js';
+
+createAxeTests(
+	test,
+	{
+		colorScheme: 'dark',
+		forcedColors: 'active', // only works with chromium
+		media: 'screen',
+		reducedMotion: 'reduce',
+	},
+	'contrast-dark',
+);

packages/tools/visual-tests/tests/drafts/axe.contrast.darft.js

@@ -0,0 +1,13 @@
+import test from '@playwright/test';
+import { createAxeTests } from '../lib/tests.axe.js';
+
+createAxeTests(
+	test,
+	{
+		colorScheme: 'light',
+		forcedColors: 'active', // only works with chromium
+		media: 'screen',
+		reducedMotion: 'reduce',
+	},
+	'contrast',
+);

packages/tools/visual-tests/tests/drafts/axe.dark.darft.js

@@ -0,0 +1,13 @@
+import test from '@playwright/test';
+import { createAxeTests } from '../lib/tests.axe.js';
+
+createAxeTests(
+	test,
+	{
+		colorScheme: 'dark',
+		forcedColors: 'none', // only works with chromium
+		media: 'screen',
+		reducedMotion: 'reduce',
+	},
+	'dark',
+);

packages/tools/visual-tests/tests/drafts/snapshot.contrast-dark.darft.js

@@ -0,0 +1,13 @@
+import test from '@playwright/test';
+import { createSnapshotTests } from '../lib/tests.snapshots.js';
+
+createSnapshotTests(
+	test,
+	{
+		colorScheme: 'dark',
+		forcedColors: 'active', // only works with chromium
+		media: 'screen',
+		reducedMotion: 'reduce',
+	},
+	'contrast-dark',
+);

packages/tools/visual-tests/tests/drafts/snapshot.contrast.darft.js

@@ -0,0 +1,13 @@
+import test from '@playwright/test';
+import { createSnapshotTests } from '../lib/tests.snapshots.js';
+
+createSnapshotTests(
+	test,
+	{
+		colorScheme: 'light',
+		forcedColors: 'active', // only works with chromium
+		media: 'screen',
+		reducedMotion: 'reduce',
+	},
+	'contrast',
+);

packages/tools/visual-tests/tests/drafts/snapshot.dark.darft.js

@@ -0,0 +1,13 @@
+import test from '@playwright/test';
+import { createSnapshotTests } from '../lib/tests.snapshots.js';
+
+createSnapshotTests(
+	test,
+	{
+		colorScheme: 'dark',
+		forcedColors: 'none', // only works with chromium
+		media: 'screen',
+		reducedMotion: 'reduce',
+	},
+	'dark',
+);

packages/tools/visual-tests/tests/lib/basis.config.js

@@ -0,0 +1,66 @@
+const dirName = `theme-${process.env.THEME_EXPORT.toLocaleLowerCase()}`;
+
+/**
+ * Caution: The renaming does only works, if the `test` reference
+ *          comes from the `spec.js` file.
+ */
+export const renameSnapshotName = (snapshotName) => {
+	return (
+		snapshotName
+			// Make different snapshot folder for different themes
+			.replace('-snapshots', '')
+			.replace('axe.contrast-dark.spec.js', dirName)
+			.replace('axe.contrast.spec.js', dirName)
+			.replace('axe.dark.spec.js', dirName)
+			.replace('axe.spec.js', dirName)
+			.replace('snapshot.contrast-dark.spec.js', dirName)
+			.replace('snapshot.contrast.spec.js', dirName)
+			.replace('snapshot.dark.spec.js', dirName)
+			.replace('snapshot.spec.js', dirName)
+
+			// Remove test counter from snapshot name
+			.replace('-1-', '-')
+	);
+
+	// Remove browser name from snapshot name
+	// .replace('-chrome', '')
+	// .replace('-edge', '')
+	// .replace('-firefox', '')
+
+	// Remove os name from snapshot name
+	// .replace('-darwin', '')
+	// .replace('-linux', '')
+	// .replace('-windows', '')
+};
+
+// https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
+const configureSnapshotPath =
+	() =>
+	// eslint-disable-next-line no-empty-pattern
+	({}, testInfo) => {
+		const originalSnapshotPath = testInfo.snapshotPath;
+		testInfo.snapshotPath = (snapshotName) => {
+			return renameSnapshotName(originalSnapshotPath.apply(testInfo, [snapshotName]));
+		};
+	};
+
+export const configureTest = (test) => {
+	test.beforeEach(configureSnapshotPath());
+
+	// https://playwright.dev/docs/emulation
+	test.use({
+		colorScheme: 'light',
+		locale: 'de-DE',
+		isMobile: false,
+		timezoneId: 'Europe/Berlin',
+		viewport: {
+			width: 800,
+			height: 0,
+		},
+	});
+};
+
+/**
+ * @todo stabilize and re-enable test
+ */
+export const blocklist = [];