@public-ui/visual-tests 2.2.11 → 2.2.12

package/README.md

@@ -48,8 +48,12 @@ Add the following npm scripts to the theme's `package.json`:
 }
 ```
 
-- `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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "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.52.0",
+    "@playwright/test": "1.53.0",
     "axe-playwright": "2.1.0",
     "portfinder": "1.0.37",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "2.2.11"
+    "@public-ui/sample-react": "2.2.12"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.27.1",
+    "@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.56.0",
+    "knip": "5.61.0",
     "prettier": "3.5.3"
   },
   "files": [
@@ -48,7 +48,6 @@
     "format": "prettier --check src",
     "lint": "pnpm lint:eslint",
     "lint:eslint": "eslint src",
-    "unused": "knip",
-    "postinstall": "pnpm exec playwright install"
+    "unused": "knip"
   }
 }

package/tests/axe-snapshots.spec.js

@@ -38,7 +38,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 +82,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

@@ -89,11 +89,6 @@ ROUTES.set('breadcrumb/basic', {
 		skip: true,
 	},
 });
-ROUTES.set('button-group/basic', {
-	snapshot: {
-		skip: true,
-	},
-});
 ROUTES.set('button-link/basic', {
 	snapshot: {
 		skip: true,
@@ -256,6 +251,7 @@ ROUTES.set('heading/basic', {
 		},
 	},
 });
+ROUTES.set('heading/secondary');
 ROUTES.set('heading/paragraph', {
 	snapshot: {
 		skip: true,
@@ -281,7 +277,7 @@ ROUTES.set('image/basic', {
 		zoom: {
 			skip: true,
 		},
-	},	
+	},
 });
 ROUTES.set('indented-text/basic', {
 	snapshot: {
@@ -471,9 +467,6 @@ ROUTES.set('input-text/basic', {
 	},
 });
 ROUTES.set('input-text/focus', {
-
-});
-ROUTES.set('kolibri/basic', {
 	snapshot: {
 		skip: true,
 		zoom: {
@@ -481,17 +474,15 @@ ROUTES.set('kolibri/basic', {
 		},
 	},
 });
-ROUTES.set('link-button/basic', {
+ROUTES.set('kolibri/basic', {
 	snapshot: {
 		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('link-group/basic', {
-	snapshot: {
-		skip: true,
-	},	
-});
-ROUTES.set('link-group/horizontal', {
+ROUTES.set('link-button/basic', {
 	snapshot: {
 		skip: true,
 	},
@@ -946,7 +937,7 @@ ROUTES.set('toast/basic?type=error&variant=msg', {
 ROUTES.set('toolbar/basic', {
 	snapshot: {
 		viewportSize: {
-			width: 300,
+			width: 600,
 			height: 100,
 		},
 		zoom: {
@@ -982,7 +973,7 @@ ROUTES.set('tree/basic/home', {
 ROUTES.set('version/basic', {
 	snapshot: {
 		viewportSize: {
-			width: 100,
+			width: 150,
 			height: 100,
 		},
 		zoom: {

package/tests/theme-snapshots.spec.js

@@ -18,6 +18,7 @@ const DEFAULT_SNAPSHOT_OPTIONS = {
 	fullPage: true,
 	maxDiffPixelRatio: 0,
 	scale: 'css', // 'css' or 'device'
+	timeout: 10000,
 };
 
 ROUTES.forEach((options, route) => {