@public-ui/visual-tests 3.0.0-alpha.1 → 3.0.0-ec88c9a9f00b83411c02bb7c1e982732e1259613.0

package/README.md

@@ -1,5 +1,13 @@
 # KoliBri - Visual Tests
 
+[![npm](https://img.shields.io/npm/v/@public-ui/visual-tests)](https://www.npmjs.com/package/@public-ui/components)
+[![license](https://img.shields.io/npm/l/@public-ui/visual-tests)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dt/@public-ui/visual-tests)](https://www.npmjs.com/package/@public-ui/visual-tests)
+[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
+[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
+[![size](https://img.shields.io/bundlephobia/min/@public-ui/visual-tests)](https://bundlephobia.com/result?p=@public-ui/visual-tests)
+![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
+
 ## Motivation
 
 The `KoliBri` Visual Tests provide a way to add visual regression testing to **theme** modules.  
@@ -7,11 +15,23 @@ It takes screenshots of every component defined in the [React Sample App](https:
 
 ## Installation
 
+It is recommended to configure NPM via `.npmrc`:
+
+```bash
+# - npm
+engine-strict=true
+save-exact=true
+
+# - pnpm
+shamefully-hoist=true # this is required for the visual tests to work
+workspace-concurrency=1
+```
+
 You can install the `KoliBri` Visual Tests with `npm`, `pnpm` or `yarn`:
 
 ```bash
 npm i -D @public-ui/visual-tests
-pnpm i -D @public-ui/visual-tests
+pnpm i -D @public-ui/visual-tests # recommended
 yarn add -D @public-ui/visual-tests
 ```
 
@@ -21,17 +41,21 @@ Add the following npm scripts to the theme's `package.json`:
 
 ```json
 {
-    "scripts": {
-        "test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
-        "test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots",
-    }
+	"scripts": {
+		"test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots"
+	}
 }
 ```
 
-* `THEME_MODULE` defines the relative path to the TypeScript module containing the the theme definitions. Without file extension. 
-* `THEME_EXPERT` defines the name of the export within the the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.  
+### Environment variables
+
+- `THEME_MODULE`: Define the relative path to the TypeScript module containing the theme definitions. Without file extension.
+- `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).
 
 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.
 
-To update the reference screenshots call `npm run test-update`.
+To update the reference screenshots call `npm run test-update`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-ec88c9a9f00b83411c02bb7c1e982732e1259613.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -22,19 +22,19 @@
     "kolibri-visual-test": "src/index.js"
   },
   "dependencies": {
-    "@playwright/test": "1.49.0",
+    "@playwright/test": "1.49.1",
     "axe-playwright": "2.0.3",
     "portfinder": "1.0.32",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "3.0.0-alpha.1"
+    "@public-ui/sample-react": "3.0.0-ec88c9a9f00b83411c02bb7c1e982732e1259613.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.25.9",
     "@babel/plugin-syntax-import-attributes": "7.26.0",
-    "@babel/preset-env": "7.26.0",
+    "@babel/preset-env": "7.26.7",
     "eslint": "8.57.1",
-    "knip": "5.37.1",
-    "prettier": "3.3.3"
+    "knip": "5.40.0",
+    "prettier": "3.4.2"
   },
   "files": [
     "playwright.config.js",

package/playwright.config.js

@@ -36,6 +36,10 @@ export default defineConfig({
 		trace: 'on-first-retry',
 	},
 
+	expect: {
+		timeout: process.env.KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT ? Number(process.env.KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT) : undefined,
+	},
+
 	/* Configure projects for major browsers */
 	projects: [
 		// {

package/src/index.js

@@ -2,6 +2,7 @@ import child_process from 'node:child_process';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'url';
 import * as crypto from 'crypto';
+import { readFile } from 'fs/promises';
 import * as fs from 'fs';
 import portfinder from 'portfinder';
 import * as process from 'process';
@@ -35,12 +36,11 @@ if (!fs.existsSync(workingDir)) {
 const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
 const rawPackageJsonPath = new URL(path.join(workingDir, 'package.json'), import.meta.url).href;
 const packageJsonPath = process.platform === 'win32' ? pathToFileURL(rawPackageJsonPath) : rawPackageJsonPath;
-const packageJson = await import(packageJsonPath, {
-	assert: { type: 'json' },
-});
+const packageJsonContent = await readFile(new URL(packageJsonPath, import.meta.url), 'utf8');
+const packageJson = JSON.parse(packageJsonContent);
 
 console.log(`
-Building React Sample App (v${packageJson?.default?.version ?? '#.#.#'}) …`);
+Building React Sample App (v${packageJson?.version ?? '#.#.#'}) …`);
 
 child_process.spawnSync('pnpm', ['run', 'build', '--', `--output-path="${buildPath}"`], {
 	cwd: workingDir,

package/tests/sample-app.routes.js

@@ -60,11 +60,6 @@ ROUTES.set('breadcrumb/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('button-group/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('button-link/basic', {
 	axe: {
 		skipFailures: false,
@@ -110,7 +105,7 @@ ROUTES.set('card/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('combobox/basic', {
+ROUTES.set('combobox/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -179,27 +174,21 @@ ROUTES.set('image/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('indented-text/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
-ROUTES.set('input-checkbox/basic', null);
-ROUTES.set('input-checkbox/button', null);
-ROUTES.set('input-checkbox/switch', null);
-ROUTES.set('input-color/basic', null);
-ROUTES.set('input-date/basic', null);
-ROUTES.set('input-email/basic', null);
-ROUTES.set('input-file/basic', null);
-ROUTES.set('input-number/basic', null);
-ROUTES.set('input-password/basic', null);
-ROUTES.set('input-password/show-password', null);
-ROUTES.set('input-radio/basic', null);
-ROUTES.set('input-radio/horizontal', null);
-ROUTES.set('input-radio/object', null);
-ROUTES.set('input-range/basic', null);
-ROUTES.set('input-text/basic', null);
-ROUTES.set('input-text/focus', null);
+ROUTES.set('input-checkbox/basic?noColumns', null);
+ROUTES.set('input-checkbox/button?noColumns', null);
+ROUTES.set('input-checkbox/switch?noColumns', null);
+ROUTES.set('input-color/basic?noColumns', null);
+ROUTES.set('input-date/basic?noColumns', null);
+ROUTES.set('input-email/basic?noColumns', null);
+ROUTES.set('input-file/basic?noColumns', null);
+ROUTES.set('input-number/basic?noColumns', null);
+ROUTES.set('input-password/basic?noColumns', null);
+ROUTES.set('input-password/show-password?noColumns', null);
+ROUTES.set('input-radio/basic?noColumns', null);
+ROUTES.set('input-radio/horizontal?noColumns', null);
+ROUTES.set('input-radio/object?noColumns', null);
+ROUTES.set('input-range/basic?noColumns', null);
+ROUTES.set('input-text/basic?noColumns', null);
 ROUTES.set('kolibri/basic', {
 	axe: {
 		skipFailures: false,
@@ -210,16 +199,6 @@ ROUTES.set('link-button/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('link-group/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
-ROUTES.set('link-group/horizontal', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('link/basic', {
 	axe: {
 		skipFailures: false,
@@ -251,7 +230,12 @@ ROUTES.set('modal/basic?show-modal=true', {
 		height: 600,
 	},
 });
-
+ROUTES.set('modal/basic?show-modal=true&variant=card', {
+	viewportSize: {
+		width: 1920,
+		height: 600,
+	},
+});
 ROUTES.set('nav/aria-current', {
 	axe: {
 		skipFailures: false,
@@ -283,7 +267,7 @@ ROUTES.set('quote/block', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('select/basic', null);
+ROUTES.set('select/basic?noColumns', null);
 ROUTES.set('skip-nav/basic', {
 	axe: {
 		skipFailures: false,
@@ -294,7 +278,7 @@ ROUTES.set('spin/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('single-select/basic', {
+ROUTES.set('single-select/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -384,7 +368,7 @@ ROUTES.set('textarea/adjust-height', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('textarea/basic', null);
+ROUTES.set('textarea/basic?noColumns', null);
 ROUTES.set('textarea/resize', {
 	axe: {
 		skipFailures: false,
@@ -498,11 +482,6 @@ ROUTES.set('version/context', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('scenarios/appointment-form', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('scenarios/static-form', {
 	axe: {
 		skipFailures: false,

package/tests/theme-snapshots.spec.js

@@ -23,6 +23,9 @@ export const configureSnapshotPath =
 				// 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', '');
@@ -44,12 +47,7 @@ test.use({
 	},
 });
 
-const blocklist = [];
-
 ROUTES.forEach((options, route) => {
-	if (blocklist.includes(route)) {
-		return;
-	}
 	test(`snapshot for ${route}`, async ({ page }) => {
 		const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
 		await page.goto(`/#${route}${hideMenusParam}`, { waitUntil: 'networkidle' });
@@ -64,5 +62,13 @@ ROUTES.forEach((options, route) => {
 			maxDiffPixelRatio: 0.01,
 			...options,
 		});
+		await page.evaluate(() => {
+			document.body.style.zoom = '400%';
+		});
+		await expect(page).toHaveScreenshot({
+			fullPage: true,
+			maxDiffPixelRatio: 0.02,
+			...options,
+		});
 	});
 });