@public-ui/visual-tests 3.0.8-rc.0 → 3.0.8-rc.1

package/README.md

@@ -56,6 +56,7 @@ Add the following npm scripts to the theme's `package.json`:
 - `THEME_EXPERT`: Define the name of the export within the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
 - `KOLIBRI_VISUAL_TESTS_TIMEOUT`: Define the Playwright [test timeout](https://playwright.dev/docs/test-timeouts).
 - `KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT`: Define the Playwright [expect timeout](https://playwright.dev/docs/test-timeouts).
+- `KOLIBRI_VISUAL_TESTS_COLOR_SCHEME`: Choose the [CSS color scheme](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) for the browser context. Supported values are `light` (default) and `dark`.
 
 Run the tests with `npm test`. The first time, this will create a new folder `snapshots` which is supposed to be committed to the repository.
 In the following runs, new screenshots will be compared to this reference.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "3.0.8-rc.0",
+  "version": "3.0.8-rc.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -25,10 +25,11 @@
     "kolibri-visual-test": "src/index.js"
   },
   "dependencies": {
-    "axe-playwright": "2.2.2",
+    "@axe-core/playwright": "4.11.0",
+    "axe-html-reporter": "2.2.11",
     "portfinder": "1.0.38",
     "serve": "14.2.5",
-    "@public-ui/sample-react": "3.0.8-rc.0"
+    "@public-ui/sample-react": "3.0.8-rc.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.28.4",

package/playwright.config.js

@@ -12,6 +12,16 @@ const EXPECT_TIMEOUT = parseInt(process.env.KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT
 const BUILD_PATH = process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH ?? '';
 const THEME = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
 
+const VALID_COLOR_SCHEMES = ['light', 'dark'];
+const colorSchemeInput = process.env.KOLIBRI_VISUAL_TESTS_COLOR_SCHEME;
+const colorSchema = (colorSchemeInput || 'light').toLocaleLowerCase();
+
+if (!VALID_COLOR_SCHEMES.includes(colorSchema)) {
+	throw new Error(
+		`Environment variable KOLIBRI_VISUAL_TESTS_COLOR_SCHEME must be one of "${VALID_COLOR_SCHEMES.join('", "')}" (received "${colorSchemeInput}").`,
+	);
+}
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -68,5 +78,5 @@ export default defineConfig({
 		url: BASE_URL,
 		reuseExistingServer: false,
 	},
-	snapshotPathTemplate: `{snapshotDir}/theme-${THEME}/{arg}-{projectName}-{platform}{ext}`,
+	snapshotPathTemplate: `{snapshotDir}/theme-${THEME}${colorSchema === 'light' ? '' : `-${colorSchema}`}/{arg}-{projectName}-{platform}{ext}`,
 });

package/tests/axe-snapshots.spec.js

@@ -1,7 +1,12 @@
+import AxeBuilder from '@axe-core/playwright';
 import { test } from '@playwright/test';
-import { checkA11y, injectAxe } from 'axe-playwright';
-import { ROUTES } from './sample-app.routes.js';
+import axeHtmlReporter from 'axe-html-reporter';
 import process from 'process';
+import { ROUTES } from './sample-app.routes.js';
+
+const { createHtmlReport } = axeHtmlReporter;
+
+const AXE_TAGS = ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'];
 
 const themeName = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
 const rename = (snapshotName) => {
@@ -25,6 +30,25 @@ const rename = (snapshotName) => {
 	return result;
 };
 
+const sanitizeRouteForReport = (route) => route.replace(/[/?]/g, '-').replace(/^-+/, '') || 'root';
+
+const buildReportOptions = (testInfo, route) => ({
+	projectKey: `axe-${themeName}`,
+	reportFileName: `${sanitizeRouteForReport(route)}.html`,
+	outputDirPath: rename(testInfo.outputDir),
+	outputDir: `axe-${themeName}`,
+});
+
+const logViolations = (route, violations) => {
+	if (!violations?.length) {
+		return;
+	}
+	console.warn(`Axe found ${violations.length} violation(s) on ${route}`);
+	for (const violation of violations) {
+		console.warn(`- ${violation.id}: ${violation.help} (${violation.nodes.length} nodes)`);
+	}
+};
+
 // https://playwright.dev/docs/emulation
 test.use({
 	colorScheme: 'light',
@@ -43,7 +67,6 @@ ROUTES.forEach((options, route) => {
 		return;
 	}
 	test(`snapshot for ${route}`, async ({ page }, testInfo) => {
-		const outputPath = rename(testInfo.outputDir);
 		const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
 		await page.goto(`/#${route}${hideMenusParam}`);
 		await page.waitForLoadState('networkidle');
@@ -62,29 +85,16 @@ ROUTES.forEach((options, route) => {
 			await page.waitForTimeout(options?.snapshot?.waitForTimeout);
 		}
 
-		await injectAxe(page);
-		await checkA11y(
-			page,
-			undefined,
-			{
-				axeOptions: {
-					runOnly: {
-						type: 'tag',
-						values: ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'],
-					},
-				},
-				detailedReport: true,
-				detailedReportOptions: {
-					html: true,
-				},
-			},
-			true, // options?.axe?.skipFailures ?? false,
-			'html',
-			{
-				outputDirPath: outputPath.replace(/\/[^/]+$/, ''),
-				outputDir: `axe-${themeName}`,
-				reportFileName: `${route.replace(/[/?]/g, '-')}.html`,
-			},
-		);
+		const builder = new AxeBuilder({ page }).withTags(AXE_TAGS);
+		const results = await builder.analyze();
+		await testInfo.attach('axe-results', {
+			body: JSON.stringify(results, null, 2),
+			contentType: 'application/json',
+		});
+		createHtmlReport({
+			results,
+			options: buildReportOptions(testInfo, route),
+		});
+		logViolations(route, results.violations);
 	});
 });

package/tests/sample-app.routes.js

@@ -176,6 +176,13 @@ ROUTES.set('card/basic', {
 		},
 	},
 });
+ROUTES.set('card/headlines', {
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
+	},
+});
 ROUTES.set('combobox/basic?noColumns', {
 	snapshot: {
 		skip: true,
@@ -297,7 +304,18 @@ ROUTES.set('icon/basic', {
 	snapshot: {
 		viewportSize: {
 			width: 60,
-			height: 80,
+			height: 200,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('icon/font-awesome', {
+	snapshot: {
+		viewportSize: {
+			width: 250,
+			height: 345,
 		},
 		zoom: {
 			skip: true,
@@ -409,6 +427,17 @@ ROUTES.set('input-number/basic?noColumns', {
 		},
 	},
 });
+ROUTES.set('input-number/number-formatter', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 300,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
 ROUTES.set('input-password/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
@@ -489,6 +518,17 @@ ROUTES.set('input-text/basic?noColumns', {
 		},
 	},
 });
+ROUTES.set('input-text/text-formatter', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 690,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
 ROUTES.set('kolibri/basic', {
 	snapshot: {
 		skip: true,
@@ -572,6 +612,17 @@ ROUTES.set('pagination/basic', {
 		},
 	},
 });
+ROUTES.set('popover-button/basic', {
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
+		viewportSize: {
+			width: 200,
+			height: 220,
+		},
+	},
+});
 ROUTES.set('progress/basic', {
 	snapshot: {
 		zoom: {
@@ -604,7 +655,6 @@ ROUTES.set('select/basic?noColumns', {
 });
 ROUTES.set('skip-nav/basic', {
 	snapshot: {
-		skip: true,
 		zoom: {
 			skip: true,
 		},

package/tests/theme-snapshots.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { ROUTES } from './sample-app.routes.js';
 
 // https://playwright.dev/docs/emulation