storybook/docs/snippets/web-components/my-component-play-function-with-clickevent.js.mdx
Kyle Gach b97d94e005 Address feedback
- Newline following filename comment
- Fix URLs in comments
- Ensure consistent usage of `ts` vs `tsx` language
2023-01-12 14:17:39 -07:00

32 lines
1.0 KiB
Plaintext

```js
// MyComponent.stories.js
import { fireEvent, userEvent, within } from '@storybook/testing-library';
export default {
title: 'ClickExamples',
component: 'demo-my-component',
};
/* See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
* to learn more about using the canvasElement to query the DOM
*/
export const ClickExample = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
// See https://storybook.js.org/docs/7.0/web-components/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
},
};
export const FireEventExample = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
// See https://storybook.js.org/docs/7.0/web-components/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await fireEvent.click(canvas.getByTestId('data-testid'));
},
};
```