Merge pull request #125 from storybookjs/yann/sb-308-test-runner97-pr…

…ovide-a-method-to

feat: provide global getStoryContext utility

.storybook/test-runner.ts

@@ -1,4 +1,5 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import { getStoryContext } from '../dist/cjs/playwright/hooks';
 import type { TestRunnerConfig } from '../dist/ts';
 
 const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';
@@ -9,6 +10,14 @@ const config: TestRunnerConfig = {
     expect.extend({ toMatchImageSnapshot });
   },
   async postRender(page, context) {
+    // Get entire context of a story, including parameters, args, argTypes, etc.
+    const { parameters } = await getStoryContext(page, context);
+
+    if (parameters?.tests?.disableSnapshots) {
+      console.log('skipping story ', context.id);
+      return;
+    }
+
     // Visual snapshot tests
     const image = await page.screenshot({ fullPage: true });
     expect(image).toMatchImageSnapshot({

README.md

@@ -330,6 +330,46 @@ it('button--basic', async () => {
 });
 ```
 
+### Global utility functions
+
+While running tests using the hooks, you might want to get information from a story, such as the parameters passed to it, or its args. The test runner now provides a `getStoryContext` utility function that fetches the story context for the current story:
+
+```js
+await getStoryContext(page, context);
+```
+
+You can use it for multiple use cases, and here's an example that combines the story context and accessibility testing:
+
+```js
+// .storybook/test-runner.js
+const { getStoryContext } = require('@storybook/test-runner');
+const { injectAxe, checkA11y } = require('axe-playwright');
+
+module.exports = {
+ async preRender(page, context) {
+   await injectAxe(page);
+ },
+ async postRender(page, context) {
+  // Get entire context of a story, including parameters, args, argTypes, etc.
+  const storyContext = await getStoryContext(page, context);
+
+  // Do not test a11y for stories that disable a11y
+  if (storyContext.parameters?.a11y?.disable) {
+    return;
+  }
+
+   await checkA11y(page, '#root', {
+     detailedReport: true,
+     detailedReportOptions: {
+       html: true,
+     },
+     // pass axe options defined in @storybook/addon-a11y
+     axeOptions: storyContext.parameters?.a11y?.options
+   })
+ },
+};
+```
+
 ## Troubleshooting
 
 #### Errors with Jest 28

src/playwright/hooks.ts

@@ -1,5 +1,6 @@
 import global from 'global';
 import type { Page } from 'playwright';
+import type { StoryContext } from '@storybook/csf';
 
 export type TestContext = {
   id: string;
@@ -22,3 +23,10 @@ export const setPreRender = (preRender: TestHook) => {
 export const setPostRender = (postRender: TestHook) => {
   global.__sbPostRender = postRender;
 };
+
+export const getStoryContext = async (page: Page, context: TestContext): Promise<StoryContext> => {
+  // @ts-ignore
+  return page.evaluate(({ storyId }) => globalThis.__getContext(storyId), {
+    storyId: context.id,
+  });
+};

src/setup-page.ts

@@ -96,6 +96,10 @@ export const setupPage = async (page) => {
         });
       }
 
+      async function __getContext(storyId) {
+        return globalThis.__STORYBOOK_PREVIEW__.storyStore.loadStory({ storyId });
+      }
+
       async function __test(storyId) {
         try {
           await __waitForElement('#root');
@@ -104,7 +108,7 @@ export const setupPage = async (page) => {
           throw new StorybookTestRunnerError(storyId, message);
         }
 
-        const channel = window.__STORYBOOK_ADDONS_CHANNEL__;
+        const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
         if(!channel) {
           throw new StorybookTestRunnerError(
             storyId,

src/util/getStorybookMetadata.test.ts

@@ -2,7 +2,7 @@ import * as storybookMain from './getStorybookMain';
 
 import { getStorybookMetadata } from './getStorybookMetadata';
 
-describe.only('getStorybookMetadata', () => {
+describe('getStorybookMetadata', () => {
   afterAll(() => {
     process.env.STORYBOOK_CONFIG_DIR = undefined;
   });

stories/atoms/Button.stories.js

@@ -24,6 +24,17 @@ Primary.args = {
   label: 'Button',
 };
 
+export const Secondary = Template.bind({});
+Secondary.args = {
+  ...Primary.args,
+  primary: false,
+};
+Secondary.parameters = {
+  tests: {
+    disableSnapshots: true
+  }
+}
+
 export const Demo = (args) => (
   <button type="button" onClick={() => args.onSubmit('clicked')}>
     Click