From df80522e1bc854ddebbf2406c8cfd7e0ed515aeb Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 22 Aug 2024 14:26:38 -0600 Subject: [PATCH 01/14] Rename interaction test -> component test --- docs/api/doc-blocks/doc-block-story.mdx | 2 +- .../portable-stories-jest.mdx | 4 +- .../portable-stories-playwright.mdx | 2 +- .../portable-stories-vitest.mdx | 4 +- docs/builders/vite.mdx | 4 +- .../frameworks-feature-support.mdx | 4 +- docs/essentials/actions.mdx | 2 +- docs/essentials/interactions.mdx | 2 +- docs/faq.mdx | 3 +- docs/get-started/browse-stories.mdx | 2 +- docs/get-started/why-storybook.mdx | 2 +- .../mocking-modules.mdx | 2 +- docs/writing-stories/play-function.mdx | 2 +- docs/writing-tests/accessibility-testing.mdx | 4 +- ...tion-testing.mdx => component-testing.mdx} | 39 ++++++++++--------- .../stories-in-end-to-end-tests.mdx | 2 +- .../stories-in-unit-tests.mdx | 4 +- docs/writing-tests/index.mdx | 14 +++---- .../snapshot-testing/snapshot-testing.mdx | 4 +- .../storyshots-migration-guide.mdx | 2 +- docs/writing-tests/test-coverage.mdx | 2 +- docs/writing-tests/test-runner.mdx | 6 +-- docs/writing-tests/visual-testing.mdx | 2 +- 23 files changed, 58 insertions(+), 56 deletions(-) rename docs/writing-tests/{interaction-testing.mdx => component-testing.mdx} (84%) 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..544559934da8 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) | βœ… | βœ… | βœ… | βœ… | +| [Interactions](../../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) | | βœ… | βœ… | βœ… | βœ… | βœ… | +| [Interactions](../../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..372f6182d6cc 100644 --- a/docs/faq.mdx +++ b/docs/faq.mdx @@ -218,7 +218,8 @@ 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) | +| | Interaction 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.