docs: add testing with storybook #16701
Conversation
|
|
|
||
| When writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example). | ||
|
|
||
| _With Storybook_ |
There was a problem hiding this comment.
I'd like to make this a heading, but the level required here, h4, is not styled in the docs site.
If you agree that the h4 is necessary, I'll need some help navigating where to place that style. 😅
There was a problem hiding this comment.
alternative would be to move testing out of misc and make it a separate top level category so h3 should work here. This would be a larger change though so waiting for feedback from other svelte team members.
| When you run Storybook, you will see a test widget in the bottom of your sidebar, from where you can run your tests. Each story is automatically transformed into a test. The results will be shown in the sidebar and you can debug your tests using Storybook's tools and the browser devtools. You can also integrate [accessibility tests](https://storybook.js.org/docs/writing-tests/accessibility?ref=svelte-docs&renderer=svelte), which will run alongside your component tests. | ||
|
|
||
| <figure> | ||
| <video autoplay loop muted style="max-width: 100%; height: auto;"> |
There was a problem hiding this comment.
This video is the same as the one viewable here (and is added as an asset in this related PR).
I used a video because it's most effective at illustrating the feature, but I can replace it with an image if you would prefer.
|
Yay for us finally getting around to do this! 🎉 As I'm testing out the Storybook integration with First, when using (FYI: Note that addons' postinstall scripts aren't the regular postinstall as defined by package managers, but a custom JS file that addons can add that Storybook will execute when users add the addon for the first time) Second, I'm seeing an error |
|
Is the video really required? it's 1.5mb and autoplay which adds up. It also adds to the overall weight of the repo and has to be kept up2date as it shows storybook ui that can change. I'd prefer if this just linked to a stable url in the storybook docs that show the feature. maybe https://storybook.js.org/docs/get-started/frameworks/svelte-vite ? |
|
|
Agree with @dominikg the video adds a lot of weight it's super easy to go stale and especially with auto play would also be rather unaccessible. |
Video is not required at all, that's just the best way we've found to explain these visual workflows. It's up to you all how you want it to be, and as @kylegach writes, we can replace it with an image or a link to our docs if you think that fits better with your style of documentation. |
|
Thanks for the feedback, everyone. I appreciate your concerns about the video and have removed it (and closed the PR to the docs site to add it). I didn't add an image (because it also could quickly fall out of date) or replace it with a link to our docs (because there are already many included). |
| /> | ||
| ``` | ||
|
|
||
| When you view that story or run that test in Storybook, you can see each step of the simulated behavior and the assertions made against the component. If anything goes wrong, you can step back-and-forth through the test to pinpoint exactly where the issue occurred. |
There was a problem hiding this comment.
Should we consider a teaser for other SB Test features here?
To learn more about Storybook's mocking, accessibility testing, interactions debugging, and coverage tools, please see the Storybook testing docs.
- consistent tabs vs. spaces in snippet - add more Storybook details
condense, remove referer query parameters
|
Thank you for getting the ball rolling! I agree with the other maintainers that we can condense this quite a bit, so I went ahead and did that. Please let me know if the setup flow etc still reads correctly. The remaining question for me is about the headings. Maybe we can make it its own h3 and leave the other component testing section untouched. |
Co-authored-by: Jeppe Reinhold <[email protected]>
|
Thanks for your edits, @dummdidumm! Really appreciate the fast back-and-forth here. I tweaked some small things and I believe this is good-to-go, pending the heading decision. Happy to make it its own section as you suggested, if you'd like. |
Hello! I'm a colleague of @JReinhold on the Storybook team, who has been talking with @dominikg, @benmccann, and @dummdidumm about adding this documentation.
This PR adds a With Storybook section to the testing docs at https://svelte.dev/docs/svelte/testing, which allows Svelte components to be integration tested in a real browser via Vitest tests (transformed from Storybook stories).
Important
This PR depends on sveltejs/svelte.dev#1521, as it adds a necessary video asset
This is just an initial draft to get the conversation going. Happy to revise as you see fit.