@public-ui/visual-tests 2.2.7-rc.0 → 2.2.8-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "2.2.7-rc.0",
+  "version": "2.2.8-rc.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -15,6 +15,9 @@
     "name": "Informationstechnikzentrum Bund",
     "email": "kolibri@itzbund.de"
   },
+  "engines": {
+    "pnpm": "^10"
+  },
   "type": "module",
   "sideEffects": false,
   "description": "Provides utility to run visual regression tests for themes.",
@@ -22,19 +25,19 @@
     "kolibri-visual-test": "src/index.js"
   },
   "dependencies": {
-    "@playwright/test": "1.50.0",
-    "axe-playwright": "2.0.3",
-    "portfinder": "1.0.32",
+    "@playwright/test": "1.49.1",
+    "axe-playwright": "2.1.0",
+    "portfinder": "1.0.35",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "2.2.7-rc.0"
+    "@public-ui/sample-react": "2.2.8-rc.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.26.5",
+    "@babel/eslint-parser": "7.26.10",
     "@babel/plugin-syntax-import-attributes": "7.26.0",
-    "@babel/preset-env": "7.26.7",
+    "@babel/preset-env": "7.26.9",
     "eslint": "8.57.1",
-    "knip": "5.43.6",
-    "prettier": "3.4.2"
+    "knip": "5.46.0",
+    "prettier": "3.5.3"
   },
   "files": [
     "playwright.config.js",

package/playwright.config.js

@@ -59,4 +59,5 @@ export default defineConfig({
 		url: URL,
 		reuseExistingServer: false,
 	},
+	snapshotPathTemplate: `{snapshotDir}/theme-${(process.env.THEME_EXPORT || 'default').toLocaleLowerCase()}/{arg}-{projectName}-{platform}{ext}`,
 });

package/src/index.js

@@ -20,7 +20,7 @@ process.env.THEME_MODULE = path.join(process.cwd(), process.env.THEME_MODULE); /
 const visualsTestModulePath = fileURLToPath(new URL('..', import.meta.url));
 const binaryPath = fileURLToPath(new URL('../node_modules/.bin', import.meta.url));
 
-let sampleReactPath = '../node_modules/@public-ui/sample-react';
+let sampleReactPath = '../node_modules/@public-ui/visual-tests/node_modules/@public-ui/sample-react';
 let backSteps = ``;
 let workingDir = null;
 do {

package/tests/sample-app.routes.js

@@ -98,6 +98,11 @@ ROUTES.set('button/baselined', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('button/short-key', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('card/basic', {
 	axe: {
 		skipFailures: false,
@@ -506,6 +511,15 @@ ROUTES.set('scenarios/disabled-interactive-scenario', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('scenarios/same-height-of-all-interactive-elements', {
+	axe: {
+		skipFailures: false,
+	},
+	viewportSize: {
+		width: 4000,
+		height: 0,
+	},
+});
 
 /* Focus tests */
 ROUTES.set('scenarios/focus-elements?component=accordion');

package/tests/theme-snapshots.spec.js

@@ -1,40 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { ROUTES } from './sample-app.routes.js';
 
-// https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
-export const configureSnapshotPath =
-	() =>
-	// eslint-disable-next-line no-empty-pattern
-	({}, testInfo) => {
-		const originalSnapshotPath = testInfo.snapshotPath;
-		testInfo.snapshotPath = (snapshotName) => {
-			const result = originalSnapshotPath
-				.apply(testInfo, [snapshotName])
-
-				// Remove browser name from snapshot name
-				// .replace('-chromium', '')
-				// .replace('-firefox', '')
-
-				// Remove os name from snapshot name
-				// .replace('-darwin', '')
-				// .replace('-linux', '')
-				// .replace('-windows', '')
-
-				// Remove test counter from snapshot name
-				.replace('-1-', '-')
-
-				// Identify 2. test as zoom snapshot
-				.replace('-2-', '-zoom-')
-
-				// Make different snapshot folder for different themes
-				.replace('theme-snapshots.spec.js', `theme-${(process.env.THEME_EXPORT || 'default').toLocaleLowerCase()}`)
-				.replace('-snapshots', '');
-			return result;
-		};
-	};
-
-test.beforeEach(configureSnapshotPath());
-
 // https://playwright.dev/docs/emulation
 test.use({
 	colorScheme: 'light',
@@ -47,27 +13,51 @@ test.use({
 	},
 });
 
+const DEFAULT_SNAPSHOT_OPTIONS = {
+	animations: 'disabled',
+	fullPage: true,
+	maxDiffPixelRatio: 0,
+	scale: 'css', // 'css' or 'device'
+};
+
 ROUTES.forEach((options, route) => {
 	test(`snapshot for ${route}`, async ({ page }) => {
 		const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
-		await page.goto(`/#${route}${hideMenusParam}`, { waitUntil: 'networkidle' });
+		await page.goto(`/#${route}${hideMenusParam}`);
+		await page.waitForLoadState('networkidle');
+		await page.addStyleTag({
+			content: `
+				* {
+					transition: none !important;
+					animation: none !important;
+				}
+			`,
+		});
 		if (options?.viewportSize) {
 			await page.setViewportSize(options.viewportSize);
 		}
 		if (options?.waitForTimeout) {
 			await page.waitForTimeout(options.waitForTimeout);
 		}
-		await expect(page).toHaveScreenshot({
-			fullPage: true,
-			maxDiffPixelRatio: 0.01,
+
+		/**
+		 * We would like to use a readable name for the snapshot file.
+		 */
+		const snapshotName = `snapshot-for-${route.replace(/(\/|\?|&|=)/g, '-')}`;
+
+		await expect(page).toHaveScreenshot(`${snapshotName}.png`, {
+			...DEFAULT_SNAPSHOT_OPTIONS,
 			...options,
 		});
 		await page.evaluate(() => {
+			// eslint-disable-next-line no-undef
 			document.body.style.zoom = '400%';
+			// document.body.style.transform = 'scale(4)';
+			// document.body.style.transformOrigin = 'top left';
+			// document.body.style.width = '25vw';
 		});
-		await expect(page).toHaveScreenshot({
-			fullPage: true,
-			maxDiffPixelRatio: 0.02,
+		await expect(page).toHaveScreenshot(`${snapshotName}-zoom.png`, {
+			...DEFAULT_SNAPSHOT_OPTIONS,
 			...options,
 		});
 	});