@unimelb/pattern-lib-vue 15.2.0 → 15.2.1

package/README.md

@@ -218,6 +218,40 @@ You can run visual snapshot testing using `yarn test:snapshots`. This compares y
 
 If you wish to update the snapshots with your changes run `yarn test:e2e:updatesnapshots`.
 
+### Visual Regression Tests
+
+> [!IMPORTANT]
+> These tests should be run `exclusively` on your `local` machine to detect visual regressions before merging your `pull-request`.
+
+You can test your changes against live `production` sites to ensure nothing breaks.
+
+- uses `TEST_PREVIEW_ID` located in `.env` - refer to `env.example`
+- the list of production sites are located in `/e2e/tests/regression/pages.json`
+
+#### Running regression tests
+
+1. update your regression snapshots
+
+> [!TIP]
+> Make sure to comment out `TEST_PREVIEW_ID` to use the `dev` branch as the `base` snapshots. Alternatively, you can use any `pull-request` id.
+
+```
+yarn test:update:regression
+```
+
+2. set the `TEST_PREVIEW_ID` to your desired `pull-request` id
+3. run the regression tests to compare your `pull-request` againts the base snapshots
+
+```bash
+yarn test:regression
+```
+
+4. view the report
+
+```bash
+yarn test:report
+```
+
 ## Developer documentation
 
 - [Documenting stories](docs/docs.md) - how to customise the content of the README panel for each story

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unimelb/pattern-lib-vue",
   "description": "A complete design system for the University of Melbourne.",
-  "version": "15.2.0",
+  "version": "15.2.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/unimelb/pattern-lib.git"
@@ -28,16 +28,18 @@
     "dev": "start-storybook -p 7002 -c .storybook",
     "dev:public": "start-storybook -p 7002 -h 0.0.0.0 -c .storybook",
     "start:lib": "webpack-dev-server --port 7003 --config targets/lib/webpack.config.js",
-    "docker": "docker compose --profile dev up --abort-on-container-exit --remove-orphans",
-    "docker:build": "cross-env MODE=build docker compose run --rm storybook",
+    "docker": "docker compose run --rm e2e",
     "lint": "run-s lint:js lint:css",
     "lint:css": "stylelint **/*.{css,vue} --fix",
     "lint:js": "eslint . --ext .js,.vue --fix",
     "start:snapshots": "server-test serve:test :5000 'jest -w=4 -c snapshots/jest.config.js'",
     "start:updatesnapshots": "server-test serve:test :5000 'jest -w=4 -c snapshots/jest.config.js -u'",
     "test": "jest",
+    "test:regression": "cross-env TYPE=regression run-s docker",
     "test:snapshots": "run-s build clean:snapshots start:snapshots",
     "test:updatesnapshots": "run-s build start:updatesnapshots",
+    "test:update:regression": "cross-env TYPE=regression UPDATE_SNAPSHOTS=true run-s docker",
+    "test:report": "playwright show-report",
     "generate": "plop --plopfile generator/index.js",
     "prepublish": "cross-env LOAD_EXTERNAL_ASSETS=true npm run build:vue",
     "serve:test": "serve .out/docs"
@@ -69,6 +71,7 @@
     "@babel/core": "^7.24.7",
     "@babel/eslint-parser": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
+    "@playwright/test": "1.44.1",
     "@storybook/addon-notes": "^3.4.8",
     "@storybook/addon-options": "^3.4.8",
     "@storybook/addons": "^3.4.8",
@@ -184,7 +187,8 @@
     },
     "transformIgnorePatterns": [],
     "testPathIgnorePatterns": [
-      "<rootDir>/snapshots/"
+      "<rootDir>/snapshots/",
+      "<rootDir>/e2e/"
     ]
   },
   "husky": {