Skip to content

Commit

Permalink
Merge branch 'next' into patch-1
Browse files Browse the repository at this point in the history
  • Loading branch information
kasperpeulen authored Sep 24, 2024
2 parents dd170eb + 0811ca8 commit 91c2e9d
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 6 deletions.
2 changes: 1 addition & 1 deletion code/addons/themes/docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const myCustomDecorator = ({ themes, defaultState, ...rest }) => {
Let's use Vuetify as an example. Vuetify uses it's own global state to know which theme to render. To build a custom decorator to accommodate this method we'll need to do the following

```js
// .storybook/withVeutifyTheme.decorator.js
// .storybook/withVuetifyTheme.decorator.js
import { DecoratorHelpers } from '@storybook/addon-themes';
import { useTheme } from 'vuetify';

Expand Down
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

0 comments on commit 91c2e9d

Please sign in to comment.