storybook/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
2021-10-14 17:15:03 +01:00

36 lines
836 B
Plaintext

```js
// MyComponent.stories.js
import { fireEvent, screen } from '@storybook/testing-library';
import MyComponent from './MyComponent.svelte';
export default {
component: MyComponent,
};
// Custom function to emulate a pause
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
// Queries the element by it's role and fires the event
export const ExampleChangeEvent = {
play: async () => {
const dropdown = screen.getByRole('listbox');
await fireEvent.change(dropdown, { target: { value: 'One Item'} });
await sleep(2000);
await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
await sleep(2000);
await fireEvent.change(dropdown, {
target: { value: 'Yet another item' },
});
},
render: () => ({
Component: MyComponent,
}),
};
```