Docs updates for Storybook Test #30035
Conversation
- Focused tests - Coverage - A11y - Remove `test.include` & `test.isolate` from example Vitest configs - Streamline Test addon introduction - Address feedback from EAP
kylegach
added
documentation
ci:docs
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
7 file(s) reviewed, 7 comment(s)
Edit PR Review Bot Settings | Greptile
| - Storybook ≥ 8.5 | ||
| - A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx), [`react-vite`](../get-started/frameworks/react-vite.mdx), ['sveltekit`](../get-started/frameworks/sveltekit.mdx), etc.), or the [Storybook Next.js framework with Vite](../get-started/frameworks/nextjs.mdx#with-vite) |
There was a problem hiding this comment.
syntax: Incorrect backtick in 'sveltekit` link syntax
| [TK: Screenshot of story sidebar item with open menu] | ||
|  |
There was a problem hiding this comment.
style: Placeholder [TK] text should be removed before merging
| [TK - Test module edit mode with only coverage] | ||
|  |
There was a problem hiding this comment.
style: Placeholder [TK] text should be removed before merging
| [TK - Sidebar item menu with edit mode] | ||
|  |
There was a problem hiding this comment.
style: Placeholder [TK] text should be removed before merging
| // ... | ||
| coverage: { | ||
| // ... | ||
| provider: 'instanbul', // 'v8' is the default |
There was a problem hiding this comment.
syntax: 'instanbul' is misspelled, should be 'istanbul'
| [TK - Coverage result] | ||
|  |
There was a problem hiding this comment.
style: This image is duplicated from line 20-21 and should be removed or replaced with a different screenshot
| tags: ['a11ytest'], | ||
| }; | ||
|
|
||
| export default preview; |
There was a problem hiding this comment.
logic: export default meta instead of preview here
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 6fb17c9. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
There was a problem hiding this comment.
7 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -120,43 +120,69 @@ Customize the a11y ruleset at the story level by updating your story to include | |||
|
|
|||
| ## Test addon integration | |||
|
|
|||
| The accessibility addon provides seamless integration with Storybook's [test addon](./test-addon.mdx), enabling you to run automated accessibility checks for all your tests in the background while you run component tests. If there are any violations, the test will fail, and you will see the results in the sidebar without any additional setup. | |||
| The accessibility addon provides seamless integration with the [Test addon](./test-addon.mdx), enabling you to run automated accessibility checks for all your tests in the background while you run component tests. If there are any violations, the test will fail, and you will see the results in the sidebar without any additional setup. | |||
|
|
|||
| {/* TODO: add asset of the changed UI here */} | |||
There was a problem hiding this comment.
style: TODO comment should be removed before merging
| After running your tests, you will now see status indicators on stories and components for their pass, fail, or error state. You can press on these indicators to see more details and jump straight to the failure in the Component tests addon panel. That panel provides an interactive debugger for your component test, allowing you to step through each simulated behavior or assertion. | ||
|
|
||
| {/* TODO: 👆 Revise this to not be limited to Component tests */} |
There was a problem hiding this comment.
logic: This paragraph references Component tests specifically but should be generalized since it applies to all test types
| ## How it works | ||
|
|
||
| The Test addon works by using a Vitest plugin to transform your stories into [Vitest](https://vitest.dev) tests using [portable stories](../api/portable-stories/portable-stories-vitest.mdx). It also configures Vitest to run those tests in [browser mode](https://vitest.dev/guide/browser/), using Playwright's Chromium browser. Because it is built on top of Vitest, the addon requires a Vite-based Storybook framework. | ||
|
|
||
| Stories are tested in two ways: a smoke test to ensure it renders and, if a [play function](../writing-tests/component-testing#write-a-component-test) is defined, that function is run and any [assertions made](../writing-tests/component-testing.mdx#assert-tests-with-vitests-apis) within it are validated. | ||
|
|
||
| When you run tests in the [Storybook UI](#storybook-ui), the addon runs Vitest in the background and reports the results in the sidebar. |
There was a problem hiding this comment.
style: This 'How it works' section duplicates information from the introduction. Consider consolidating to avoid repetition
There was a problem hiding this comment.
Thanks for taking the time to put together this pull request and make the required adjustments. I left some items for you to look into when you can. Nothing major.
Also, just as a reminder, we still have some "TK" and missing images and if we don't get to them, let's comment those out.
I'm approving it to unblock you.
| ```ts title="Button.stories.ts" | ||
| // Replace your-renderer with the renderer you are using (e.g., react, vue3) | ||
| import { Meta } from '@storybook/your-renderer'; | ||
|
|
||
| import { Button } from './Button'; | ||
|
|
||
| const meta = { | ||
| component: Button, | ||
| // 👇 Re-apply the a11ytest tag for this component's stories | ||
| tags: ['a11ytest'], | ||
| }; | ||
|
|
||
| export default preview; |
There was a problem hiding this comment.
Just a bit of a sanity check here: don't forget to convert the example into a full-fledged snippet file with the supported renderers and frameworks (including Svelte CSF, if possible).
|
|
||
| If a test fails, it will be marked as such in the sidebar and you can click on the story to see the failure. You can also run tests in watch mode, which will automatically re-run tests when you make changes to your components or stories. | ||
| When tests are run for a story, the status is shown in the sidebar. You can filter it down to only show failures and failing status indicators open a menu to debug the failure. You can also run tests in watch mode, which will automatically re-run tests when you make changes to your components or stories. |
There was a problem hiding this comment.
The words are not precious, but we could go with something like:
| When tests are run for a story, the status is shown in the sidebar. You can filter it down to only show failures and failing status indicators open a menu to debug the failure. You can also run tests in watch mode, which will automatically re-run tests when you make changes to your components or stories. | |
| When tests are run for a story, the status is shown in the sidebar. You can filter it to show only failures and failing status. You can also run tests in watch mode, which will automatically re-run tests when you make changes to your components or stories. To do so, expand the test UI in the sidebar and adjust the settings as needed. |
| ## Configuring tests | ||
|
|
||
| Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration and setup files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested. | ||
| The tests run by the addon can be configured in two ways. You can toggle which test types are run, and you can include, exclude, or skip stories from being tested. |
There was a problem hiding this comment.
The wording is not precious but we can probably simplify it a bit
| The tests run by the addon can be configured in two ways. You can toggle which test types are run, and you can include, exclude, or skip stories from being tested. | |
| The tests run by the addon can be configured in two ways. You can toggle which test types are run and include, exclude, or skip stories from being tested. |
|
|
||
| ### Toggling test types | ||
|
|
||
| You can toggle different testing types on or off in the test module. Press the edit icon to enter edit mode, then toggle the test types you want to run. You may only see a checkbox for coverage: |
There was a problem hiding this comment.
Just a bit of a reminder: this page is referred to as the Test addon, and we're mentioning it across our documentation. However, we still have some instances where we say "module", we should standardize the wording to avoid confusion
| @@ -436,12 +478,29 @@ We recommend using Chromium, because it is most likely to best match the experie | |||
|
|
|||
| 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 | |||
| ```js title="Example.stories.ts" | |||
There was a problem hiding this comment.
When you can, adjust the title to be title="Example.stories.js|ts. as the way it's currently referenced, it's not a TypeScript story per se. We can revisit this and add a full-fledged example later on
| It's important to understand that the coverage reported in the Storybook UI has three important limitations: | ||
|
|
||
| 1. Coverage is calculated using the stories you've written, not the entire codebase. In other words, it will not include any other Vitest tests. | ||
| 2. Coverage can only be calculated for all stories in your project, not an individual story or a group of stories. |
There was a problem hiding this comment.
Small typo here I assume:
| 2. Coverage can only be calculated for all stories in your project, not an individual story or a group of stories. | |
| 2. Coverage can only be calculated for all stories in your project, not for an individual story or a group of stories. |
| - uses: actions/checkout@v4 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '18.x' |
There was a problem hiding this comment.
Just a minor item to be looked into we can probably go with Node 20 and start standardizing the versions.
|
|
||
| ### Troubleshooting | ||
|
|
||
| #### Excluding stories from coverage report |
There was a problem hiding this comment.
There's a small typo here, I'd assume.
| #### Excluding stories from coverage report | |
| #### Excluding stories from the coverage report |
| ```ts title="vitest.config.ts" | ||
| import { coverageConfigDefaults, defineConfig } from 'vitest/config'; | ||
|
|
||
| export default defineConfig({ | ||
| // ... rest of your config | ||
| test: { | ||
| coverage: { | ||
| // 👇 Add this | ||
| exclude: [ | ||
| ...coverageConfigDefaults.exclude, | ||
| // This pattern must align with the `stories` property of your `.storybook/main.js` config | ||
| '**/*.stories.*', '**/*.story.*', '**/stories.*', '**/story.*' | ||
| ], | ||
| } | ||
| } | ||
| }) | ||
| ``` |
There was a problem hiding this comment.
When you can, remove the "rest of your config commentary" and adjust the Storybook config reference (i.e., .storybook/main.js in what's a TypeScript file) for consistency.
| </details> | ||
|
|
||
| <details> | ||
| <summary>Webpack 5 options</summary> |
There was a problem hiding this comment.
This is just an idea. We should simplify this and conditionally render the tables based on the framework.
There was a problem hiding this comment.
LGTM
7 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile
Closes #29794
What I did
test.include&test.isolatefrom example Vitest configsChecklist for Contributors
Testing
Manual testing
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.Greptile Summary
Based on the provided files and context, I'll create a concise summary of the documentation updates for the Storybook Test addon:
Documentation updates for Storybook Test addon v8.5, introducing focused testing capabilities, enhanced coverage reporting, and improved accessibility testing integration.
localhost:6006/coverage/index.htmland configurable watermarkstest.includeandtest.isolateconfigurations from Vitest examplesparameters.a11y.manualwithglobals.a11y.manualThe summary focuses on the key technical changes while maintaining clarity and avoiding repetition. It highlights the major updates across documentation files and configuration examples.
💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!