Merge pull request #29 from rickbairstow/setup-library-build-process

Setup Storybook testing and automations

.github/workflows/eslint.yml

@@ -0,0 +1,39 @@
+# .github/workflows/eslint.yml
+
+name: 'ESLint Check'
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache Node Modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.npm
+            node_modules
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint

.github/workflows/storybook-tests.yml

@@ -0,0 +1,57 @@
+# .github/workflows/storybook-tests.yml
+# Intentionally uses Yarn as there's a bug with npm that causes caching issues for this workflow.
+
+name: 'Storybook Tests'
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test-storybook:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Cache Node Modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cache/yarn
+            node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Cache Playwright Dependencies
+        id: cache-playwright
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn test-storybook"

.gitignore

@@ -29,4 +29,7 @@ coverage
 
 *.tsbuildinfo
 
-*storybook.log
+# Storybook
+storybook-static/
+*storybook.log
+.nyc_output/

.nvmrc

@@ -0,0 +1 @@
+20.15.0

.storybook/test-runner.js

@@ -0,0 +1,27 @@
+const { injectAxe, checkA11y } = require('axe-playwright')
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+module.exports = {
+    async preVisit(page) {
+        await injectAxe(page);
+    },
+    async postVisit(page) {
+        await checkA11y(
+            page,
+            '#storybook-root',
+            {
+                detailedReport: true,
+                detailedReportOptions: {
+                    html: true
+                },
+                includedImpacts: ['minor', 'moderate', 'serious', 'critical'],
+                verbose: false
+            },
+            false,
+            'v2'
+        )
+    }
+}