fbredius/storybook

View on GitHub
docs/snippets/common/storybook-interactions-play-function.js.mdx

Summary

Maintainability
Test Coverage
```js
// MyForm.stories.js
import { expect } from '@storybook/jest';
import { userEvent, waitFor, within } from '@storybook/testing-library';
import { MyForm } from './MyForm'

export default {
  title: 'MyForm',
  component: MyForm,
  argTypes: {
    onSubmit: { action: true },
  },
};

const Template = (args) => <MyForm {...args} />;

const Submitted = Template.bind({});
Submitted.play = async ({ args, canvasElement }) => {
  const canvas = within(canvasElement);

  await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
  await userEvent.type(canvas.getByTestId('password'), 'supersecret');
  await userEvent.click(canvas.getByRole('button'));

  await waitFor(() => expect(args.onSubmit).toHaveBeenCalled());
};
```