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
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:
Major documentation update for Storybook Test addon (v8.5) introducing focused testing capabilities, enhanced coverage reporting, and improved accessibility testing integration.
/docs/writing-tests/test-addon.mdxlocalhost:6006/coverage/index.htmland watermark configurationsparameters.a11y.manualwithglobals.a11y.manualtest.includeandtest.isolateconfigurations from Vitest example configsThis summary focuses on the most important changes while maintaining clarity and avoiding repetition. It highlights the key technical updates across the documentation files and configuration examples.
💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!