merge tags from preview annotations with meta and story tags

storybookjs · Jun 21, 2024 · 2559864 · 2559864
1 parent 1939323
commit 2559864
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 7 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,3 +1,4 @@
+import type { Preview } from '@storybook/react';
 import { isTestRunner } from './is-test-runner';
 
 const withSkippableTests = (StoryFn, { parameters }) => {
@@ -8,4 +9,9 @@ const withSkippableTests = (StoryFn, { parameters }) => {
   return StoryFn();
 };
 
-export const decorators = [withSkippableTests];
+const preview: Preview = {
+  tags: ['global-tag'],
+  decorators: [withSkippableTests],
+};
+
+export default preview;
diff --git a/src/csf/transformCsf.ts b/src/csf/transformCsf.ts
@@ -108,7 +108,8 @@ export const transformCsf = (
     beforeEachPrefixer,
     insertTestIfEmpty,
     makeTitle,
-  }: TransformOptions
+    previewAnnotations = { tags: [] },
+  }: TransformOptions & { previewAnnotations?: Record<string, any> }
 ) => {
   const { includeTags, excludeTags, skipTags } = getTagOptions();
 
@@ -130,7 +131,8 @@ export const transformCsf = (
         'test',
         'dev',
         ...(csf.meta?.tags || []),
-        ...(csf._stories[key].tags || [])
+        ...(csf._stories[key].tags || []),
+        ...previewAnnotations.tags
       );
 
       return acc;

diff --git a/src/playwright/transformPlaywright.test.ts b/src/playwright/transformPlaywright.test.ts
@@ -42,6 +42,7 @@ describe('Playwright', () => {
     delete process.env.STORYBOOK_INCLUDE_TAGS;
     delete process.env.STORYBOOK_EXCLUDE_TAGS;
     delete process.env.STORYBOOK_SKIP_TAGS;
+    delete process.env.STORYBOOK_PREVIEW_TAGS;
   });
 
   describe('tag filtering mechanism', () => {
@@ -324,22 +325,26 @@ describe('Playwright', () => {
       `);
     });
     it('should work in conjunction with includeTags, excludeTags and skipTags', () => {
-      process.env.STORYBOOK_INCLUDE_TAGS = 'play,design';
+      process.env.STORYBOOK_INCLUDE_TAGS = 'play,design,global-tag';
       process.env.STORYBOOK_SKIP_TAGS = 'skip';
       process.env.STORYBOOK_EXCLUDE_TAGS = 'exclude';
+      process.env.STORYBOOK_PREVIEW_TAGS = 'global-tag';
+
       // Should result in:
       // - A being excluded
       // - B being included, but skipped
       // - C being included
-      // - D being excluded
+      // - D being included
+      // - E being excluded
       expect(
         transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = { tags: ['play', 'exclude'] };
         export const B = { tags: ['play', 'skip'] };
         export const C = { tags: ['design'] };
-        export const D = { };
+        export const D = { tags: ['global-tag'] };
+        export const E = { };
       `,
           filename
         )
@@ -436,6 +441,96 @@ describe('Playwright', () => {
                 }
               });
             });
+            describe("D", () => {
+              it("smoke-test", async () => {
+                const testFn = async () => {
+                  const context = {
+                    id: "example-foo-bar--d",
+                    title: "Example/foo/bar",
+                    name: "D"
+                  };
+                  if (globalThis.__sbPreVisit) {
+                    await globalThis.__sbPreVisit(page, context);
+                  }
+                  const result = await page.evaluate(({
+                    id,
+                    hasPlayFn
+                  }) => __test(id, hasPlayFn), {
+                    id: "example-foo-bar--d"
+                  });
+                  if (globalThis.__sbPostVisit) {
+                    await globalThis.__sbPostVisit(page, context);
+                  }
+                  if (globalThis.__sbCollectCoverage) {
+                    const isCoverageSetupCorrectly = await page.evaluate(() => '__coverage__' in window);
+                    if (!isCoverageSetupCorrectly) {
+                      throw new Error(\`[Test runner] An error occurred when evaluating code coverage:
+          The code in this story is not instrumented, which means the coverage setup is likely not correct.
+          More info: https://github.com/storybookjs/test-runner#setting-up-code-coverage\`);
+                    }
+                    await jestPlaywright.saveCoverage(page);
+                  }
+                  return result;
+                };
+                try {
+                  await testFn();
+                } catch (err) {
+                  if (err.toString().includes('Execution context was destroyed')) {
+                    console.log(\`An error occurred in the following story, most likely because of a navigation: "\${"Example/foo/bar"}/\${"D"}". Retrying...\`);
+                    await jestPlaywright.resetPage();
+                    await globalThis.__sbSetupPage(globalThis.page, globalThis.context);
+                    await testFn();
+                  } else {
+                    throw err;
+                  }
+                }
+              });
+            });
+            describe("E", () => {
+              it("smoke-test", async () => {
+                const testFn = async () => {
+                  const context = {
+                    id: "example-foo-bar--e",
+                    title: "Example/foo/bar",
+                    name: "E"
+                  };
+                  if (globalThis.__sbPreVisit) {
+                    await globalThis.__sbPreVisit(page, context);
+                  }
+                  const result = await page.evaluate(({
+                    id,
+                    hasPlayFn
+                  }) => __test(id, hasPlayFn), {
+                    id: "example-foo-bar--e"
+                  });
+                  if (globalThis.__sbPostVisit) {
+                    await globalThis.__sbPostVisit(page, context);
+                  }
+                  if (globalThis.__sbCollectCoverage) {
+                    const isCoverageSetupCorrectly = await page.evaluate(() => '__coverage__' in window);
+                    if (!isCoverageSetupCorrectly) {
+                      throw new Error(\`[Test runner] An error occurred when evaluating code coverage:
+          The code in this story is not instrumented, which means the coverage setup is likely not correct.
+          More info: https://github.com/storybookjs/test-runner#setting-up-code-coverage\`);
+                    }
+                    await jestPlaywright.saveCoverage(page);
+                  }
+                  return result;
+                };
+                try {
+                  await testFn();
+                } catch (err) {
+                  if (err.toString().includes('Execution context was destroyed')) {
+                    console.log(\`An error occurred in the following story, most likely because of a navigation: "\${"Example/foo/bar"}/\${"E"}". Retrying...\`);
+                    await jestPlaywright.resetPage();
+                    await globalThis.__sbSetupPage(globalThis.page, globalThis.context);
+                    await testFn();
+                  } else {
+                    throw err;
+                  }
+                }
+              });
+            });
           });
         }
       `);

diff --git a/src/playwright/transformPlaywright.ts b/src/playwright/transformPlaywright.ts
@@ -75,11 +75,13 @@ const makeTitleFactory = (filename: string) => {
 };
 
 export const transformPlaywright = (src: string, filename: string) => {
+  const tags = process.env.STORYBOOK_PREVIEW_TAGS?.split(',') ?? [];
   const transformOptions = {
     testPrefixer,
     insertTestIfEmpty: true,
     clearBody: true,
     makeTitle: makeTitleFactory(filename),
+    previewAnnotations: { tags },
   };
 
   const result = transformCsf(src, transformOptions);

diff --git a/src/test-storybook.ts b/src/test-storybook.ts
@@ -5,7 +5,7 @@ import { execSync } from 'child_process';
 import fetch from 'node-fetch';
 import canBindToHost from 'can-bind-to-host';
 import dedent from 'ts-dedent';
-import path from 'path';
+import path, { join, resolve } from 'path';
 import tempy from 'tempy';
 
 import { JestOptions, getCliOptions } from './util/getCliOptions';
@@ -15,6 +15,8 @@ import { transformPlaywrightJson } from './playwright/transformPlaywrightJson';
 
 import { glob } from 'glob';
 import { TestRunnerConfig } from './playwright/hooks';
+import { getInterpretedFile } from '@storybook/core-common';
+import { readConfig } from '@storybook/csf-tools';
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'test';
@@ -260,6 +262,16 @@ function warnOnce(message: string) {
   };
 }
 
+const extractTagsFromPreview = async (configDir = '.storybook') => {
+  const previewConfigPath = getInterpretedFile(join(resolve(configDir), 'preview'));
+
+  if (!previewConfigPath) return [];
+  const previewConfig = await readConfig(previewConfigPath);
+  const tags = previewConfig.getFieldValue(['tags']) ?? [];
+
+  return tags.join(',');
+};
+
 const main = async () => {
   const { jestOptions, runnerOptions } = getCliOptions();
 
@@ -368,6 +380,10 @@ const main = async () => {
     const { storiesPaths, lazyCompilation } = getStorybookMetadata();
     process.env.STORYBOOK_STORIES_PATTERN = storiesPaths;
 
+    // 1 - We extract tags from preview file statically like it's done by the Storybook indexer. We only do this in non-index-json mode because it's not needed in that mode
+    // 2 - We pass it via env variable to avoid having to use async code in the babel plugin
+    process.env.STORYBOOK_PREVIEW_TAGS = await extractTagsFromPreview(runnerOptions.configDir);
+
     if (lazyCompilation && isLocalStorybookIp) {
       log(
         `You're running Storybook with lazy compilation enabled, and will likely cause issues with the test runner locally. Consider disabling 'lazyCompilation' in ${runnerOptions.configDir}/main.js when running 'test-storybook' locally.`