@unimelb/pattern-lib-vue 16.0.0-alpha.24 → 16.0.0-alpha.26

package/README.md

@@ -182,6 +182,20 @@ Pre-release builds can be created like this (using the git pre-push hook behind
 
 ## Testing
 
+### Component unit testing
+To run the component units tests use `yarn test`. This runs the jest unit and accessibility tests.
+
+### Storybook end-to-end testing
+To run the Storybook stories visual snapshots and story tests use `yarn test:e2e`. 
+
+### Storybook visual snapshot testing
+
+You can run the Storybook stories visual snapshot tests using `yarn test:snapshots`. This compares your changes against the baseline visual snapshot. To see the failed snapshot tests run `yarn test:report`.
+
+If you wish to update the snapshots with your changes run `yarn test:update:snapshots`.
+
+**Note:** the visual snapshot testing runs on Playwright and requires Docker to be up and running.
+
 ### Testing Pull-requests
 
 You can test `pull-requests` on live sites by using `?preview=test-xxx` where `xxx` is the pull-request `number`.
@@ -212,12 +226,6 @@ Recommended mobile devices for testing:
 - iPad 2
 - Galaxy s5
 
-### Visual snapshot testing
-
-You can run visual snapshot testing using `yarn test:snapshots`. This compares your changes against the latest visual snapshot. Failed snapshot tests will show a visual diff comparison in `snapshots/__tests__/__image_snapshots__/__diff_output__`.
-
-If you wish to update the snapshots with your changes run `yarn test:e2e:updatesnapshots`.
-
 ### Visual Regression Tests
 
 > [!IMPORTANT]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unimelb/pattern-lib-vue",
   "description": "A complete design system for the University of Melbourne.",
-  "version": "16.0.0-alpha.24",
+  "version": "16.0.0-alpha.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/unimelb/pattern-lib.git"
@@ -24,26 +24,31 @@
     "build:lib:standard": "cross-env NODE_ENV=production webpack --config targets/lib/webpack.config.js",
     "build:lib:minify": "cross-env NODE_ENV=production MINIFY_CSS=true webpack --config targets/lib/webpack.minify.config.js",
     "build:vue": "cross-env NODE_ENV=production webpack --config targets/vue/webpack.config.js",
-    "clean:snapshots": "rimraf snapshots/__tests__/__image_snapshots__/__diff_output__",
+    "prebuild:test": "rimraf _site-docker",
+    "build:test": "cross-env MOCK=true npm-run-all \"build -o _site-docker\"",
     "dev": "storybook dev -p 7002",
     "dev:public": "storybook dev -p 7002 -h 0.0.0.0",
     "start:lib": "webpack-dev-server --port 7003 --config targets/lib/webpack.config.js",
-    "docker": "docker compose run --rm e2e",
     "docker:build": "cross-env MODE=build docker compose run --rm storybook",
     "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:e2e": "cross-env EXCLUDE=regression run-s docker",
     "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:snapshots": "cross-env TYPE=snapshot run-s docker",
+    "test:update:regression": "cross-env TYPE=regression UPDATE_SNAPSHOTS=all run-s docker",
+    "test:update:snapshots": "cross-env TYPE=snapshot UPDATE_SNAPSHOTS=all run-s docker",
+    "test:update:regression:changed": "cross-env TYPE=regression UPDATE_SNAPSHOTS=changed run-s docker",
+    "test:update:snapshots:changed": "cross-env TYPE=snapshot UPDATE_SNAPSHOTS=changed 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"
+    "preplaywright": "npm-run-all build:test",
+    "playwright": "npx playwright test --grep-invert \"@snapshot|@regression\" --project chromium",
+    "playwright:ui": "npx playwright test --grep-invert \"@snapshot|@regression\" --project chromium --ui",
+    "predocker": "npm-run-all build:test",
+    "docker": "docker compose run --rm e2e"
   },
   "dependencies": {
     "@fontsource-variable/fraunces": "^5.0.21",
@@ -61,22 +66,23 @@
     "modern-normalize": "^1.1.0",
     "prop-types": "^15.8.1",
     "semver": "^5.6.0",
+    "serve-handler": "^6.1.6",
     "smoothscroll-polyfill": "^0.4.4",
     "throttle-debounce": "^2.1.0",
     "uuid": "^3.4.0",
     "v-scroll-lock": "^1.3.1",
     "vue": "^3.5.4",
     "vue-focus-lock": "1.4.0",
-    "vue-progressive-image": "^4.0.0",
     "xss": "^1.0.15"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
     "@babel/core": "^7.24.8",
     "@babel/eslint-parser": "^7.24.7",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
-    "@playwright/test": "1.44.1",
+    "@playwright/test": "^1.53.0",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/addon-links": "^8.1.11",
@@ -94,7 +100,6 @@
     "@storybook/test": "^8.1.11",
     "@storybook/vue3": "^8.1.11",
     "@storybook/vue3-webpack5": "^8.1.11",
-    "@types/jest": "^25.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
     "@vue/compiler-sfc": "^3.4.31",
@@ -128,14 +133,12 @@
     "file-loader": "^6.2.0",
     "highlight.js": "^11.10.0",
     "html-webpack-plugin": "^5.6.0",
+    "http-server": "^14.1.1",
     "husky": "^4.2.3",
     "inquirer-directory": "^2.2.0",
     "jest": "29.x",
     "jest-axe": "^3.1.1",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-image-snapshot": "^2.12.0",
-    "jest-puppeteer": "^4.4.0",
-    "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^10.0.8",
     "marked": "^14.1.2",
@@ -156,7 +159,6 @@
     "postcss-reporter": "^7.1.0",
     "postcss-url": "^10.1.3",
     "prettier": "^3.3.2",
-    "puppeteer": "^2.1.1",
     "raw-loader": "^0.5.1",
     "react": "18",
     "react-dom": "18",
@@ -181,7 +183,6 @@
     "vue-axe": "^1.0.7",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^17.4.2",
-    "vue3-jest": "^27.0.0-alpha.1",
     "webpack": "^5.92.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
@@ -208,9 +209,6 @@
       "^utils/(.*)$": "<rootDir>/utils/$1",
       "^static/(.*)$": "<rootDir>/static/$1"
     },
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/jest-serializer-vue"
-    ],
     "transform": {
       ".*\\.(vue)$": "@vue/vue3-jest",
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
@@ -218,7 +216,6 @@
     },
     "transformIgnorePatterns": [],
     "testPathIgnorePatterns": [
-      "<rootDir>/snapshots/",
       "<rootDir>/e2e/"
     ],
     "testEnvironmentOptions": {