Add storybook tests

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
   pipeline:
     runs-on: ubuntu-latest
     steps:
-      - uses: Taucher2003/GitLab-Pipeline-Action@1.2.0
+      - uses: Taucher2003/GitLab-Pipeline-Action@1.4.1
         name: Run pipeline
         id: pipeline
         with:

.gitlab-ci.yml

@@ -16,3 +16,13 @@ storybook:build:
     paths:
       - storybook-static
     expire_in: 7 days
+
+storybook:test:
+  image: ghcr.io/code0-tech/build-images/node-20.9-playwright:6.1
+  stage: test
+  script:
+    - source ~/.asdf/asdf.sh
+    - npm ci
+    - npm run storybook:dev &
+    - curl --fail -sv --retry 30 --retry-delay 3 --head --retry-all-errors http://127.0.0.1:6006
+    - npm run storybook:test -- --ci --browsers chromium firefox webkit

.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -16,6 +16,18 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          { id: 'landmark-one-main', enabled: false }, // not relevant to single components
+          { id: 'page-has-heading-one', enabled: false }, // not relevant to single components
+          { id: 'region', enabled: false }, // not relevant to single components
+          { id: 'color-contrast', enabled: false }, // doesn't work with gradients
+        ],
+      },
+    },
   },
 };
 

.storybook/test-runner.ts

@@ -0,0 +1,39 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner'
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+
+const prepareA11y = async (page) => await injectAxe(page);
+
+const executeA11y = async (page, context) => {
+  // Get the entire context of a story, including parameters, args, argTypes, etc.
+  const storyContext = await getStoryContext(page, context);
+
+  // Do not run a11y tests on disabled stories.
+  if (storyContext.parameters?.a11y?.disable) {
+    return;
+  }
+
+  // Apply story-level a11y rules
+  await configureAxe(page, {
+    rules: storyContext.parameters?.a11y?.config?.rules,
+  });
+
+  await checkA11y(page, '#storybook-root', {
+    detailedReport: true,
+    detailedReportOptions: {
+      html: true,
+    },
+    verbose: false,
+  });
+}
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await prepareA11y(page);
+  },
+  async postVisit(page, context) {
+    await executeA11y(page, context);
+  },
+};
+
+export default config;

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.9.0