Skip to content

Commit

Permalink
Avoid step function in official-storybook for now
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghengeveld
ghengeveld committed Aug 10, 2022
1 parent 118fe17 commit 7970c89
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 76 deletions.
80 changes: 26 additions & 54 deletions ...ons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable jest/no-standalone-expect */
import { Meta, ComponentStoryObj } from '@storybook/react';
import { expect } from '@storybook/jest';
import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
Expand Down Expand Up @@ -26,30 +25,23 @@ export const Standard: CSF3Story = {

export const StandardEmailFilled = {
...Standard,
play: async ({ canvasElement, step }) => {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

await step('Enter email', async () => {
await fireEvent.change(canvas.getByTestId('email'), {
target: { value: '[email protected]' },
});
await fireEvent.change(canvas.getByTestId('email'), {
target: { value: '[email protected]' },
});
},
};

export const StandardEmailFailed = {
...Standard,
play: async ({ args, canvasElement, step }) => {
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);

await step('Enter email and password', async () => {
await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
});

await step('Submit form', async () => {
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
});
await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
await userEvent.click(canvas.getByRole('button', { name: /create account/i }));

await canvas.findByText('Please enter a correctly formatted email address');
await expect(args.onSubmit).not.toHaveBeenCalled();
Expand All @@ -58,17 +50,12 @@ export const StandardEmailFailed = {

export const StandardEmailSuccess = {
...Standard,
play: async ({ args, canvasElement, step }) => {
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);

await step('Enter email and password', async () => {
await userEvent.type(canvas.getByTestId('email'), '[email protected]');
await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
});

await step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
await userEvent.type(canvas.getByTestId('email'), '[email protected]');
await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
await userEvent.click(canvas.getByTestId('submit'));

await waitFor(async () => {
await expect(args.onSubmit).toHaveBeenCalledTimes(1);
Expand All @@ -86,13 +73,8 @@ export const StandardPasswordFailed = {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);

await context.step('Enter password', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdf');
});

await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});
await userEvent.type(canvas.getByTestId('password1'), 'asdf');
await userEvent.click(canvas.getByTestId('submit'));
},
};

Expand All @@ -117,12 +99,9 @@ export const VerificationPassword = {
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter password', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});

await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.click(canvas.getByTestId('submit'));
},
};

Expand All @@ -131,13 +110,10 @@ export const VerificationPasswordMismatch = {
play: async (context) => {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);
await context.step('Enter passwords', async () => {
await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
});
await context.step('Submit form', async () => {
await userEvent.click(canvas.getByTestId('submit'));
});

await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
await userEvent.click(canvas.getByTestId('submit'));
},
};

Expand All @@ -147,16 +123,12 @@ export const VerificationSuccess = {
const canvas = within(context.canvasElement);
await StandardEmailFilled.play(context);

await context.step('Enter passwords', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 });
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 });
});
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 });
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 });

await context.step('Submit form', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.click(canvas.getByTestId('submit'));
});
await new Promise((resolve) => setTimeout(resolve, 1000));
await userEvent.click(canvas.getByTestId('submit'));
},
};
43 changes: 21 additions & 22 deletions code/addons/interactions/src/examples/Examples.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable jest/no-standalone-expect */
import { Story, Meta } from '@storybook/react';
import { expect } from '@storybook/jest';
import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
Expand Down Expand Up @@ -101,26 +100,26 @@ WithLoaders.play = async ({ args, canvasElement }) => {
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
};

export const WithSteps: Story = ({ onSubmit }) => (
<button type="button" onClick={() => onSubmit('clicked')}>
Click
</button>
);
WithSteps.play = async ({ args, canvasElement, step }) => {
await step('Click button', async () => {
await userEvent.click(within(canvasElement).getByRole('button'));
// export const WithSteps: Story = ({ onSubmit }) => (
// <button type="button" onClick={() => onSubmit('clicked')}>
// Click
// </button>
// );
// WithSteps.play = async ({ args, canvasElement, step }) => {
// await step('Click button', async () => {
// await userEvent.click(within(canvasElement).getByRole('button'));

await step('Verify submit', async () => {
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
});
// await step('Verify submit', async () => {
// await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
// });

await step('Verify result', async () => {
await expect([{ name: 'John', age: 42 }]).toEqual(
expect.arrayContaining([
expect.objectContaining({ name: 'John' }),
expect.objectContaining({ age: 42 }),
])
);
});
});
};
// await step('Verify result', async () => {
// await expect([{ name: 'John', age: 42 }]).toEqual(
// expect.arrayContaining([
// expect.objectContaining({ name: 'John' }),
// expect.objectContaining({ age: 42 }),
// ])
// );
// });
// });
// };

0 comments on commit 7970c89

Please sign in to comment.