@public-ui/visual-tests 1.7.0-rc.13 → 1.7.0-rc.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +48 -47
  2. package/tests/axe-snapshots.spec.js +82 -0
  3. package/tests/sample-app.routes.js +3 -2
  4. package/tests/theme-snapshots.spec.js +1 -0
package/package.json CHANGED
@@ -1,48 +1,49 @@
1
1
  {
2
- "name": "@public-ui/visual-tests",
3
- "version": "1.7.0-rc.13",
4
- "license": "EUPL-1.2",
5
- "homepage": "https://public-ui.github.io",
6
- "repository": "https://github.com/public-ui/kolibri",
7
- "bugs": {
8
- "url": "https://github.com/public-ui/kolibri/issues",
9
- "email": "kolibri@itzbund.de"
10
- },
11
- "author": {
12
- "name": "Informationstechnikzentrum Bund",
13
- "email": "kolibri@itzbund.de"
14
- },
15
- "type": "module",
16
- "sideEffects": false,
17
- "description": "Provides utility to run visual regression tests for themes.",
18
- "scripts": {
19
- "depcheck": "depcheck --ignores=@babel/plugin-syntax-import-attributes,@babel/preset-env,@public-ui/sample-react,portfinder,serve",
20
- "format": "prettier --check src",
21
- "lint": "eslint src",
22
- "unused": "knip"
23
- },
24
- "bin": {
25
- "kolibri-visual-test": "src/index.js"
26
- },
27
- "dependencies": {
28
- "@playwright/test": "1.38.0",
29
- "@public-ui/sample-react": "1.7.0-rc.13",
30
- "portfinder": "1.0.32",
31
- "serve": "14.2.1"
32
- },
33
- "devDependencies": {
34
- "@babel/eslint-parser": "7.22.15",
35
- "@babel/plugin-syntax-import-attributes": "7.22.5",
36
- "@babel/preset-env": "7.22.20",
37
- "depcheck": "1.4.6",
38
- "eslint": "8.49.0",
39
- "eslint-plugin-no-loops": "0.3.0",
40
- "knip": "2.25.2",
41
- "prettier": "3.0.3"
42
- },
43
- "files": [
44
- "playwright.config.js",
45
- "src",
46
- "tests"
47
- ]
48
- }
2
+ "name": "@public-ui/visual-tests",
3
+ "version": "1.7.0-rc.16",
4
+ "license": "EUPL-1.2",
5
+ "homepage": "https://public-ui.github.io",
6
+ "repository": "https://github.com/public-ui/kolibri",
7
+ "bugs": {
8
+ "url": "https://github.com/public-ui/kolibri/issues",
9
+ "email": "kolibri@itzbund.de"
10
+ },
11
+ "author": {
12
+ "name": "Informationstechnikzentrum Bund",
13
+ "email": "kolibri@itzbund.de"
14
+ },
15
+ "type": "module",
16
+ "sideEffects": false,
17
+ "description": "Provides utility to run visual regression tests for themes.",
18
+ "bin": {
19
+ "kolibri-visual-test": "src/index.js"
20
+ },
21
+ "dependencies": {
22
+ "@playwright/test": "1.38.1",
23
+ "@public-ui/sample-react": "1.7.0-rc.16",
24
+ "portfinder": "1.0.32",
25
+ "serve": "14.2.1"
26
+ },
27
+ "devDependencies": {
28
+ "@babel/eslint-parser": "7.22.15",
29
+ "@babel/plugin-syntax-import-attributes": "7.22.5",
30
+ "@babel/preset-env": "7.22.20",
31
+ "axe-playwright": "1.2.3",
32
+ "depcheck": "1.4.6",
33
+ "eslint": "8.50.0",
34
+ "eslint-plugin-no-loops": "0.3.0",
35
+ "knip": "2.27.1",
36
+ "prettier": "3.0.3"
37
+ },
38
+ "files": [
39
+ "playwright.config.js",
40
+ "src",
41
+ "tests"
42
+ ],
43
+ "scripts": {
44
+ "depcheck": "depcheck --ignores=@babel/plugin-syntax-import-attributes,@babel/preset-env,@public-ui/sample-react,portfinder,serve",
45
+ "format": "prettier --check src",
46
+ "lint": "eslint src",
47
+ "unused": "knip"
48
+ }
49
+ }
package/tests/axe-snapshots.spec.js ADDED
@@ -0,0 +1,82 @@
1
+ import { test } from '@playwright/test';
2
+ import { checkA11y, injectAxe } from 'axe-playwright';
3
+ import path from 'path';
4
+ import { ROUTES } from './sample-app.routes.js';
5
+
6
+ const rename = (snapshotName) => {
7
+ const result = snapshotName
8
+
9
+ // Remove browser name from snapshot name
10
+ // .replace('-chromium', '')
11
+ // .replace('-firefox', '')
12
+
13
+ // Remove os name from snapshot name
14
+ // .replace('-darwin', '')
15
+ // .replace('-linux', '')
16
+ // .replace('-windows', '')
17
+
18
+ // Remove test counter from snapshot name
19
+ .replace('-1-', '-')
20
+
21
+ // Make different snapshot folder for different themes
22
+ .replace('theme-snapshots.spec.js', `axe-${process.env.THEME_EXPORT.toLocaleLowerCase()}`)
23
+ .replace('-snapshots', '');
24
+ return result;
25
+ };
26
+
27
+ // https://playwright.dev/docs/emulation
28
+ test.use({
29
+ colorScheme: 'light',
30
+ locale: 'de-DE',
31
+ isMobile: false,
32
+ timezoneId: 'Europe/Berlin',
33
+ viewport: {
34
+ width: 800,
35
+ height: 0,
36
+ },
37
+ });
38
+
39
+ /**
40
+ * @todo stabilize and re-enable test
41
+ */
42
+ const blocklist = [];
43
+
44
+ ROUTES.forEach((options, route) => {
45
+ if (blocklist.includes(route)) {
46
+ return;
47
+ }
48
+ test(`snapshot for ${route}`, async ({ page }, testInfo) => {
49
+ const outputPath = rename(testInfo.outputDir);
50
+ await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
51
+ if (options?.viewportSize) {
52
+ await page.setViewportSize(options.viewportSize);
53
+ }
54
+ if (options?.waitForTimeout) {
55
+ await page.waitForTimeout(options.waitForTimeout);
56
+ }
57
+ await injectAxe(page);
58
+ await checkA11y(
59
+ page,
60
+ undefined,
61
+ {
62
+ axeOptions: {
63
+ runOnly: {
64
+ type: 'tag',
65
+ values: ['best-practices', 'wcag2a', 'wcag2aa', 'wcag21aa'],
66
+ },
67
+ },
68
+ detailedReport: true,
69
+ detailedReportOptions: {
70
+ html: true,
71
+ },
72
+ },
73
+ true,
74
+ 'html',
75
+ {
76
+ outputDirPath: outputPath.replace(/\/[^/]+$/, ''),
77
+ outputDir: `axe-${process.env.THEME_EXPORT.toLocaleLowerCase()}`,
78
+ reportFileName: `${route.replace('/', '-')}.html`,
79
+ },
80
+ );
81
+ });
82
+ });
package/tests/sample-app.routes.js CHANGED
@@ -38,7 +38,6 @@ ROUTES.set('button-group/basic', null);
38
38
  ROUTES.set('button-link/basic', null);
39
39
  ROUTES.set('button-link/icons', null);
40
40
  ROUTES.set('button-link/image', null);
41
- ROUTES.set('button-link/target', null);
42
41
  ROUTES.set('button/basic', null);
43
42
  ROUTES.set('button/hide-label', null);
44
43
  ROUTES.set('button/icons', null);
@@ -71,7 +70,6 @@ ROUTES.set('input-range/basic', null);
71
70
  ROUTES.set('input-text/basic', null);
72
71
  ROUTES.set('input-text/blur', null);
73
72
  ROUTES.set('input-text/focus', null);
74
- ROUTES.set('input-text/hidden-label', null);
75
73
  ROUTES.set('kolibri/animated', null);
76
74
  ROUTES.set('kolibri/basic', null);
77
75
  ROUTES.set('kolibri/no-label', null);
@@ -83,6 +81,7 @@ ROUTES.set('link/icons', null);
83
81
  ROUTES.set('link/image', null);
84
82
  ROUTES.set('link/target', null);
85
83
  ROUTES.set('logo/basic', null);
84
+ ROUTES.set('modal/basic', null);
86
85
  ROUTES.set('nav/active', null);
87
86
  ROUTES.set('nav/aria-current', null);
88
87
  ROUTES.set('nav/basic', null);
@@ -110,5 +109,7 @@ ROUTES.set('textarea/placeholder', null);
110
109
  ROUTES.set('textarea/readonly', null);
111
110
  ROUTES.set('textarea/resize', null);
112
111
  ROUTES.set('textarea/rows', null);
112
+ ROUTES.set('textarea/with-counter', null);
113
+ ROUTES.set('toast/basic', null);
113
114
  ROUTES.set('version/basic', null);
114
115
  ROUTES.set('version/context', null);
package/tests/theme-snapshots.spec.js CHANGED
@@ -4,6 +4,7 @@ import { ROUTES } from './sample-app.routes.js';
4
4
  // https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
5
5
  export const configureSnapshotPath =
6
6
  () =>
7
+ // eslint-disable-next-line no-empty-pattern
7
8
  ({}, testInfo) => {
8
9
  const originalSnapshotPath = testInfo.snapshotPath;
9
10
  testInfo.snapshotPath = (snapshotName) => {