Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release: Patch 8.3.4 #29211

Merged
merged 3 commits into from
Sep 28, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge pull request #29147 from InfiniteXyy/next
Addon Test: Support story name as test description

(cherry picked from commit 0811ca8)
  • Loading branch information
yannbf authored and storybook-bot committed Sep 27, 2024
commit 3042d433a83f3286327d9fb3f3ef0e43bf3f9be3
49 changes: 49 additions & 0 deletions code/core/src/csf-tools/vitest-plugin/transformer.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {};
Expand Down
11 changes: 6 additions & 5 deletions code/core/src/csf-tools/vitest-plugin/transformer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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[];

Expand Down
10 changes: 10 additions & 0 deletions docs/writing-tests/vitest-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down