@public-ui/visual-tests 2.2.8 → 3.0.0-638ed75dd472d3e3ad4c1c3a3c72d705e6022731.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.8",
+  "version": "3.0.0-638ed75dd472d3e3ad4c1c3a3c72d705e6022731.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -29,7 +29,7 @@
     "axe-playwright": "2.1.0",
     "portfinder": "1.0.35",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "2.2.8"
+    "@public-ui/sample-react": "3.0.0-638ed75dd472d3e3ad4c1c3a3c72d705e6022731.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.26.10",

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

@@ -53,11 +53,6 @@ ROUTES.set('breadcrumb/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('button-group/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('button-link/basic', {
 	axe: {
 		skipFailures: false,
@@ -108,7 +103,7 @@ ROUTES.set('card/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('combobox/basic', {
+ROUTES.set('combobox/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -177,27 +172,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,
@@ -208,16 +197,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,
@@ -249,7 +228,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,
@@ -281,7 +265,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,
@@ -292,7 +276,7 @@ ROUTES.set('spin/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('single-select/basic', {
+ROUTES.set('single-select/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -382,7 +366,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,
@@ -496,11 +480,6 @@ ROUTES.set('version/context', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('scenarios/appointment-form', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('scenarios/static-form', {
 	axe: {
 		skipFailures: false,
@@ -511,15 +490,6 @@ ROUTES.set('scenarios/disabled-interactive-scenario', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('scenarios/same-height-of-all-interactive-elements', {
-	axe: {
-		skipFailures: false,
-	},
-	viewportSize: {
-		width: 4000,
-		height: 0,
-	},
-});
 
 /* Focus tests */
 ROUTES.set('scenarios/focus-elements?component=accordion');

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