@public-ui/visual-tests 3.0.1-rc.0 → 3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0

package/README.md

@@ -1,5 +1,7 @@
 # KoliBri - Visual Tests
 
+Utilities for screenshot based regression testing of KoliBri themes.
+
 [![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)
@@ -59,3 +61,5 @@ Run the tests with `npm test`. The first time, this will create a new folder `sn
 In the following runs, new screenshots will be compared to this reference.
 
 To update the reference screenshots call `npm run test-update`.
+
+For details on theming see the [default theme README](../../themes/default/README.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "3.0.1-rc.0",
+  "version": "3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -25,18 +25,18 @@
     "kolibri-visual-test": "src/index.js"
   },
   "dependencies": {
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.53.0",
     "axe-playwright": "2.1.0",
-    "portfinder": "1.0.35",
+    "portfinder": "1.0.37",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "3.0.1-rc.0"
+    "@public-ui/sample-react": "3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.26.10",
-    "@babel/plugin-syntax-import-attributes": "7.26.0",
-    "@babel/preset-env": "7.26.9",
+    "@babel/eslint-parser": "7.27.5",
+    "@babel/plugin-syntax-import-attributes": "7.27.1",
+    "@babel/preset-env": "7.27.2",
     "eslint": "8.57.1",
-    "knip": "5.46.0",
+    "knip": "5.61.0",
     "prettier": "3.5.3"
   },
   "files": [

package/src/index.js

@@ -35,12 +35,19 @@ const packageJson = JSON.parse(packageJsonContent);
 console.log(`
 Building React Sample App (v${packageJson?.version ?? '#.#.#'}) …`);
 
-child_process.spawnSync('pnpm', ['run', 'build', '--', `--output-path="${buildPath}"`], {
+const buildResult = child_process.spawnSync('pnpm', ['run', 'build', `--outDir="${buildPath}"`], {
 	cwd: workingDir,
 	encoding: 'utf-8',
 	shell: true,
 });
 
+if (buildResult.status !== 0) {
+	console.log('Build status:', buildResult.status);
+	console.log('Build stdout:', buildResult.stdout);
+	console.log('Build stderr:', buildResult.stderr);
+	console.log('Build error:', buildResult.error);
+}
+
 console.log(`React Sample App build finished. Directory:`, buildPath);
 
 void (async () => {

package/tests/axe-snapshots.spec.js

@@ -1,6 +1,7 @@
 import { test } from '@playwright/test';
 import { checkA11y, injectAxe } from 'axe-playwright';
 import { ROUTES } from './sample-app.routes.js';
+import process from 'process';
 
 const themeName = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
 const rename = (snapshotName) => {
@@ -38,7 +39,7 @@ test.use({
 
 ROUTES.forEach((options, route) => {
 	// Skip unnecessary axe tests
-	if (options?.axe?.skip === true) {
+	if (options?.axe?.skip === true || process.argv.includes('--update-snapshots')) {
 		return;
 	}
 	test(`snapshot for ${route}`, async ({ page }, testInfo) => {
@@ -82,7 +83,7 @@ ROUTES.forEach((options, route) => {
 			{
 				outputDirPath: outputPath.replace(/\/[^/]+$/, ''),
 				outputDir: `axe-${themeName}`,
-				reportFileName: `${route.replace('/', '-')}.html`,
+				reportFileName: `${route.replace(/[/?]/g, '-')}.html`,
 			},
 		);
 	});

package/tests/sample-app.routes.js

@@ -213,6 +213,17 @@ ROUTES.set('drawer/basic?align=bottom', {
 		},
 	},
 });
+ROUTES.set('drawer/basic?align=left&closer=true', {
+	snapshot: {
+		viewportSize: {
+			width: 600,
+			height: 400,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
 ROUTES.set('form/basic', {
 	snapshot: {
 		skip: true,
@@ -251,6 +262,7 @@ ROUTES.set('heading/basic', {
 		},
 	},
 });
+ROUTES.set('heading/secondary');
 ROUTES.set('heading/paragraph', {
 	snapshot: {
 		skip: true,
@@ -739,6 +751,16 @@ ROUTES.set('tabs/basic', {
 		},
 	},
 });
+ROUTES.set('tabs/create-button', {
+	axe: {
+		skipFailures: true,
+	},
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
+	},
+});
 ROUTES.set('tabs/icons-only', {
 	snapshot: {
 		viewportSize: {