/
rendering.stories.ts
42 lines (36 loc) · 1.45 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
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();
// 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();
},
};