@public-ui/visual-tests 1.7.0-rc.12 → 1.7.0-rc.15

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 (5) hide show
  1. package/package.json +48 -47
  2. package/src/index.js +15 -2
  3. package/tests/axe-snapshots.spec.js +82 -0
  4. package/tests/sample-app.routes.js +3 -2
  5. 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.12",
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.12",
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.15",
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.15",
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/src/index.js CHANGED
@@ -19,9 +19,22 @@ if (!tempDir) {
19
19
  process.env.THEME_MODULE = path.join(process.cwd(), process.env.THEME_MODULE); // Use current working directory (i.e. the theme folder) to complete module path
20
20
  const visualsTestModulePath = fileURLToPath(new URL('..', import.meta.url));
21
21
  const binaryPath = fileURLToPath(new URL('../node_modules/.bin', import.meta.url));
22
- const workingDir = fileURLToPath(new URL('../node_modules/@public-ui/sample-react', import.meta.url));
22
+
23
+ let sampleReactPath = '../node_modules/@public-ui/sample-react';
24
+ let backSteps = ``;
25
+ let workingDir = null;
26
+ do {
27
+ const url = new URL(backSteps + sampleReactPath, import.meta.url);
28
+ workingDir = fileURLToPath(url);
29
+ backSteps += `../`;
30
+ } while (!fs.existsSync(workingDir) && path.resolve(process.cwd(), backSteps) !== '/');
31
+
32
+ if (!fs.existsSync(workingDir)) {
33
+ throw new Error('Could not find React Sample App package. Please install it with "npm install @public-ui/sample-react".');
34
+ }
35
+
23
36
  const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
24
- const packageJsonPath = await import(new URL('../node_modules/@public-ui/sample-react/package.json', import.meta.url), {
37
+ const packageJsonPath = await import(new URL(`${workingDir}/package.json`, import.meta.url), {
25
38
  assert: { type: 'json' },
26
39
  });
27
40
 
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) => {