From 1c089405363951656781255ccc6b5ade36471007 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 23 Sep 2024 12:38:23 -0400
Subject: [PATCH] Merge pull request #29147 from InfiniteXyy/next

Addon Test: Support story name as test description

(cherry picked from commit 0811ca8bd592dbee4eadb94f46fccadda21fe0bf)
---
 .../vitest-plugin/transformer.test.ts         | 49 +++++++++++++++++++
 .../csf-tools/vitest-plugin/transformer.ts    | 11 +++--
 docs/writing-tests/vitest-plugin.mdx          | 10 ++++
 3 files changed, 65 insertions(+), 5 deletions(-)

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 72a1d05ab403..84d9ac273718 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -213,6 +213,55 @@ describe('transformer', () => {
       `);
     });
 
+    describe("use the story's name as test title", () => {
+      it('should support CSF v3 via name property', async () => {
+        const code = `
+        export default { component: Button }
+        export const Primary = { name: "custom name" };`;
+        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 = {
+            component: Button,
+            title: "automatic/calculated/title"
+          };
+          export default _meta;
+          export const Primary = {
+            name: "custom name"
+          };
+          const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+          if (_isRunningFromThisFile) {
+            _test("custom name", _testStory("Primary", Primary, _meta, []));
+          }
+        `);
+      });
+
+      it('should support CSF v1/v2 via storyName property', async () => {
+        const code = `
+        export default { component: Button }
+        export const Story = () => {}
+        Story.storyName = 'custom name';`;
+        const result = await transform({ code: 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 = {
+            component: Button,
+            title: "automatic/calculated/title"
+          };
+          export default _meta;
+          export const Story = () => {};
+          Story.storyName = 'custom name';
+          const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+          if (_isRunningFromThisFile) {
+            _test("custom name", _testStory("Story", Story, _meta, []));
+          }
+        `);
+      });
+    });
+
     it('should add test statement to const declared exported 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 51ea1169f6c3..778ea752f1d0 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -202,15 +202,17 @@ export async function vitestTransform({
 
     const getTestStatementForStory = ({
       exportName,
+      testTitle,
       node,
     }: {
       exportName: string;
+      testTitle: string;
       node: t.Node;
     }): t.ExpressionStatement => {
       // Create the _test expression directly using the exportName identifier
       const testStoryCall = t.expressionStatement(
         t.callExpression(vitestTestId, [
-          t.stringLiteral(exportName),
+          t.stringLiteral(testTitle),
           t.callExpression(testStoryId, [
             t.stringLiteral(exportName),
             t.identifier(exportName),
@@ -239,10 +241,9 @@ export async function vitestTransform({
           return;
         }
 
-        return getTestStatementForStory({
-          exportName,
-          node,
-        });
+        // 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 });
       })
       .filter((st) => !!st) as t.ExpressionStatement[];
 
diff --git a/docs/writing-tests/vitest-plugin.mdx b/docs/writing-tests/vitest-plugin.mdx
index 09940ef230d9..1a0e4b9708b2 100644
--- a/docs/writing-tests/vitest-plugin.mdx
+++ b/docs/writing-tests/vitest-plugin.mdx
@@ -379,6 +379,16 @@ We recommend running tests in a browser using Playwright, but you can use WebDri
 
 We recommend using Chromium, because it is most likely to best match the experience of a majority of your users. However, you can use other browsers by adjusting the [browser name in the Vitest configuration file](https://vitest.dev/config/#browser-name). Note that [Playwright and WebDriverIO support different browsers](https://vitest.dev/guide/browser/#browser-option-types).
 
+### How do I customize a test name?
+
+By default, the export name of a story is mapped to the test name. To create a more descriptive test description, you can provide a `name` property for the story. This allows you to include spaces, brackets, or other special characters.
+
+```js
+export const Story = {
+  name: 'custom, descriptive name'
+};
+```
+
 ## API
 
 ### Exports