Feat/acc tests (#1042)

#924
nl-design-system · Jan 2, 2025 · c3cf271 · c3cf271
1 parent fb29e5b
commit c3cf271
Show file tree

Hide file tree

Showing 6 changed files with 1,185 additions and 29 deletions.
diff --git a/.github/workflows/continuous-deployment.yml b/.github/workflows/continuous-deployment.yml
@@ -146,6 +146,38 @@ jobs:
           folder: packages/storybook/dist/
           token: ${{ secrets.GH_TOKEN }}
 
+  test-a11y:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm package manager
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: "Restore build artifact: Storybook"
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
+        with:
+          name: storybook
+          path: packages/storybook/dist/
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: "Accessibility tests Storybook"
+        run: pnpm test-storybook:ci
+
   publish-npm:
     runs-on: ubuntu-latest
     needs: [lint, test]

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@types/node": "20.17.6",
     "@typescript-eslint/eslint-plugin": "8.18.0",
     "@typescript-eslint/parser": "8.18.0",
+    "concurrently": "9.1.2",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
@@ -47,7 +48,8 @@
     "stylelint": "16.11.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "wait-on": "8.0.1"
   },
   "scripts": {
     "prebuild": "pnpm run clean",
@@ -79,9 +81,11 @@
     "update-minor": "npm-check-updates --configFileName .ncurc.minor.cjs",
     "update-major": "npm-check-updates --configFileName .ncurc.major.cjs",
     "watch:storybook": "npm run --workspace packages/storybook storybook",
-    "watch:style-dictionary": "lerna run watch:style-dictionary"
+    "watch:style-dictionary": "lerna run watch:style-dictionary",
+    "test-storybook:ci": "npm run --workspace packages/storybook playwright:install && concurrently -k -s first -n \"STORYBOOK,A11Y-TEST\" -c \"magenta,green\" \"npm run --workspace packages/storybook prod-static -- --silent\" \"wait-on tcp:6006 && npm run --workspace packages/storybook test-storybook\""
   },
   "dependencies": {
+    "@storybook/test-runner": "0.21.0",
     "http-server": "14.1.1",
     "rimraf": "6.0.1"
   },

diff --git a/packages/storybook/config/test-runner-jest.config.mjs b/packages/storybook/config/test-runner-jest.config.mjs
@@ -0,0 +1,7 @@
+const { getJestConfig } = require('@storybook/test-runner');
+
+const testRunnerConfig = getJestConfig();
+
+export default {
+  ...testRunnerConfig,
+};
diff --git a/packages/storybook/config/test-runner.js b/packages/storybook/config/test-runner.js
@@ -0,0 +1,10 @@
+import { checkA11y, injectAxe } from 'axe-playwright';
+
+export async function preVisit(page) {
+  await injectAxe(page);
+}
+export async function postVisit(page) {
+  await checkA11y(page, '#storybook-root', {
+    verbose: false,
+  });
+}
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -24,12 +24,15 @@
     "chromatic": "chromatic",
     "clean": "rimraf dist/",
     "storybook": "storybook dev --config-dir config/ --port 6006",
-    "prod-static": "http-server dist/"
+    "prod-static": "http-server --port 6006 dist/",
+    "test-storybook": "test-storybook --maxWorkers=2 --config-dir config/",
+    "playwright:install": "playwright install --with-deps chromium --only-shell"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.2",
     "@etchteam/storybook-addon-status": "5.0.0",
     "@nl-rvo/assets": "1.0.0-alpha.360",
+    "@playwright/test": "1.49.1",
     "@rijkshuisstijl-community/assets": "workspace:*",
     "@rijkshuisstijl-community/components-css": "workspace:*",
     "@rijkshuisstijl-community/components-react": "workspace:*",
@@ -53,6 +56,7 @@
     "@storybook/cli": "8.4.7",
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
+    "@storybook/test-runner": "0.21.0",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "8.4.7",
     "@tabler/icons-react": "3.23.0",
@@ -63,8 +67,10 @@
     "@utrecht/web-component-library-react": "3.0.0",
     "@utrecht/web-component-library-stencil": "2.2.0",
     "@whitespace/storybook-addon-html": "6.1.1",
+    "axe-playwright": "2.0.3",
     "chromatic": "11.19.0",
     "clsx": "2.1.1",
+    "jest": "29.7.0",
     "prettier": "3.4.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",