Docs: Test runner minor fixes

docs/snippets/common/my-component-exclude-tags.story.js.mdx

@@ -0,0 +1,14 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  component: MyComponent,
+  tags: ['no-tests'], // 👈 Excludes all stories from being tested with the test-runner
+};
+
+export const ExcludeStory = {
+  tags: ['no-tests'], // 👈 Configures the story to be excluded from testing via the `no-tests` tag
+};
+```

docs/snippets/common/my-component-exclude-tags.story.ts.mdx

@@ -0,0 +1,20 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  tags: ['no-tests'], // 👈 Excludes all stories from being tested with the test-runner
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ExcludeStory: Story = {
+  tags: ['no-tests'], // 👈 Configures the story to be excluded from testing via the `no-tests` tag
+};
+```

docs/snippets/common/my-component-include-tags.story.js.mdx

@@ -0,0 +1,14 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  component: MyComponent,
+  tags: ['test-only'], // 👈 Runs tests only for stories with this tag
+};
+
+export const IncludeStory = {
+  tags: ['test-only'], // 👈 Configures the story to be added to the test suite with the test-runner
+};
+```

docs/snippets/common/my-component-include-tags.story.ts.mdx

@@ -0,0 +1,20 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  tags: ['test-only'], // 👈 Runs tests only for stories with this tag
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const IncludeStory: Story = {
+  tags: ['test-only'], // 👈 Configures the story to be added to the test suite with the test-runner
+};
+```

docs/snippets/common/my-component-skip-tags.story.js.mdx

@@ -0,0 +1,14 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  component: MyComponent,
+  tags: ['skip-test'], // 👈 Skips running tests on this story
+};
+
+export const SkipStory = {
+  tags: ['skip-test'], // 👈 Configures the story to be skipped when running tests with the test-runner
+};
+```

docs/snippets/common/my-component-skip-tags.story.ts.mdx

@@ -0,0 +1,20 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  tags: ['skip-test'], // 👈 Skips running tests on this story
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const SkipStory: Story = {
+  tags: ['skip-test'], // 👈 Configures the story to be skipped when running tests with the test-runner
+};
+```

docs/snippets/common/test-runner-a11y-config.js.mdx

@@ -4,7 +4,7 @@
 const { injectAxe, checkA11y } = require('axe-playwright');
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 module.exports = {

docs/snippets/common/test-runner-a11y-config.ts.mdx

@@ -1,12 +1,11 @@
 ```ts
 // .storybook/test-runner.ts
 
-import { injectAxe, checkA11y } from 'axe-playwright';
-
 import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 const a11yConfig: TestRunnerConfig = {
@@ -23,5 +22,5 @@ const a11yConfig: TestRunnerConfig = {
   },
 };
 
-module.exports = a11yConfig;
+export default a11yConfig;
 ```

docs/snippets/common/test-runner-a11y-configure.js.mdx

@@ -6,7 +6,7 @@ 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
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 module.exports = {

docs/snippets/common/test-runner-a11y-configure.ts.mdx

@@ -1,14 +1,13 @@
 ```ts
 // .storybook/test-runner.ts
 
-import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
-
+import type { TestRunnerConfig } from '@storybook/test-runner';
 import { getStoryContext } from '@storybook/test-runner';
 
-import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 const a11yConfig: TestRunnerConfig = {
@@ -33,5 +32,5 @@ const a11yConfig: TestRunnerConfig = {
   },
 };
 
-module.exports = a11yConfig;
+export default a11yConfig;
 ```

docs/snippets/common/test-runner-a11y-disable.js.mdx

@@ -1,12 +1,11 @@
 ```js
 // .storybook/test-runner.js
 
-const { injectAxe, checkA11y } = require('axe-playwright');
-
 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
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 module.exports = {

docs/snippets/common/test-runner-a11y-disable.ts.mdx

@@ -1,14 +1,13 @@
 ```ts
 // .storybook/test-runner.ts
 
-import { injectAxe, checkA11y } from 'axe-playwright';
-
+import type { TestRunnerConfig } from '@storybook/test-runner';
 import { getStoryContext } from '@storybook/test-runner';
 
-import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 const a11yConfig: TestRunnerConfig = {
@@ -32,5 +31,5 @@ const a11yConfig: TestRunnerConfig = {
   },
 };
 
-module.exports = a11yConfig;
+export default a11yConfig;
 ```

docs/snippets/common/test-runner-auth.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/test-runner.js
+
+module.exports = {
+  getHttpHeaders: async (url) => {
+    const token = url.includes('prod') ? 'XYZ' : 'ABC';
+    return {
+      Authorization: `Bearer ${token}`,
+    };
+  },
+};
+```

docs/snippets/common/test-runner-auth.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/test-runner.ts
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  getHttpHeaders: async (url) => {
+    const token = url.includes('prod') ? 'prod-token' : 'dev-token';
+    return {
+      Authorization: `Bearer ${token}`,
+    };
+  },
+};
+
+export default config;
+```

docs/snippets/common/test-runner-custom-page-viewport.js.mdx

@@ -0,0 +1,32 @@
+```js
+// .storybook/test-runner.js
+
+const { getStoryContext } = require('@storybook/test-runner');
+const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport');
+
+const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 };
+
+module.exports = {
+  async preRender(page, story) {
+    // Accesses the story's parameters and retrieves the viewport used to render it
+    const context = await getStoryContext(page, story);
+    const viewportName = context.parameters?.viewport?.defaultViewport;
+    const viewportParameter = MINIMAL_VIEWPORTS[viewportName];
+
+    if (viewportParameter) {
+      const viewportSize = Object.entries(viewportParameter.styles).reduce(
+        (acc, [screen, size]) => ({
+          ...acc,
+          // Converts the viewport size from percentages to numbers
+          [screen]: parseInt(size),
+        }),
+        {}
+      );
+      // Configures the Playwright page to use the viewport size
+      page.setViewportSize(viewportSize);
+    } else {
+      page.setViewportSize(DEFAULT_VIEWPORT_SIZE);
+    }
+  },
+};
+```

docs/snippets/common/test-runner-custom-page-viewport.ts.mdx

@@ -0,0 +1,36 @@
+```ts
+// .storybook/test-runner.js
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner';
+
+const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport');
+
+const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 };
+
+const config: TestRunnerConfig = {
+  async preRender(page, story) {
+    // Accesses the story's parameters and retrieves the viewport used to render it
+    const context = await getStoryContext(page, story);
+    const viewportName = context.parameters?.viewport?.defaultViewport;
+    const viewportParameter = MINIMAL_VIEWPORTS[viewportName];
+
+    if (viewportParameter) {
+      const viewportSize = Object.entries(viewportParameter.styles).reduce(
+        (acc, [screen, size]) => ({
+          ...acc,
+          // Converts the viewport size from percentages to numbers
+          [screen]: parseInt(size),
+        }),
+        {}
+      );
+      // Configures the Playwright page to use the viewport size
+      page.setViewportSize(viewportSize);
+    } else {
+      page.setViewportSize(DEFAULT_VIEWPORT_SIZE);
+    }
+  },
+};
+
+export default config;
+```

docs/snippets/common/test-runner-helper-function.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/test-runner.js
 
-const { getStoryContext } = require('@storybook/test-runner');
+const { getStoryContext, waitForPageReady } = require('@storybook/test-runner');
 
 module.exports = {
   // Hook that is executed before the test runner starts running tests
@@ -23,6 +23,9 @@ module.exports = {
     // Get the entire context of a story, including parameters, args, argTypes, etc.
     const storyContext = await getStoryContext(page, context);
 
+    // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.).
+    await waitForPageReady(page);
+
     // Add your configuration here.
   },
 };

docs/snippets/common/test-runner-helper-function.ts.mdx

@@ -2,8 +2,7 @@
 // .storybook/test-runner.ts
 
 import type { TestRunnerConfig } from '@storybook/test-runner';
-
-import { getStoryContext } from '@storybook/test-runner';
+import { getStoryContext, waitForPageReady } from '@storybook/test-runner';
 
 const config: TestRunnerConfig = {
   // Hook that is executed before the test runner starts running tests
@@ -25,9 +24,12 @@ const config: TestRunnerConfig = {
     // Get the entire context of a story, including parameters, args, argTypes, etc.
     const storyContext = await getStoryContext(page, context);
 
+    // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.).
+    await waitForPageReady(page);
+
     // Add your configuration here.
   },
 };
 
-module.exports = config;
+export default config;
 ```

docs/snippets/common/test-runner-hooks-example.ts.mdx

@@ -24,5 +24,5 @@ const config: TestRunnerConfig = {
   },
 };
 
-module.exports = config;
+export default config;
 ```

docs/snippets/common/test-runner-tags-config.js.mdx

@@ -0,0 +1,11 @@
+```js
+// .storybook/test-runner.js
+
+module.exports = {
+  tags: {
+    include: ['test-only', 'pages'],
+    exclude: ['no-tests', 'tokens'],
+    skip: ['skip-test', 'layout'],
+  },
+};
+```

docs/snippets/common/test-runner-tags-config.ts.mdx

@@ -0,0 +1,15 @@
+```ts
+// .storybook/test-runner.ts
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  tags: {
+    include: ['test-only', 'pages'],
+    exclude: ['no-tests', 'tokens'],
+    skip: ['skip-test', 'layout'],
+  },
+};
+
+export default config;
+```