@public-ui/visual-tests 2.0.0-rc.0 → 2.0.0-rc.10

package/README.md

@@ -1,53 +1,58 @@
-# KoliBri - Visual Tests
-
-## Motivation
-
-The `KoliBri` Visual Tests provide a way to add visual regression testing to **theme** modules.  
-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.
-
-## Installation
-
-You can install the `KoliBri` Visual Tests with `npm`, `pnpm` or `yarn`:
-
-```bash
-npm i -D @public-ui/visual-tests
-pnpm i -D @public-ui/visual-tests
-yarn add -D @public-ui/visual-tests
-```
-
-## Usage
-
-Add the following npm scripts to the theme's `package.json`:
-
-```json
 {
+	"name": "{{kebab name}}",
+	"version": "0.0.0",
+	"description": "{{description}}",
+	"author": {
+		"name": "{{author}}",
+		"email": "{{email}}"
+	},
+	"license": "EUPL-1.2",
+	"private": false,
 	"scripts": {
-		"test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots"
-	}
+		"build": "unbuild",
+		"depcheck": "depcheck",
+		"format": "prettier --check src",
+		"lint": "eslint src",
+		"prepack": "unbuild",
+		"test": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"unused": "knip"
+	},
+	"devDependencies": {
+		"@public-ui/components": "2.0.0-rc.7",
+		"@public-ui/schema": "2.0.0-rc.7",
+		"@public-ui/visual-tests": "2.0.0-rc.7",
+		"@typescript-eslint/eslint-plugin": "6.8.0",
+		"@typescript-eslint/parser": "6.8.0",
+		"depcheck": "1.4.7",
+		"eslint": "8.51.0",
+		"eslint-config-prettier": "9.0.0",
+		"eslint-plugin-html": "7.1.0",
+		"eslint-plugin-jsdoc": "46.8.2",
+		"eslint-plugin-json": "3.1.0",
+		"eslint-plugin-no-loops": "0.3.0",
+		"knip": "2.35.0",
+		"npm-check-updates": "16.14.6",
+		"prettier": "3.0.3",
+		"unbuild": "1.2.1"
+	},
+	"peerDependencies": {
+		"@public-ui/components": "2.0.0-rc.7"
+	},
+	"sideEffects": false,
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"assets",
+		"dist"
+	]
 }
-```
-
-- `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`.
-
-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.
-
-To update the reference screenshots call `npm run test-update`.
-
-It's recommended to add the `test-results` folder to the `.gitignore` file:
-
-```bash
-/test-results/
-```
-
-It's also recommended to automatically run the tests before packing/publishing the module:
-
-```json
-{
-	"scripts": {
-		"prepack": "npm test"
-	}
-}
-```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.10",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -19,20 +19,20 @@
     "kolibri-visual-test": "src/index.js"
   },
   "dependencies": {
-    "@playwright/test": "1.38.1",
-    "@public-ui/sample-react": "2.0.0-rc.0",
+    "@playwright/test": "1.39.0",
+    "@public-ui/sample-react": "2.0.0-rc.10",
+    "axe-playwright": "1.2.3",
     "portfinder": "1.0.32",
     "serve": "14.2.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.22.15",
     "@babel/plugin-syntax-import-attributes": "7.22.5",
-    "@babel/preset-env": "7.22.20",
-    "axe-playwright": "1.2.3",
-    "depcheck": "1.4.6",
-    "eslint": "8.50.0",
+    "@babel/preset-env": "7.23.2",
+    "depcheck": "1.4.7",
+    "eslint": "8.53.0",
     "eslint-plugin-no-loops": "0.3.0",
-    "knip": "2.30.0",
+    "knip": "2.40.0",
     "prettier": "3.0.3"
   },
   "files": [

package/tests/sample-app.routes.js

@@ -105,6 +105,16 @@ ROUTES.set('button/width', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('button/access-key', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/baselined', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('card/basic', {
 	axe: {
 		skipFailures: false,
@@ -258,11 +268,6 @@ ROUTES.set('pagination/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('popover/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('progress/basic', {
 	axe: {
 		skipFailures: false,
@@ -319,6 +324,11 @@ ROUTES.set('table/sort-data', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('table/with-pagination', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('tabs/basic', {
 	axe: {
 		skipFailures: false,
@@ -380,3 +390,13 @@ ROUTES.set('version/context', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('scenarios/complex-form', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('scenarios/appointment-form', {
+	axe: {
+		skipFailures: false,
+	},
+});