@public-ui/visual-tests 1.7.0-rc.7 → 1.7.0-rc.9

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 (8) hide show
  1. package/package.json +12 -17
  2. package/src/index.js +53 -0
  3. package/tests/sample-app.routes.js +80 -0
  4. package/tests/{theme-snapshots.spec.ts → theme-snapshots.spec.js} +16 -15
  5. package/dist/index.js +0 -43
  6. package/kolibri-visual-test.sh +0 -3
  7. package/tsconfig.json +0 -22
  8. /package/{playwright.config.ts → playwright.config.js} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/visual-tests",
3
- "version": "1.7.0-rc.7",
3
+ "version": "1.7.0-rc.9",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -16,36 +16,31 @@
16
16
  "sideEffects": false,
17
17
  "description": "Provides utility to run visual regression tests for themes.",
18
18
  "scripts": {
19
- "build": "tsc --outDir dist",
19
+ "depcheck": "depcheck --ignores=@public-ui/sample-react,http-server,tslib",
20
20
  "format": "prettier --check src",
21
- "lint": "eslint src && tsc --noemit",
22
- "unused": "knip",
23
- "prepare": "npm run build"
21
+ "lint": "eslint src",
22
+ "unused": "knip"
24
23
  },
25
24
  "bin": {
26
- "kolibri-visual-test": "kolibri-visual-test.sh"
25
+ "kolibri-visual-test": "src/index.js"
27
26
  },
28
27
  "dependencies": {
29
28
  "@playwright/test": "1.37.1",
30
- "@public-ui/sample-react": "1.7.0-rc.7",
29
+ "@public-ui/sample-react": "1.7.0-rc.9",
31
30
  "http-server": "14.1.1",
32
- "portfinder": "1.0.32",
33
- "tslib": "2.6.2",
34
- "typescript": "5.2.2"
31
+ "portfinder": "1.0.32"
35
32
  },
36
33
  "devDependencies": {
37
- "@types/node": "20.6.0",
38
- "@typescript-eslint/eslint-plugin": "6.7.0",
34
+ "@babel/eslint-parser": "7.22.15",
35
+ "depcheck": "1.4.6",
39
36
  "eslint": "8.49.0",
40
37
  "eslint-plugin-no-loops": "0.3.0",
41
38
  "knip": "2.24.0",
42
- "npm-check-updates": "16.14.0",
43
39
  "prettier": "3.0.3"
44
40
  },
45
41
  "files": [
46
- "dist",
47
- "playwright.config.ts",
48
- "tests",
49
- "tsconfig.json"
42
+ "playwright.config.js",
43
+ "src",
44
+ "tests"
50
45
  ]
51
46
  }
package/src/index.js ADDED
@@ -0,0 +1,53 @@
1
+ import child_process from 'node:child_process';
2
+ import path from 'node:path';
3
+ import { fileURLToPath } from 'url';
4
+ import * as crypto from 'crypto';
5
+ import * as fs from 'fs';
6
+ import portfinder from 'portfinder';
7
+ import * as process from 'process';
8
+
9
+ process.env.KOLIBRI_CWD = process.cwd();
10
+ const tempDir = process.env.RUNNER_TEMP || process.env.TMPDIR; // TODO: Check on Windows
11
+
12
+ if (!process.env.THEME_MODULE) {
13
+ throw new Error('Environment variable THEME_MODULE not specified.');
14
+ }
15
+ if (!tempDir) {
16
+ throw new Error('Neither environment variable RUNNER_TEMP or TMPDIR specified.');
17
+ }
18
+
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
+ const visualsTestModulePath = fileURLToPath(new URL('..', import.meta.url));
21
+ const binaryPath = fileURLToPath(new URL('../node_modules/.bin', import.meta.url));
22
+ const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
23
+ process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH = buildPath;
24
+
25
+ console.log('Building React Sample App …');
26
+ child_process.execFileSync(path.join(binaryPath, 'kolibri-sample-react-test-build'), [buildPath], {
27
+ encoding: 'utf-8',
28
+ });
29
+
30
+ console.log(`React Sample App build finished. Directory:`, buildPath);
31
+
32
+ void (async () => {
33
+ process.env.KOLIBRI_VISUAL_TEST_PORT = String(await portfinder.getPortPromise());
34
+
35
+ const playwright = child_process.spawn(path.join(binaryPath, 'playwright'), ['test', ...process.argv.slice(2)], {
36
+ cwd: visualsTestModulePath,
37
+ });
38
+
39
+ playwright.stdout.on('data', (data) => {
40
+ console.log('Playwright: ' + data.toString());
41
+ });
42
+
43
+ playwright.stderr.on('data', (data) => {
44
+ console.log('Playwright stderr: ' + data.toString());
45
+ });
46
+
47
+ playwright.on('exit', (code) => {
48
+ console.log(`Playwright test finished with exit code ${code}.`);
49
+ console.log('Cleaning up build folder …');
50
+ fs.rmSync(buildPath, { recursive: true, force: true });
51
+ process.exit(code ?? 1);
52
+ });
53
+ })();
package/tests/sample-app.routes.js ADDED
@@ -0,0 +1,80 @@
1
+ export const ROUTES = [
2
+ '/handout/basic',
3
+ '/abbr/basic',
4
+ '/accordion/basic',
5
+ '/accordion/header',
6
+ '/accordion/headlines',
7
+ '/accordion/list',
8
+ '/alert/basic',
9
+ '/alert/card-msg',
10
+ '/alert/html',
11
+ '/avatar/basic',
12
+ '/badge/basic',
13
+ '/badge/button',
14
+ '/breadcrumb/basic',
15
+ '/button/basic',
16
+ '/button/hide-label',
17
+ '/button/icons',
18
+ '/button/width',
19
+ '/button-link/basic',
20
+ '/button-link/icons',
21
+ '/button-link/image',
22
+ '/button-link/target',
23
+ '/button-group/basic',
24
+ '/card/basic',
25
+ '/card/confirm',
26
+ '/card/flex',
27
+ '/card/selection',
28
+ '/details/basic',
29
+ '/heading/badge',
30
+ '/heading/basic',
31
+ '/heading/paragraph',
32
+ '/icon/basic',
33
+ '/indented-text/basic',
34
+ '/input-checkbox/basic',
35
+ '/input-color/basic',
36
+ '/input-date/basic',
37
+ '/input-email/basic',
38
+ '/input-file/basic',
39
+ '/input-number/basic',
40
+ '/input-password/basic',
41
+ '/input-password/show-password',
42
+ '/input-radio/basic',
43
+ '/input-radio/horizontal',
44
+ '/input-radio/select',
45
+ '/input-range/basic',
46
+ '/input-text/basic',
47
+ '/input-text/hidden-label',
48
+ '/input-text/blur',
49
+ '/input-text/focus',
50
+ '/link/basic',
51
+ '/link/icons',
52
+ '/link/image',
53
+ '/link/target',
54
+ '/link-button/basic',
55
+ '/nav/basic',
56
+ '/nav/active',
57
+ '/nav/aria-current',
58
+ '/nav/horizontal',
59
+ '/pagination/basic',
60
+ '/popover/basic',
61
+ '/progress/basic',
62
+ '/select/basic',
63
+ '/skip-nav/basic',
64
+ '/spin/basic',
65
+ '/spin/cycle',
66
+ '/spin/custom',
67
+ '/split-button/basic',
68
+ '/table/badge-size',
69
+ '/table/render-cell',
70
+ '/table/sort-data',
71
+ '/textarea/basic',
72
+ '/textarea/adjust-height',
73
+ '/textarea/disabled',
74
+ '/textarea/placeholder',
75
+ '/textarea/readonly',
76
+ '/textarea/resize',
77
+ '/textarea/rows',
78
+ '/version/basic',
79
+ '/version/context',
80
+ ];
package/tests/{theme-snapshots.spec.ts → theme-snapshots.spec.js} RENAMED
@@ -1,11 +1,10 @@
1
- import { test, expect, TestInfo } from '@playwright/test';
2
- // @ts-ignore
3
- import { routes } from '@public-ui/sample-react/src/routes-test.ts';
1
+ import { test, expect } from '@playwright/test';
2
+ import { ROUTES } from './sample-app.routes.js';
4
3
 
5
4
  // https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
6
5
  export const configureSnapshotPath =
7
- (options?: {}) =>
8
- ({}: any, testInfo: TestInfo): any => {
6
+ () =>
7
+ ({}, testInfo) => {
9
8
  const originalSnapshotPath = testInfo.snapshotPath;
10
9
  testInfo.snapshotPath = (snapshotName) => {
11
10
  const result = originalSnapshotPath
@@ -31,16 +30,18 @@ test.beforeEach(configureSnapshotPath());
31
30
  /**
32
31
  * @todo stabilize and re-enable test
33
32
  */
34
- const blocklist = ['/heading/paragraph'];
33
+ const blocklist = [];
35
34
 
36
- routes
37
- .filter((route) => !blocklist.includes(route))
38
- .forEach((route) => {
39
- test(`snapshot for ${route}`, async ({ page }) => {
40
- await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
41
- await expect(page).toHaveScreenshot({
42
- fullPage: true,
43
- maxDiffPixelRatio: 0.03,
44
- });
35
+ ROUTES.filter((route) => !blocklist.includes(route)).forEach((route) => {
36
+ test(`snapshot for ${route}`, async ({ page }) => {
37
+ await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
38
+ await page.setViewportSize({
39
+ width: 1920,
40
+ height: 1280,
41
+ });
42
+ await expect(page).toHaveScreenshot({
43
+ // fullPage: true,
44
+ maxDiffPixelRatio: 0.03,
45
45
  });
46
46
  });
47
+ });
package/dist/index.js DELETED
@@ -1,43 +0,0 @@
1
- import child_process from 'node:child_process';
2
- import path from 'node:path';
3
- import { fileURLToPath } from 'url';
4
- import * as crypto from 'crypto';
5
- import * as fs from 'fs';
6
- import portfinder from 'portfinder';
7
- import * as process from 'process';
8
- process.env.KOLIBRI_CWD = process.cwd();
9
- const tempDir = process.env.RUNNER_TEMP || process.env.TMPDIR;
10
- if (!process.env.THEME_MODULE) {
11
- throw new Error('Environment variable THEME_MODULE not specified.');
12
- }
13
- if (!tempDir) {
14
- throw new Error('Neither environment variable RUNNER_TEMP or TMPDIR specified.');
15
- }
16
- process.env.THEME_MODULE = path.join(process.cwd(), process.env.THEME_MODULE);
17
- const visualsTestModulePath = fileURLToPath(new URL('..', import.meta.url));
18
- const binaryPath = fileURLToPath(new URL('../node_modules/.bin', import.meta.url));
19
- const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
20
- process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH = buildPath;
21
- console.log('Building React Sample App...');
22
- child_process.execFileSync(path.join(binaryPath, 'kolibri-sample-react-test-build'), [buildPath], {
23
- encoding: 'utf-8',
24
- });
25
- console.log(`React Sample App build finished. Directory:`, buildPath);
26
- void (async () => {
27
- process.env.KOLIBRI_VISUAL_TEST_PORT = String(await portfinder.getPortPromise());
28
- const playwright = child_process.spawn(path.join(binaryPath, 'playwright'), ['test', ...process.argv.slice(2)], {
29
- cwd: visualsTestModulePath,
30
- });
31
- playwright.stdout.on('data', (data) => {
32
- console.log('Playwright: ' + data.toString());
33
- });
34
- playwright.stderr.on('data', (data) => {
35
- console.log('Playwright stderr: ' + data.toString());
36
- });
37
- playwright.on('exit', (code) => {
38
- console.log(`Playwright test finished with exit code ${code}.`);
39
- console.log('Cleaning up build folder...');
40
- fs.rmSync(buildPath, { recursive: true, force: true });
41
- process.exit(code !== null && code !== void 0 ? code : 1);
42
- });
43
- })();
package/kolibri-visual-test.sh DELETED
@@ -1,3 +0,0 @@
1
- # Wrapper script necessary to avoid issues in the monorepos' initial `pnpm i`, when the binary already needs to exist.
2
- # The actual script is built in the `prepare` hook and available after the `pnpm i` finished.
3
- node "$(dirname "$0")/dist/index.js" $1
package/tsconfig.json DELETED
@@ -1,22 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "allowSyntheticDefaultImports": true,
4
- "allowUnreachableCode": false,
5
- "declaration": false,
6
- "experimentalDecorators": true,
7
- "lib": ["ES2017"],
8
- "moduleResolution": "nodenext",
9
- "module": "nodenext",
10
- "target": "ES2017",
11
- "noUnusedLocals": true,
12
- "noUnusedParameters": true,
13
- "forceConsistentCasingInFileNames": true,
14
- "importHelpers": true,
15
- "removeComments": true,
16
- "types": ["node"],
17
- "typeRoots": ["node_modules/@types"],
18
- "strict": true,
19
- "skipLibCheck": true
20
- },
21
- "include": ["src"]
22
- }
/package/{playwright.config.ts → playwright.config.js} RENAMED
File without changes