added a11y test to test-runner

README.md

@@ -50,6 +50,13 @@ Run the tests.
   $ npm run test
   ```
 
+Run storybook a11y tests and interaction tests.
+
+  ```
+  $ npm run storybook
+  $ npm run test:storybook
+  ```
+
 For in-depth testing guidance review the [contribution guidelines](./CONTRIBUTING.md#Testing)
 
 ## Deploying the ODH Dashbard

frontend/.storybook/test-runner.js

@@ -0,0 +1,28 @@
+const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
+
+const { getStoryContext } = require('@storybook/test-runner');
+/*
+* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* to learn more about the test-runner hooks API.
+*/
+module.exports = {
+  async preRender(page) {
+    await injectAxe(page);
+  },
+  async postRender(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,
+    });
+
+    await checkA11y(page, storyContext.parameters?.a11y?.element ?? "#root", {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};

frontend/package.json

@@ -35,8 +35,7 @@
     "test:local": "jest --watchAll",
     "test:type-check": "tsc --noEmit",
     "test:storybook": "test-storybook --verbose",
-    "storybook": "start-storybook -p 6006 -s ./config",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006 -s ./config"
   },
   "dependencies": {
     "@openshift/dynamic-plugin-sdk": "^1.0.0-alpha12",
@@ -94,6 +93,7 @@
     "@types/showdown": "^1.9.3",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
+    "axe-playwright": "^1.2.3",
     "babel-loader": "^8.3.0",
     "copy-webpack-plugin": "^6.2.1",
     "css-loader": "^5.2.7",