fbredius/storybook

import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';

import { AccountForm } from './AccountForm';

<Meta
  title="Addons/Interactions/Mdx"
  component={AccountForm}
  parameters={{ layout: 'centered', theme: 'light' }}
  argTypes={{
    onSubmit: { action: true },
  }}
/>

## AccountForm

<Canvas>
  <Story
    name="StandardEmailFilled"
    args={{
      passwordVerification: false,
    }}
    play={async (context) => {
      const { args, canvasElement } = context
      const canvas = within(canvasElement)
      
      await userEvent.type(canvas.getByTestId('email'), 'username@email.com')
      await userEvent.type(canvas.getByTestId('password1'), 'thepassword')
      await userEvent.click(canvas.getByRole('button', { name: /create account/i }))
      expect(args.onSubmit).not.toHaveBeenCalled()
    }}/>
</Canvas>