@public-ui/visual-tests 3.0.0-rc.2 → 3.0.0-rc.4

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": "3.0.0-rc.2",
+  "version": "3.0.0-rc.4",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -26,12 +26,12 @@
     "axe-playwright": "2.0.3",
     "portfinder": "1.0.32",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "3.0.0-rc.2"
+    "@public-ui/sample-react": "3.0.0-rc.4"
   },
   "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.40.0",
     "prettier": "3.4.2"

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/tests/sample-app.routes.js

@@ -105,7 +105,7 @@ ROUTES.set('card/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('combobox/basic', {
+ROUTES.set('combobox/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -174,22 +174,21 @@ ROUTES.set('image/basic', {
 		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,
@@ -231,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,
@@ -263,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,
@@ -274,7 +278,7 @@ ROUTES.set('spin/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('single-select/basic', {
+ROUTES.set('single-select/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -364,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,