@unimelb/pattern-lib-vue 16.0.0-alpha.3 → 16.0.0-alpha.30

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,11 +226,39 @@ Recommended mobile devices for testing:
 - iPad 2
 - Galaxy s5
 
-### Visual snapshot testing
+### 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
 
-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__`.
+> [!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
 
-If you wish to update the snapshots with your changes run `yarn test:e2e:updatesnapshots`.
+```bash
+yarn test:regression
+```
+
+4. view the report
+
+```bash
+yarn test:report
+```
 
 ## Developer documentation
 

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.3",
+  "version": "16.0.0-alpha.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/unimelb/pattern-lib.git"
@@ -9,9 +9,10 @@
   "author": "The University of Melbourne",
   "license": "UNLICENSED",
   "engines": {
-    "node": "^20.16.0",
+    "node": ">=22.3.0",
     "yarn": "*"
   },
+  "type": "module",
   "main": ".out/vue.js",
   "files": [
     ".out/vue.js"
@@ -21,36 +22,40 @@
     "prebuild:lib": "rimraf .out/lib",
     "build": "storybook build -o .out/docs",
     "build:lib": "run-p build:lib:standard build:lib:minify",
-    "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__",
+    "build:lib:standard": "cross-env NODE_ENV=production webpack --config targets/lib/webpack.config.cjs",
+    "build:lib:minify": "cross-env NODE_ENV=production MINIFY_CSS=true webpack --config targets/lib/webpack.minify.config.cjs",
+    "build:vue": "cross-env NODE_ENV=production webpack --config targets/vue/webpack.config.cjs",
+    "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": "start-storybook -p 7002 -h 0.0.0.0",
-    "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",
+    "dev:public": "storybook dev -p 7002 -h 0.0.0.0",
+    "start:lib": "webpack-dev-server --port 7003 --config targets/lib/webpack.config.cjs",
     "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:snapshots": "run-s build clean:snapshots start:snapshots",
-    "test:updatesnapshots": "run-s build start:updatesnapshots",
+    "test:e2e": "cross-env EXCLUDE=regression run-s docker",
+    "test:regression": "cross-env TYPE=regression 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",
     "@fontsource/source-sans-pro": "^5.0.8",
-    "@storybook/channels": "^8.1.11",
-    "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@vue/compat": "^3.4.35",
-    "@vue/vue3-jest": "^29.2.6",
+    "@splidejs/vue-splide": "^0.6.12",
+    "@vue/compat": "^3.5.4",
     "babel-polyfill": "^6.26.0",
     "change-case": "^3.1.0",
     "core-js": "3",
@@ -62,22 +67,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.4.35",
-    "vue-concise-slider": "^3.4.2",
+    "vue": "^3.5.4",
     "vue-focus-lock": "1.4.0",
-    "vue-progressive-image": "3.2.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.53.0",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/addon-links": "^8.1.11",
@@ -86,14 +92,20 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
     "@storybook/addons": "^3.4.8",
+    "@storybook/api": "^7.6.17",
     "@storybook/blocks": "^8.1.11",
+    "@storybook/channels": "^8.1.11",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "^8.3.1",
+    "@storybook/preview-api": "^8.1.11",
+    "@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",
     "@vue/test-utils": "^2.4.0-alpha.2",
+    "@vue/vue3-jest": "^29.2.6",
     "babel-core": "^6.26.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "29.x",
@@ -109,6 +121,7 @@
     "css-loader": "^7.1.2",
     "css-mqpacker": "^7.0.0",
     "cssnano": "^4.1.10",
+    "cssnano-preset-lite": "^1.0.1",
     "dotenv": "^6.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -119,17 +132,17 @@
     "eslint-plugin-vue": "^9.20.1",
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.14.0",
     "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",
     "mini-css-extract-plugin": "^2.9.0",
     "npm-run-all": "^4.1.5",
     "plop": "^2.4.0",
@@ -147,8 +160,6 @@
     "postcss-reporter": "^7.1.0",
     "postcss-url": "^10.1.3",
     "prettier": "^3.3.2",
-    "pretty": "^2.0.0",
-    "puppeteer": "^2.1.1",
     "raw-loader": "^0.5.1",
     "react": "18",
     "react-dom": "18",
@@ -165,7 +176,6 @@
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-order": "^5.0.0",
-    "svg-fill-loader": "^0.0.8",
     "svg-sprite-loader": "^6.0.11",
     "svg-url-loader": "^7.1.1",
     "svgo": "^3.3.2",
@@ -174,7 +184,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",
@@ -201,9 +210,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",
@@ -211,7 +217,7 @@
     },
     "transformIgnorePatterns": [],
     "testPathIgnorePatterns": [
-      "<rootDir>/snapshots/"
+      "<rootDir>/e2e/"
     ],
     "testEnvironmentOptions": {
       "customExportConditions": [
@@ -228,10 +234,5 @@
     "hooks": {
       "pre-commit": "cross-env lint-staged"
     }
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
   }
 }