@public-ui/visual-tests 2.2.11 → 3.0.0-0a564237c37a5d1ca12470bdd73e4ea1eac06982.0

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": "3.0.0-0a564237c37a5d1ca12470bdd73e4ea1eac06982.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.52.0",
+    "@playwright/test": "1.49.1",
     "axe-playwright": "2.1.0",
-    "portfinder": "1.0.37",
+    "portfinder": "1.0.35",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "2.2.11"
+    "@public-ui/sample-react": "3.0.0-0a564237c37a5d1ca12470bdd73e4ea1eac06982.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.27.1",
-    "@babel/plugin-syntax-import-attributes": "7.27.1",
-    "@babel/preset-env": "7.27.2",
+    "@babel/eslint-parser": "7.26.10",
+    "@babel/plugin-syntax-import-attributes": "7.26.0",
+    "@babel/preset-env": "7.26.9",
     "eslint": "8.57.1",
-    "knip": "5.56.0",
+    "knip": "5.46.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/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,
@@ -168,7 +163,7 @@ ROUTES.set('card/basic', {
 		},
 	},
 });
-ROUTES.set('combobox/basic', {
+ROUTES.set('combobox/basic?noColumns', {
 	snapshot: {
 		skip: true,
 	},
@@ -281,16 +276,9 @@ ROUTES.set('image/basic', {
 		zoom: {
 			skip: true,
 		},
-	},	
-});
-ROUTES.set('indented-text/basic', {
-	snapshot: {
-		zoom: {
-			skip: true,
-		},
 	},
 });
-ROUTES.set('input-checkbox/basic', {
+ROUTES.set('input-checkbox/basic?noColumns', {
 	axe: {
 		skipFailures: true,
 	},
@@ -304,7 +292,7 @@ ROUTES.set('input-checkbox/basic', {
 		},
 	},
 });
-ROUTES.set('input-checkbox/button', {
+ROUTES.set('input-checkbox/button?noColumns', {
 	axe: {
 		skipFailures: true,
 	},
@@ -318,7 +306,7 @@ ROUTES.set('input-checkbox/button', {
 		},
 	},
 });
-ROUTES.set('input-checkbox/switch', {
+ROUTES.set('input-checkbox/switch?noColumns', {
 	axe: {
 		skipFailures: true,
 	},
@@ -332,7 +320,7 @@ ROUTES.set('input-checkbox/switch', {
 		},
 	},
 });
-ROUTES.set('input-color/basic', {
+ROUTES.set('input-color/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -343,7 +331,7 @@ ROUTES.set('input-color/basic', {
 		},
 	},
 });
-ROUTES.set('input-date/basic', {
+ROUTES.set('input-date/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -354,7 +342,7 @@ ROUTES.set('input-date/basic', {
 		},
 	},
 });
-ROUTES.set('input-email/basic', {
+ROUTES.set('input-email/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -365,7 +353,7 @@ ROUTES.set('input-email/basic', {
 		},
 	},
 });
-ROUTES.set('input-file/basic', {
+ROUTES.set('input-file/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -376,7 +364,7 @@ ROUTES.set('input-file/basic', {
 		},
 	},
 });
-ROUTES.set('input-number/basic', {
+ROUTES.set('input-number/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -387,7 +375,7 @@ ROUTES.set('input-number/basic', {
 		},
 	},
 });
-ROUTES.set('input-password/basic', {
+ROUTES.set('input-password/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -398,7 +386,7 @@ ROUTES.set('input-password/basic', {
 		},
 	},
 });
-ROUTES.set('input-password/show-password', {
+ROUTES.set('input-password/show-password?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -409,7 +397,7 @@ ROUTES.set('input-password/show-password', {
 		},
 	},
 });
-ROUTES.set('input-radio/basic', {
+ROUTES.set('input-radio/basic?noColumns', {
 	axe: {
 		skipFailures: true,
 	},
@@ -423,7 +411,7 @@ ROUTES.set('input-radio/basic', {
 		},
 	},
 });
-ROUTES.set('input-radio/horizontal', {
+ROUTES.set('input-radio/horizontal?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -434,7 +422,7 @@ ROUTES.set('input-radio/horizontal', {
 		},
 	},
 });
-ROUTES.set('input-radio/object', {
+ROUTES.set('input-radio/object?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -445,7 +433,7 @@ ROUTES.set('input-radio/object', {
 		},
 	},
 });
-ROUTES.set('input-range/basic', {
+ROUTES.set('input-range/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -456,10 +444,7 @@ ROUTES.set('input-range/basic', {
 		},
 	},
 });
-ROUTES.set('input-text/basic', {
-	axe: {
-		skipFailures: true,
-	},
+ROUTES.set('input-text/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -469,9 +454,6 @@ ROUTES.set('input-text/basic', {
 			skip: true,
 		},
 	},
-});
-ROUTES.set('input-text/focus', {
-
 });
 ROUTES.set('kolibri/basic', {
 	snapshot: {
@@ -486,16 +468,6 @@ ROUTES.set('link-button/basic', {
 		skip: true,
 	},
 });
-ROUTES.set('link-group/basic', {
-	snapshot: {
-		skip: true,
-	},	
-});
-ROUTES.set('link-group/horizontal', {
-	snapshot: {
-		skip: true,
-	},
-});
 ROUTES.set('link/basic', {
 	snapshot: {
 		zoom: {
@@ -540,6 +512,17 @@ ROUTES.set('modal/basic?show-modal=true', {
 		},
 	},
 });
+ROUTES.set('modal/basic?show-modal=true&variant=card', {
+	snapshot: {
+		viewportSize: {
+			width: 1920,
+			height: 600,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
 ROUTES.set('nav/aria-current', {
 	snapshot: {
 		skip: true,
@@ -592,7 +575,7 @@ ROUTES.set('quote/block', {
 		},
 	},
 });
-ROUTES.set('select/basic', {
+ROUTES.set('select/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -622,7 +605,7 @@ ROUTES.set('spin/basic', {
 		},
 	},
 });
-ROUTES.set('single-select/basic', {
+ROUTES.set('single-select/basic?noColumns', {
 	axe: {
 		skipFailures: true,
 	},
@@ -774,7 +757,7 @@ ROUTES.set('textarea/adjust-height', {
 		},
 	},
 });
-ROUTES.set('textarea/basic', {
+ROUTES.set('textarea/basic?noColumns', {
 	snapshot: {
 		viewportSize: {
 			width: 500,
@@ -946,7 +929,7 @@ ROUTES.set('toast/basic?type=error&variant=msg', {
 ROUTES.set('toolbar/basic', {
 	snapshot: {
 		viewportSize: {
-			width: 300,
+			width: 600,
 			height: 100,
 		},
 		zoom: {
@@ -982,7 +965,7 @@ ROUTES.set('tree/basic/home', {
 ROUTES.set('version/basic', {
 	snapshot: {
 		viewportSize: {
-			width: 100,
+			width: 150,
 			height: 100,
 		},
 		zoom: {
@@ -998,17 +981,6 @@ ROUTES.set('version/context', {
 		},
 	},
 });
-ROUTES.set('scenarios/appointment-form', {
-	axe: {
-		skipFailures: true,
-	},
-	snapshot: {
-		skip: true,
-		zoom: {
-			skip: true,
-		},
-	},
-});
 ROUTES.set('scenarios/static-form', {
 	axe: {
 		skipFailures: true,

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) => {