-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
/
basics.stories.ts
127 lines (111 loc) · 3.41 KB
/
basics.stories.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { global as globalThis } from '@storybook/global';
import {
expect,
fireEvent,
fn,
userEvent,
waitFor,
waitForElementToBeRemoved,
within,
} from '@storybook/test';
export default {
component: globalThis.Components.Form,
args: {
onSuccess: fn(),
},
globals: {
sb_theme: 'light',
},
};
export const Validation = {
play: async (context) => {
const { args, canvasElement, step } = context;
const canvas = within(canvasElement);
await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
await expect(args.onSuccess).not.toHaveBeenCalled();
},
};
export const Type = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('value'), 'foobar');
},
};
export const Step = {
play: async ({ step }) => {
await step('Enter value', Type.play);
},
};
export const TypeAndClear = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('value'), 'initial value');
await userEvent.clear(canvas.getByTestId('value'));
await userEvent.type(canvas.getByTestId('value'), 'final value');
},
};
export const Callback = {
play: async ({ args, canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Enter value', Type.play);
await step('Submit', async () => {
await fireEvent.click(canvas.getByRole('button'));
});
await expect(args.onSuccess).toHaveBeenCalled();
},
};
// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
// an explicit test here
export const SyncWaitFor = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Submit form', Callback.play);
await waitFor(() => canvas.getByText('Completed!!'));
},
};
export const AsyncWaitFor = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('Submit form', Callback.play);
await waitFor(async () => canvas.getByText('Completed!!'));
},
};
export const WaitForElementToBeRemoved = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
await step('SyncWaitFor play fn', SyncWaitFor.play);
await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
timeout: 2000,
});
},
};
export const WithLoaders = {
loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
play: async ({ step }) => {
await step('Submit form', Callback.play);
},
};
const UserEventSetup = {
play: async (context) => {
const { args, canvasElement, step } = context;
const user = userEvent.setup();
const canvas = within(canvasElement);
await step('Select and type on input using user-event v14 setup', async () => {
const input = canvas.getByRole('textbox');
await user.click(input);
await user.type(input, 'Typing ...');
});
await step('Tab and press enter on submit button', async () => {
await user.pointer([
{ keys: '[TouchA>]', target: canvas.getByRole('textbox') },
{ keys: '[/TouchA]' },
]);
await user.tab();
await user.keyboard('{enter}');
const submitButton = await canvas.findByRole('button');
await expect(submitButton).toHaveFocus();
await expect(args.onSuccess).toHaveBeenCalled();
});
},
};
export { UserEventSetup };