diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index bc86e2120f5c..cdf788cb9219 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 8.3.0-beta.1 + +- ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman! +- Core: Move `util` to regular dependency - [#29008](https://github.com/storybookjs/storybook/pull/29008), thanks @ndelangen! +- Next.js-Vite: Streamline Next.js dir option - [#28995](https://github.com/storybookjs/storybook/pull/28995), thanks @valentinpalkovic! +- Next.js: Fix wrong Next.js framework reference - [#28992](https://github.com/storybookjs/storybook/pull/28992), thanks @valentinpalkovic! +- Vue3: Add vite plugin for portable stories - [#29004](https://github.com/storybookjs/storybook/pull/29004), thanks @yannbf! + ## 8.3.0-beta.0 Empty release identical to `v8.3.0-alpha.11` diff --git a/MIGRATION.md b/MIGRATION.md index f6dcfbf3b109..d63cd568816f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -430,8 +430,12 @@ These APIs allowed addons to render arbitrary content in the Storybook sidebar. > [!NOTE] > You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. +> +> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features -The `addon-backgrounds` addon now uses a new format for parameters. The `backgrounds` parameter is now an object with an `options` property that is assigned to an object of background values, where the key is used when setting the global value. +The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds. +The `backgrounds` parameter is now an object with an `options` property. +This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `value` property. ```diff // .storybook/preview.js @@ -472,8 +476,13 @@ This locks that story to the `twitter` background, it cannot be changed by the a > [!NOTE] > You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. +> +> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features -The `addon-viewport` addon now uses a new format for parameters. The `viewport` parameter is now an object with an `options` property that is assigned to an object of viewport values, where the key is used when setting the global value. +The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports. +The `viewport` parameter is now an object with an `options` property. +This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `styles` property. +The `styles` property is an object with a `width` and a `height` property. ```diff // .storybook/preview.js @@ -501,7 +510,8 @@ export const parameters = { }; ``` -Setting an override value should now be done via a `globals` property on your component/meta or story itself. Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`. +Setting an override value should now be done via a `globals` property on your component/meta or story itself. +Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`. ```diff // Button.stories.ts diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 2358bcbc9724..3ffcd813628e 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -198,6 +198,11 @@ const getVitestPluginInfo = (framework: string) => { frameworkPluginCall = 'storybookSveltekitPlugin()'; } + if (framework === '@storybook/vue3-vite') { + frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'"; + frameworkPluginCall = 'storybookVuePlugin()'; + } + return { frameworkPluginImport, frameworkPluginCall }; }; diff --git a/code/core/package.json b/code/core/package.json index bff10efa0dc9..92cf625d808c 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -286,6 +286,7 @@ "process": "^0.11.10", "recast": "^0.23.5", "semver": "^7.6.2", + "util": "^0.12.5", "ws": "^8.2.3" }, "devDependencies": { @@ -418,7 +419,6 @@ "typescript": "^5.3.2", "unique-string": "^3.0.0", "use-resize-observer": "^9.1.0", - "util": "^0.12.4", "watchpack": "^2.2.0" }, "publishConfig": { diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts index ec64caeed26a..fe841c49f488 100644 --- a/code/core/src/csf-tools/ConfigFile.test.ts +++ b/code/core/src/csf-tools/ConfigFile.test.ts @@ -795,6 +795,26 @@ describe('ConfigFile', () => { export default preview; `); }); + + it('root globals as const satisfies as variable', () => { + expect( + removeField( + ['globals'], + dedent` + const preview = { + globals: { a: 1 }, + bar: { a: 1 } + } as const satisfies Foo; + export default preview; + ` + ) + ).toMatchInlineSnapshot(` + const preview = { + bar: { a: 1 } + } as const satisfies Foo; + export default preview; + `); + }); }); describe('quotes', () => { diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts index 161af38022f3..5cb0d28234eb 100644 --- a/code/core/src/csf-tools/ConfigFile.ts +++ b/code/core/src/csf-tools/ConfigFile.ts @@ -51,6 +51,13 @@ const propKey = (p: t.ObjectProperty) => { return null; }; +const unwrap = (node: t.Node | undefined | null): any => { + if (t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node)) { + return unwrap(node.expression); + } + return node; +}; + // eslint-disable-next-line @typescript-eslint/naming-convention const _getPath = (path: string[], node: t.Node): t.Node | undefined => { if (path.length === 0) { @@ -191,9 +198,7 @@ export class ConfigFile { ? _findVarInitialization(node.declaration.name, parent) : node.declaration; - if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) { - decl = decl.expression; - } + decl = unwrap(decl); if (t.isObjectExpression(decl)) { self._exportsObject = decl; @@ -275,9 +280,7 @@ export class ConfigFile { exportObject = _findVarInitialization(right.name, parent as t.Program) as any; } - if (t.isTSAsExpression(exportObject) || t.isTSSatisfiesExpression(exportObject)) { - exportObject = exportObject.expression; - } + exportObject = unwrap(exportObject); if (t.isObjectExpression(exportObject)) { self._exportsObject = exportObject; @@ -517,9 +520,8 @@ export class ConfigFile { if (t.isIdentifier(decl)) { decl = _findVarInitialization(decl.name, this._ast.program); } - if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) { - decl = decl.expression; - } + + decl = unwrap(decl); if (t.isObjectExpression(decl)) { const properties = decl.properties as t.ObjectProperty[]; removeProperty(properties, path[0]); diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts index 02e335834b8a..b1eb6a692ef0 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts @@ -1,10 +1,11 @@ // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton +import { fn } from '@storybook/test'; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { headers } from '@storybook/nextjs/headers.mock'; -import { fn } from '@storybook/test'; +import { headers } from '@storybook/experimental-nextjs-vite/headers.mock'; import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts index af5deabf2b87..6af7f9a877f0 100644 --- a/code/frameworks/experimental-nextjs-vite/src/preset.ts +++ b/code/frameworks/experimental-nextjs-vite/src/preset.ts @@ -1,4 +1,6 @@ // https://storybook.js.org/docs/react/addons/writing-presets +import path from 'node:path'; + import type { PresetProperty } from 'storybook/internal/types'; import type { StorybookConfigVite } from '@storybook/builder-vite'; @@ -7,7 +9,7 @@ import { dirname, join } from 'path'; // @ts-expect-error - tsconfig settings have to be moduleResolution=Bundler and module=Preserve import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs'; -import type { StorybookConfig } from './types'; +import type { FrameworkOptions } from './types'; export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); @@ -34,14 +36,10 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, options) => { config.plugins = config.plugins || []; - const framework = (await options.presets.apply( - 'framework', - {}, - options - )) as StorybookConfig['framework']; - - const nextAppDir = typeof framework !== 'string' ? framework.options.nextAppDir : undefined; - config.plugins.push(vitePluginStorybookNextjs({ dir: nextAppDir })); + const { nextConfigPath } = await options.presets.apply('frameworkOptions'); + + const nextDir = nextConfigPath ? path.dirname(nextConfigPath) : undefined; + config.plugins.push(vitePluginStorybookNextjs({ dir: nextDir })); return config; }; diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts index cb8ebb737b02..8de91a4430d9 100644 --- a/code/frameworks/experimental-nextjs-vite/src/types.ts +++ b/code/frameworks/experimental-nextjs-vite/src/types.ts @@ -9,12 +9,8 @@ type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>; type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { - /** - * The directory where the Next.js app is located. - * - * @default process.cwd() - */ - nextAppDir?: string; + /** The path to the Next.js configuration file. */ + nextConfigPath?: string; builder?: BuilderOptions; }; diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index a88ae1f705b7..9796a5dcddcd 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -5,7 +5,6 @@ import type { Addon_DecoratorFunction, Addon_LoaderFunction } from 'storybook/in // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { cookies, headers } from '@storybook/nextjs/headers.mock'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { createNavigation } from '@storybook/nextjs/navigation.mock'; diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 9c9fe27f43e0..80f022446be5 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -30,6 +30,11 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, + "./vite": { + "types": "./dist/vite.d.ts", + "require": "./dist/vite.js", + "import": "./dist/vite.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -74,7 +79,8 @@ "bundler": { "entries": [ "./src/index.ts", - "./src/preset.ts" + "./src/preset.ts", + "./src/vite.ts" ], "platform": "node" }, diff --git a/code/frameworks/vue3-vite/src/plugins/vue-template.ts b/code/frameworks/vue3-vite/src/plugins/vue-template.ts new file mode 100644 index 000000000000..325bc20341b4 --- /dev/null +++ b/code/frameworks/vue3-vite/src/plugins/vue-template.ts @@ -0,0 +1,14 @@ +import type { Plugin } from 'vite'; + +export async function templateCompilation() { + return { + name: 'storybook:vue-template-compilation', + config: () => ({ + resolve: { + alias: { + vue: 'vue/dist/vue.esm-bundler.js', + }, + }, + }), + } satisfies Plugin; +} diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index 057b9a3d92a1..574ab0a04ad3 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -6,6 +6,7 @@ import type { PluginOption } from 'vite'; import { vueComponentMeta } from './plugins/vue-component-meta'; import { vueDocgen } from './plugins/vue-docgen'; +import { templateCompilation } from './plugins/vue-template'; import type { FrameworkOptions, StorybookConfig, VueDocgenPlugin } from './types'; const getAbsolutePath = (input: I): I => @@ -17,7 +18,7 @@ export const core: PresetProperty<'core'> = { }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { - const plugins: PluginOption[] = []; + const plugins: PluginOption[] = [templateCompilation()]; const framework = await options.presets.apply('framework'); const frameworkOptions: FrameworkOptions = @@ -35,11 +36,6 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = const { mergeConfig } = await import('vite'); return mergeConfig(config, { plugins, - resolve: { - alias: { - vue: 'vue/dist/vue.esm-bundler.js', - }, - }, }); }; diff --git a/code/frameworks/vue3-vite/src/vite.ts b/code/frameworks/vue3-vite/src/vite.ts new file mode 100644 index 000000000000..eb2a3345e937 --- /dev/null +++ b/code/frameworks/vue3-vite/src/vite.ts @@ -0,0 +1,5 @@ +import { templateCompilation } from './plugins/vue-template'; + +export const storybookVuePlugin = () => { + return [templateCompilation()]; +}; diff --git a/code/package.json b/code/package.json index 119cadfb7f2a..2817d7920aea 100644 --- a/code/package.json +++ b/code/package.json @@ -294,5 +294,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.3.0-beta.1" } diff --git a/code/yarn.lock b/code/yarn.lock index c66db4d13c36..e7023fe8c13f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6034,7 +6034,7 @@ __metadata: typescript: "npm:^5.3.2" unique-string: "npm:^3.0.0" use-resize-observer: "npm:^9.1.0" - util: "npm:^0.12.4" + util: "npm:^0.12.5" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" languageName: unknown diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx index 19509b523a3c..c5a8828f421f 100644 --- a/docs/api/doc-blocks/doc-block-story.mdx +++ b/docs/api/doc-blocks/doc-block-story.mdx @@ -79,7 +79,7 @@ Because all stories render simultaneously in docs entries, play functions can pe However, if you know your play function is β€œsafe” to run in docs, you can use this prop to run it automatically. - If a story uses [`mount` in its play function](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered), it will not render in docs unless `autoplay` is set to `true`. + If a story uses [`mount` in its play function](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered), it will not render in docs unless `autoplay` is set to `true`. ### `height` diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx index 64038d44dd7a..5734fd2385e6 100644 --- a/docs/api/portable-stories/portable-stories-jest.mdx +++ b/docs/api/portable-stories/portable-stories-jest.mdx @@ -168,7 +168,7 @@ sidebar: These are the configurations needed in the setup file: - preview annotations: those defined in `.storybook/preview.ts` - addon annotations (optional): those exported by addons - - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall)) + - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall)) {/* prettier-ignore-start */} @@ -222,7 +222,7 @@ sidebar: ### 3. Run - Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story. + Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/component-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story. πŸ‘‰ For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called. diff --git a/docs/api/portable-stories/portable-stories-playwright.mdx b/docs/api/portable-stories/portable-stories-playwright.mdx index 2cbae20f3dd9..e3973b4d7682 100644 --- a/docs/api/portable-stories/portable-stories-playwright.mdx +++ b/docs/api/portable-stories/portable-stories-playwright.mdx @@ -120,7 +120,7 @@ sidebar: These are the configurations needed in the setup file: - preview annotations: those defined in `.storybook/preview.ts` - addon annotations (optional): those exported by addons - - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall)) + - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall)) {/* prettier-ignore-start */} diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx index 11aa9b99475d..a764fbe28a56 100644 --- a/docs/api/portable-stories/portable-stories-vitest.mdx +++ b/docs/api/portable-stories/portable-stories-vitest.mdx @@ -174,7 +174,7 @@ sidebar: These are the configurations needed in the setup file: - preview annotations: those defined in `.storybook/preview.ts` - addon annotations (optional): those exported by addons - - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall)) + - beforeAll: code that runs before all tests ([more info](../../writing-tests/component-testing.mdx#beforeall)) {/* prettier-ignore-start */} @@ -230,7 +230,7 @@ sidebar: ### 3. Run - Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story. + Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/component-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/component-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story. πŸ‘‰ For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called. diff --git a/docs/builders/vite.mdx b/docs/builders/vite.mdx index 8c39bd909319..8f226e4f5844 100644 --- a/docs/builders/vite.mdx +++ b/docs/builders/vite.mdx @@ -97,9 +97,9 @@ Currently, [automatic argType inference](../api/arg-types.mdx#automatic-argtype- {/* prettier-ignore-end */} -### Interaction tests not working as expected +### Component tests not working as expected -If you are migrating from a Webpack-based project, such as [CRA](https://create-react-app.dev/), to Vite, and you have enabled Interaction testing with the [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) addon, you may run into a situation where your tests fail to execute notifying you that the `window` object is not defined. To resolve this issue, you can create a `preview-head.html` file in your Storybook configuration directory and include the following: +If you are migrating from a Webpack-based project, such as [CRA](https://create-react-app.dev/), to Vite, and you have enabled component testing with the [`@storybook/addon-interactions`](https://storybook.js.org/addons/@storybook/addon-interactions) addon, you may run into a situation where your tests fail to execute notifying you that the `window` object is not defined. To resolve this issue, you can create a `preview-head.html` file in your Storybook configuration directory and include the following: {/* prettier-ignore-start */} diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx index b2f88c51d1c5..aead9b265217 100644 --- a/docs/configure/integration/frameworks-feature-support.mdx +++ b/docs/configure/integration/frameworks-feature-support.mdx @@ -25,7 +25,7 @@ Core frameworks have dedicated maintainers or contributors who are responsible f | [Outline](../../essentials/measure-and-outline.mdx#outline-addon) | βœ… | βœ… | βœ… | βœ… | | **Addons** | | | | | | [A11y](../../writing-tests/accessibility-testing.mdx) | βœ… | βœ… | βœ… | βœ… | -| [Interactions](../../writing-tests/interaction-testing.mdx) | βœ… | βœ… | βœ… | βœ… | +| [Component testing](../../writing-tests/component-testing.mdx) | βœ… | βœ… | βœ… | βœ… | | [Test runner](../../writing-tests/test-runner.mdx) | βœ… | βœ… | βœ… | βœ… | | [Test coverage](../../writing-tests/test-coverage.mdx) | βœ… | βœ… | βœ… | βœ… | | [CSS resources](https://github.com/storybookjs/addon-cssresources) | βœ… | βœ… | βœ… | βœ… | @@ -75,7 +75,7 @@ Community frameworks have fewer contributors which means they may not be as up t | [Outline](../../essentials/measure-and-outline.mdx#outline-addon) | βœ… | βœ… | βœ… | βœ… | βœ… | βœ… | | **Addons** | | | | | | | | [A11y](../../writing-tests/accessibility-testing.mdx) | βœ… | βœ… | βœ… | βœ… | βœ… | βœ… | -| [Interactions](../../writing-tests/interaction-testing.mdx) | | βœ… | βœ… | βœ… | βœ… | βœ… | +| [Component testing](../../writing-tests/component-testing.mdx) | | βœ… | βœ… | βœ… | βœ… | βœ… | | [Test runner](../../writing-tests/test-runner.mdx) | | βœ… | βœ… | βœ… | βœ… | βœ… | | [Test coverage](../../writing-tests/test-coverage.mdx) | | βœ… | βœ… | βœ… | βœ… | βœ… | | [CSS resources](https://github.com/storybookjs/addon-cssresources) | βœ… | βœ… | βœ… | βœ… | βœ… | βœ… | diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx index 7c4099c18364..43033469f701 100644 --- a/docs/essentials/actions.mdx +++ b/docs/essentials/actions.mdx @@ -17,7 +17,7 @@ Actions work via supplying special Storybook-generated β€œaction” arguments (r ### Via @storybook/test fn spy function -The recommended way to write actions is to use the `fn` utility from `@storybook/test` to mock and spy args. This is very useful for writing [interaction tests](../writing-tests/interaction-testing.mdx). You can mock your component's methods by assigning them to the `fn()` function: +The recommended way to write actions is to use the `fn` utility from `@storybook/test` to mock and spy args. This is very useful for writing [component tests](../writing-tests/component-testing.mdx). You can mock your component's methods by assigning them to the `fn()` function: {/* prettier-ignore-start */} diff --git a/docs/essentials/interactions.mdx b/docs/essentials/interactions.mdx index 432433d7bf92..237f79c45435 100644 --- a/docs/essentials/interactions.mdx +++ b/docs/essentials/interactions.mdx @@ -47,7 +47,7 @@ Now when you run Storybook, the Interactions addon will be enabled. ![Storybook Interactions installed and registered](../_assets/essentials/addon-interactions-installed-registered.png) -## Write an interaction test +## Write a component test Interactions run as part of the `play` function of your stories. We rely on Testing Library to do the heavy lifting. diff --git a/docs/faq.mdx b/docs/faq.mdx index 220228ff3be8..57c010639e1d 100644 --- a/docs/faq.mdx +++ b/docs/faq.mdx @@ -218,7 +218,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S | | Preview and build docs | [See current documentation](./writing-docs/build-documentation.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | | Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | | | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | +| | Component tests | [See current documentation](./writing-tests/component-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | | | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing/snapshot-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | | | Import stories in tests/Unit tests | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | | | Import stories in tests/End-to-end testing | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | diff --git a/docs/get-started/browse-stories.mdx b/docs/get-started/browse-stories.mdx index 1246a7070ded..1cf04a1c9be3 100644 --- a/docs/get-started/browse-stories.mdx +++ b/docs/get-started/browse-stories.mdx @@ -47,7 +47,7 @@ Addons are plugins that extend Storybook's core functionality. You can find them * **Controls** allows you to interact with a component’s args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases. * **Actions** help you verify interactions produce the correct outputs via callbacks. For instance, if you view the β€œLogged In” story of the `Header` component, we can verify that clicking the β€œLog out” button triggers the `onLogout` callback, which would be provided by the component that made use of the Header. -* **Interactions** provides a helpful user interface for debugging [interaction tests](../writing-tests/interaction-testing.mdx) with the `play` function. +* **Interactions** provides a helpful user interface for debugging [component tests](../writing-tests/component-testing.mdx) with the `play` function. * **Visual Tests** lets you pinpoint UI bugs in your local development environment by providing instant feedback directly in Storybook.