@kindly/react-chat 2.37.2 → 2.38.2

package/.storybook/main.js

@@ -1,11 +1,14 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const path = require('path');
+
 const webpack = require('webpack');
 
 const envConfig = require('../../../config');
-const envVars = envConfig['local'];
 
-const SETTINGS_HOST = 'https://example.com/mockme';
+const envVars = envConfig.local;
 
+const SETTINGS_HOST = 'https://example.com/mockme';
 
 module.exports = {
   stories: [
@@ -19,6 +22,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     'storybook-addon-mock/register',
+    '@storybook/addon-a11y',
   ],
   framework: '@storybook/react',
   /* Modify the default storybook webpack config to our needs */
@@ -69,4 +73,4 @@ module.exports = {
       ],
     };
   },
-};
+};

package/.storybook/preview.js

@@ -7,6 +7,11 @@ export const parameters = {
     },
   },
   chromatic: { pauseAnimationAtEnd: true },
+  a11y: {
+    config: {
+      rules: [{ id: 'color-contrast', enabled: false }],
+    },
+  },
 };
 
 export const argTypes = {

package/.storybook/test-runner.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { getStoryContext } = require('@storybook/test-runner');
+const { injectAxe, checkA11y } = require('axe-playwright');
+
+/*
+ * 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) {
+    const storyContext = await getStoryContext(page, context);
+    // Do not test a11y for stories that disable a11y
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
+    await page.waitForLoadState('domcontentloaded');
+    await new Promise((resolve) => {
+      setTimeout(resolve, 1000);
+    });
+
+    await checkA11y(page, '#root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+      axeOptions: {
+        rules: storyContext.parameters?.a11y?.config.rules.reduce(
+          (previousValue, currentValue) => ({ ...previousValue, [currentValue.id]: currentValue }),
+          {},
+        ),
+      },
+    });
+  },
+};