Merge pull request #159 from brainstormforce/SUR-242

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

.github/workflows/storybook-tests.yml

@@ -0,0 +1,27 @@
+name: 'Storybook Tests'
+on: push
+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

@@ -4,6 +4,12 @@ dist/*
 *storybook.log
 storybook-static/*
 *.zip
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+tsconfig.app.tsbuildinfo
+tsconfig.node.tsbuildinfo
 *.app.tsbuildinfo
 *.node.tsbuildinfo
-tsconfig.app.tsbuildinfo
+tsconfig.app.tsbuildinfo

.storybook/main.ts

@@ -10,6 +10,7 @@ const config: StorybookConfig = {
 		'@storybook/addon-essentials',
 		'@chromatic-com/storybook',
 		'@storybook/addon-interactions',
+		'@storybook/addon-a11y',
 	],
 	framework: {
 		name: '@storybook/react-vite',
@@ -26,12 +27,19 @@ const config: StorybookConfig = {
 		// Merge custom configuration into the default config
 		const { mergeConfig } = await import('vite');
 
+		// Remove the dts plugin from the default config.
+		config.plugins = [
+			...(config.plugins ?? []).filter((plugin) => {
+				return (
+					(plugin as typeof plugin & Record<string, unknown>).name !==
+					'vite:dts'
+				);
+			}),
+		];
+
 		return mergeConfig(config, {
 			optimizeDeps: {
-				include: [
-					'storybook-dark-mode',
-					'storybook-addon-interactions',
-				],
+				...config?.optimizeDeps,
 			},
 			resolve: {
 				...config.resolve,

.storybook/preview.tsx

@@ -11,6 +11,12 @@ const preview: Preview = {
 				date: /Date$/i,
 			},
 		},
+		// Disable color contrast checks for the entire storybook.
+		a11y: {
+			config: {
+				rules: [{ id: 'color-contrast', enabled: false }],
+			},
+		},
 	},
 	decorators: [
 		(Story) => (

.storybook/test-runner.js

@@ -0,0 +1,30 @@
+const { getStoryContext } = require('@storybook/test-runner');
+const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
+
+module.exports = {
+	async preVisit(page) {
+		await injectAxe(page);
+	},
+	async postVisit(page, context) {
+		// Get the entire context of a story, including parameters, args, argTypes, etc.
+		const storyContext = await getStoryContext(page, context);
+		// Apply story-level a11y rules
+		await configureAxe(page, {
+			rules: storyContext.parameters?.a11y?.config?.rules,
+		});
+
+		// Do not run a11y tests on disabled stories.
+		if (storyContext.parameters?.a11y?.disable) {
+			return;
+		}
+
+		const element =
+			storyContext.parameters?.a11y?.element ?? '#storybook-root';
+		await checkA11y(page, element, {
+			detailedReport: true,
+			detailedReportOptions: {
+				html: true,
+			},
+		});
+	},
+};