@public-ui/visual-tests 2.0.0-rc.7 → 2.0.0-rc.8
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.
- package/README.md +55 -50
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,53 +1,58 @@
|
|
|
1
|
-
# KoliBri - Visual Tests
|
|
2
|
-
|
|
3
|
-
## Motivation
|
|
4
|
-
|
|
5
|
-
The `KoliBri` Visual Tests provide a way to add visual regression testing to **theme** modules.
|
|
6
|
-
It takes screenshots of every component defined in the [React Sample App](https://github.com/public-ui/kolibri/tree/develop/packages/samples/react) with the theme applied and compares them to their references.
|
|
7
|
-
|
|
8
|
-
## Installation
|
|
9
|
-
|
|
10
|
-
You can install the `KoliBri` Visual Tests with `npm`, `pnpm` or `yarn`:
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm i -D @public-ui/visual-tests
|
|
14
|
-
pnpm i -D @public-ui/visual-tests
|
|
15
|
-
yarn add -D @public-ui/visual-tests
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Usage
|
|
19
|
-
|
|
20
|
-
Add the following npm scripts to the theme's `package.json`:
|
|
21
|
-
|
|
22
|
-
```json
|
|
23
1
|
{
|
|
2
|
+
"name": "{{kebab name}}",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"description": "{{description}}",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "{{author}}",
|
|
7
|
+
"email": "{{email}}"
|
|
8
|
+
},
|
|
9
|
+
"license": "EUPL-1.2",
|
|
10
|
+
"private": false,
|
|
24
11
|
"scripts": {
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
12
|
+
"build": "unbuild",
|
|
13
|
+
"depcheck": "depcheck",
|
|
14
|
+
"format": "prettier --check src",
|
|
15
|
+
"lint": "eslint src",
|
|
16
|
+
"prepack": "unbuild",
|
|
17
|
+
"test": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test",
|
|
18
|
+
"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
|
|
19
|
+
"unused": "knip"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@public-ui/components": "2.0.0-rc.7",
|
|
23
|
+
"@public-ui/schema": "2.0.0-rc.7",
|
|
24
|
+
"@public-ui/visual-tests": "2.0.0-rc.7",
|
|
25
|
+
"@typescript-eslint/eslint-plugin": "6.8.0",
|
|
26
|
+
"@typescript-eslint/parser": "6.8.0",
|
|
27
|
+
"depcheck": "1.4.7",
|
|
28
|
+
"eslint": "8.51.0",
|
|
29
|
+
"eslint-config-prettier": "9.0.0",
|
|
30
|
+
"eslint-plugin-html": "7.1.0",
|
|
31
|
+
"eslint-plugin-jsdoc": "46.8.2",
|
|
32
|
+
"eslint-plugin-json": "3.1.0",
|
|
33
|
+
"eslint-plugin-no-loops": "0.3.0",
|
|
34
|
+
"knip": "2.35.0",
|
|
35
|
+
"npm-check-updates": "16.14.6",
|
|
36
|
+
"prettier": "3.0.3",
|
|
37
|
+
"unbuild": "1.2.1"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"@public-ui/components": "2.0.0-rc.7"
|
|
41
|
+
},
|
|
42
|
+
"sideEffects": false,
|
|
43
|
+
"type": "module",
|
|
44
|
+
"exports": {
|
|
45
|
+
".": {
|
|
46
|
+
"types": "./dist/index.d.ts",
|
|
47
|
+
"import": "./dist/index.mjs",
|
|
48
|
+
"require": "./dist/index.cjs"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"main": "./dist/index.cjs",
|
|
52
|
+
"module": "./dist/index.mjs",
|
|
53
|
+
"types": "./dist/index.d.ts",
|
|
54
|
+
"files": [
|
|
55
|
+
"assets",
|
|
56
|
+
"dist"
|
|
57
|
+
]
|
|
28
58
|
}
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
- `THEME_MODULE` defines the relative path to the TypeScript module containing the the theme definitions. Without file extension.
|
|
32
|
-
- `THEME_EXPERT` defines the name of the export within the the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
|
|
33
|
-
|
|
34
|
-
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.
|
|
35
|
-
In the following runs, new screenshots will be compared to this reference.
|
|
36
|
-
|
|
37
|
-
To update the reference screenshots call `npm run test-update`.
|
|
38
|
-
|
|
39
|
-
It's recommended to add the `test-results` folder to the `.gitignore` file:
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
/test-results/
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
It's also recommended to automatically run the tests before packing/publishing the module:
|
|
46
|
-
|
|
47
|
-
```json
|
|
48
|
-
{
|
|
49
|
-
"scripts": {
|
|
50
|
-
"prepack": "npm test"
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/visual-tests",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.8",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": "https://github.com/public-ui/kolibri",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@playwright/test": "1.39.0",
|
|
23
|
-
"@public-ui/sample-react": "2.0.0-rc.
|
|
23
|
+
"@public-ui/sample-react": "2.0.0-rc.8",
|
|
24
24
|
"axe-playwright": "1.2.3",
|
|
25
25
|
"portfinder": "1.0.32",
|
|
26
26
|
"serve": "14.2.1"
|