docs: address feedback

- consistent tabs vs. spaces in snippet
- add more Storybook details
pull/16701/head
Kyle Gach 2 weeks ago
parent 7b3bfaa484
commit 805d4542bc

@ -287,25 +287,25 @@ You can create stories for component variations and test interactions with the [
```svelte
/// file: LoginForm.stories.svelte
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { expect, fn } from 'storybook/test';
import LoginForm from './LoginForm.svelte';
const { Story } = defineMeta({
import { defineMeta } from '@storybook/addon-svelte-csf';
import { expect, fn } from 'storybook/test';
import LoginForm from './LoginForm.svelte';
const { Story } = defineMeta({
component: LoginForm,
args: {
// 👇 Pass a mock function to the `onSubmit` prop
onSubmit: fn(),
}
});
});
</script>
<Story name="Empty Form" />
<Story
name="Filled Form"
play={async ({ args, canvas, userEvent }) => {
name="Filled Form"
play={async ({ args, canvas, userEvent }) => {
// 👇 Simulate a user filling out the form
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
@ -316,12 +316,14 @@ You can create stories for component variations and test interactions with the [
// 👇 Assert that the success message is shown
await expect(canvas.getByText('Youre in!')).toBeInTheDocument();
}}
}}
/>
```
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.
To learn more about Storybook's mocking, accessibility testing, interactions debugging, and coverage tools, please see the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?ref=svelte-docs&renderer=svelte).
## E2E tests using Playwright
E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).

Loading…
Cancel
Save