Storybook Interactions Step Function

// ...rest of story file

export const Submitted = {
  play: async ({ args, canvas, step, userEvent }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
};

// ...rest of story file

export const Submitted: Story = {
  play: async ({ args, canvas, step, userEvent }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
};

import preview from '../.storybook/preview';

import { MyComponent } from './my-component.component';

const meta = preview.meta({
  component: MyComponent,
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step, userEvent }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});

import preview from '../.storybook/preview';

import MyComponent from './MyComponent';

const meta = preview.meta({
  component: MyComponent,
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});

import preview from '../.storybook/preview';

import MyComponent from './MyComponent';

const meta = preview.meta({
  component: MyComponent,
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});

import preview from '../.storybook/preview';

import MyComponent from './MyComponent.vue';

const meta = preview.meta({
  component: MyComponent,
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});

import preview from '../.storybook/preview';

import MyComponent from './MyComponent.vue';

const meta = preview.meta({
  component: MyComponent,
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});

import preview from '../.storybook/preview';

const meta = preview.meta({
  component: 'my-component',
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});

import preview from '../.storybook/preview';

const meta = preview.meta({
  component: 'my-component',
});

export const Submitted = meta.story({
  play: async ({ args, canvas, step }) => {
    await step('Enter email and password', async () => {
      await userEvent.type(canvas.getByTestId('email'), '[email protected]');
      await userEvent.type(canvas.getByTestId('password'), 'supersecret');
    });

    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
});