Merge pull request #14563 from coreyjv/before-axe-test

Storyshots: Add `beforeAxeTest` hook

addons/storyshots/storyshots-puppeteer/README.md

@@ -228,6 +228,25 @@ initStoryshots({ suite: 'A11y checks', test: axeTest() });
 
 For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters)
 
+### Specifying options to `axeTest`
+
+```js
+import initStoryshots from '@storybook/addon-storyshots';
+import { axeTest } from '@storybook/addon-storyshots-puppeteer';
+
+const beforeAxeTest = (page, { context: { kind, story }, url }) => {
+  return new Promise((resolve) =>
+    setTimeout(() => {
+      resolve();
+    }, 600)
+  );
+};
+
+initStoryshots({ suite: 'A11y checks', test: axeTest({ beforeAxeTest }) });
+```
+
+`beforeAxeTest` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeAxeTest` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the axe test .
+
 ## _imageSnapshots_
 
 Generates and compares screenshots of your stories using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
@@ -317,4 +336,4 @@ initStoryshots({
   suite: 'Image storyshots',
   test: imageSnapshot({ storybookUrl: 'http://localhost:6006', beforeScreenshot }),
 });
-```
+```

addons/storyshots/storyshots-puppeteer/src/axeTest.ts

@@ -1,5 +1,5 @@
 import '@wordpress/jest-puppeteer-axe';
-import { defaultCommonConfig, CommonConfig } from './config';
+import { defaultAxeConfig, AxeConfig } from './config';
 import { puppeteerTest } from './puppeteerTest';
 
 declare global {
@@ -11,13 +11,17 @@ declare global {
   }
 }
 
-export const axeTest = (customConfig: Partial<CommonConfig> = {}) =>
+export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
+  const config = { ...defaultAxeConfig, ...customConfig };
+  const { beforeAxeTest } = config;
+
   puppeteerTest({
-    ...defaultCommonConfig,
-    ...customConfig,
+    ...config,
     async testBody(page, options) {
       const parameters = options.context.parameters.a11y;
       const include = parameters?.element ?? '#root';
+      await beforeAxeTest(page, options);
       await expect(page).toPassAxeTests({ ...parameters, include });
     },
   });
+};

addons/storyshots/storyshots-puppeteer/src/config.ts

@@ -43,6 +43,10 @@ export interface ImageSnapshotConfig extends CommonConfig {
   afterScreenshot: (options: { image: string; context: Context }) => Promise<void>;
 }
 
+export interface AxeConfig extends CommonConfig {
+  beforeAxeTest: (page: Page, options: Options) => Promise<void>;
+}
+
 const noop: () => undefined = () => undefined;
 const asyncNoop: () => Promise<undefined> = async () => undefined;
 
@@ -82,3 +86,8 @@ export const defaultImageSnapshotConfig: ImageSnapshotConfig = {
   beforeScreenshot: noop,
   afterScreenshot: noop,
 };
+
+export const defaultAxeConfig: AxeConfig = {
+  ...defaultCommonConfig,
+  beforeAxeTest: noop,
+};