From 46e7a4b14e858abced3c7b864fc8d123bf5b5cf4 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 1 Oct 2024 16:57:32 +0800 Subject: [PATCH 1/3] Vitest plugin: Support renamed exports --- code/core/src/csf-tools/CsfFile.test.ts | 5 +++ code/core/src/csf-tools/CsfFile.ts | 3 ++ .../vitest-plugin/transformer.test.ts | 34 +++++++++++++++++++ .../csf-tools/vitest-plugin/transformer.ts | 8 +++-- 4 files changed, 48 insertions(+), 2 deletions(-) diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts index 18d441e666b8..d7194edcdf2e 100644 --- a/code/core/src/csf-tools/CsfFile.test.ts +++ b/code/core/src/csf-tools/CsfFile.test.ts @@ -81,6 +81,7 @@ describe('CsfFile', () => { stories: - id: foo-bar--a name: A + localName: A parameters: __id: foo-bar--a __stats: @@ -94,6 +95,7 @@ describe('CsfFile', () => { moduleMock: false - id: foo-bar--b name: B + localName: B parameters: __id: foo-bar--b __stats: @@ -790,6 +792,7 @@ describe('CsfFile', () => { stories: - id: foo-bar--a name: A + localName: default __stats: play: false render: false @@ -801,6 +804,7 @@ describe('CsfFile', () => { moduleMock: false - id: foo-bar--b name: B + localName: B __stats: play: false render: false @@ -878,6 +882,7 @@ describe('CsfFile', () => { stories: - id: foo-bar--a name: A + localName: A parameters: __id: foo-bar--a __stats: diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts index d9859da5cecb..d1cafb31bb64 100644 --- a/code/core/src/csf-tools/CsfFile.ts +++ b/code/core/src/csf-tools/CsfFile.ts @@ -190,6 +190,7 @@ export interface StaticMeta export interface StaticStory extends Pick { id: string; + localName?: string; __stats: IndexInputStats; } @@ -488,6 +489,7 @@ export class CsfFile { node.specifiers.forEach((specifier) => { if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) { const { name: exportName } = specifier.exported; + const { name: localName } = specifier.local; const decl = t.isProgram(parent) ? findVarInitialization(specifier.local.name, parent) : specifier.local; @@ -515,6 +517,7 @@ export class CsfFile { self._stories[exportName] = { id: 'FIXME', name: exportName, + localName, parameters: {}, __stats: {}, }; diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts index 84d9ac273718..5b030ac19c73 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts @@ -296,6 +296,40 @@ describe('transformer', () => { `); }); + it('should add test statement to const declared renamed exported stories', async () => { + const code = ` + export default {}; + const Primary = { + args: { + label: 'Primary Button', + }, + }; + + export { Primary as PrimaryStory }; + `; + + const result = await transform({ code }); + + expect(result.code).toMatchInlineSnapshot(` + import { test as _test, expect as _expect } from "vitest"; + import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils"; + const _meta = { + title: "automatic/calculated/title" + }; + export default _meta; + const Primary = { + args: { + label: 'Primary Button' + } + }; + export { Primary as PrimaryStory }; + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); + if (_isRunningFromThisFile) { + _test("PrimaryStory", _testStory("PrimaryStory", Primary, _meta, [])); + } + `); + }); + it('should add tests for multiple stories', async () => { const code = ` export default {}; diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts index 778ea752f1d0..587693b92fa8 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts @@ -201,10 +201,12 @@ export async function vitestTransform({ ast.program.body.push(isRunningFromThisFileDeclaration); const getTestStatementForStory = ({ + localName, exportName, testTitle, node, }: { + localName: string; exportName: string; testTitle: string; node: t.Node; @@ -215,7 +217,7 @@ export async function vitestTransform({ t.stringLiteral(testTitle), t.callExpression(testStoryId, [ t.stringLiteral(exportName), - t.identifier(exportName), + t.identifier(localName), t.identifier(metaExportName), skipTagsId, ]), @@ -243,7 +245,9 @@ export async function vitestTransform({ // use the story's name as the test title for vitest, and fallback to exportName const testTitle = parsed._stories[exportName].name ?? exportName; - return getTestStatementForStory({ testTitle, exportName, node }); + const decl = parsed._storyExports[exportName]; + const localName = parsed._stories[exportName].localName ?? exportName; + return getTestStatementForStory({ testTitle, localName, exportName, node }); }) .filter((st) => !!st) as t.ExpressionStatement[]; From 192622ce0c6d5190bf7844da629e9130314e1716 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 1 Oct 2024 12:05:35 +0200 Subject: [PATCH 2/3] Refactor vitestTransform function to use localName as fallback for test title --- code/core/src/csf-tools/vitest-plugin/transformer.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts index 587693b92fa8..4a1f6cd763d3 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts @@ -243,10 +243,9 @@ export async function vitestTransform({ return; } - // use the story's name as the test title for vitest, and fallback to exportName - const testTitle = parsed._stories[exportName].name ?? exportName; - const decl = parsed._storyExports[exportName]; const localName = parsed._stories[exportName].localName ?? exportName; + // use the story's name as the test title for vitest, and fallback to exportName + const testTitle = parsed._stories[exportName].name ?? localName; return getTestStatementForStory({ testTitle, localName, exportName, node }); }) .filter((st) => !!st) as t.ExpressionStatement[]; From d23542f77c08886b361b09c7366845b70ede4059 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 1 Oct 2024 12:17:15 +0200 Subject: [PATCH 3/3] use exportName as fallback for test title instead --- code/core/src/csf-tools/vitest-plugin/transformer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts index 4a1f6cd763d3..677235975cb1 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts @@ -245,7 +245,7 @@ export async function vitestTransform({ const localName = parsed._stories[exportName].localName ?? exportName; // use the story's name as the test title for vitest, and fallback to exportName - const testTitle = parsed._stories[exportName].name ?? localName; + const testTitle = parsed._stories[exportName].name ?? exportName; return getTestStatementForStory({ testTitle, localName, exportName, node }); }) .filter((st) => !!st) as t.ExpressionStatement[];