storybook/docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx
2021-10-21 18:16:39 +01:00

35 lines
933 B
Plaintext

```md
<!-- MyComponent.stories.mdx -->
import { Meta, Story } from '@storybook/addon-docs';
import { screen, userEvent } from '@storybook/testing-library';
import MyComponent from './MyComponent.svelte';
<Meta title="QueryMethods" component={MyComponent}/>
<!-- The play function interacts with the component and looks for the button. -->
<Story
name="ExampleWithRole"
play={async () => {
// See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button', { name: / button label/i }));
}}
render={()=>({
Component: MyComponent
})} />
<!-- The play function interacts with the component and looks for the text-->
<Story
name="ExampleWithText"
play={async () => {
await canvas.findByText('example string');
}}
render={()=>({
Component: MyComponent
})} />
```