SUR-242, SUR-323 - Setup Tests for UI components

.github/workflows/storybook-tests.yml

@@ -0,0 +1,30 @@
+name: 'Storybook Tests'
+on: 
+    push:
+        branches:
+            - SUR-242
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+            fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+            node-version: 20
+      - name: Install dependencies
+        run: npm install
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build force-ui
+        run: npm run build --silent
+      - name: Build Storybook
+        run: npm run build-storybook --silent
+      - 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:127.0.0.1:6006 && yarn test-storybook"

.gitignore

@@ -3,4 +3,8 @@ dist/*
 .DS_Store
 *storybook.log
 storybook-static/*
-*.zip
+*.zip
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.storybook/main.js

@@ -10,6 +10,7 @@ const config = {
 		'@storybook/addon-essentials',
 		'@chromatic-com/storybook',
 		'@storybook/addon-interactions',
+		'@storybook/addon-a11y',
 	],
 	swc: () => ({
 		jsc: {

.storybook/test-runner.js

@@ -0,0 +1,15 @@
+const { injectAxe, checkA11y } = require('axe-playwright');
+
+module.exports = {
+	async preVisit(page) {
+		await injectAxe(page);
+	},
+	async postVisit(page) {
+		await checkA11y(page, '#storybook-root', {
+			detailedReport: true,
+			detailedReportOptions: {
+				html: true,
+			},
+		});
+	},
+};