-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
rendering.stories.ts
46 lines (39 loc) · 1.65 KB
/
rendering.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
import globalThis from 'global';
import { PlayFunctionContext } from '@storybook/csf';
import { within, waitFor } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
export default {
component: globalThis.Components.Button,
args: {
children: 'Click me',
},
};
export const ForceReRender = {
play: async ({ canvasElement }: PlayFunctionContext) => {
const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
const button = await within(canvasElement).findByRole('button');
await button.focus();
await expect(button).toHaveFocus();
// By forcing the component to rerender, we reset the focus state
await channel.emit('forceReRender');
await waitFor(() => expect(button).not.toHaveFocus());
},
};
export const ChangeArgs = {
play: async ({ canvasElement, id }: PlayFunctionContext) => {
const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
const button = await within(canvasElement).findByRole('button');
await button.focus();
await expect(button).toHaveFocus();
// Vue3: https://github.com/storybookjs/storybook/issues/13913
// Svelte: https://github.com/storybookjs/storybook/issues/19205
if (['vue3', 'svelte'].includes(globalThis.storybookRenderer)) return;
// When we change the args to the button, it should not rerender
await channel.emit('updateStoryArgs', { storyId: id, updatedArgs: { children: 'New Text' } });
await within(canvasElement).findByText(/New Text/);
await expect(button).toHaveFocus();
await channel.emit('resetStoryArgs', { storyId: id });
await within(canvasElement).findByText(/Click me/);
await expect(button).toHaveFocus();
},
};