Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit a3c9fb6

Browse files
yannbfyannbf
authoredJan 24, 2024
Merge pull request storybookjs#430 from storybookjs/yann/update-example-to-sb-8
Update internal example to Storybook 8
2 parents 2b22464 + ad09521 commit a3c9fb6

File tree

4 files changed

+990
-2136
lines changed

4 files changed

+990
-2136
lines changed
 

‎package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@
5454
"@babel/preset-react": "^7.18.6",
5555
"@babel/preset-typescript": "^7.18.6",
5656
"@storybook/addon-coverage": "^0.0.9",
57-
"@storybook/addon-essentials": "^7.5.3",
58-
"@storybook/addon-interactions": "^7.5.3",
59-
"@storybook/react": "^7.5.3",
60-
"@storybook/react-vite": "^7.5.3",
61-
"@storybook/test": "^7.5.3",
57+
"@storybook/addon-essentials": "next",
58+
"@storybook/addon-interactions": "next",
59+
"@storybook/react": "next",
60+
"@storybook/react-vite": "next",
61+
"@storybook/test": "next",
6262
"@types/jest": "^29.0.0",
6363
"@types/node": "^16.4.1",
6464
"@vitejs/plugin-react": "^4.0.3",
@@ -76,7 +76,7 @@
7676
"react-dom": "^17.0.1",
7777
"rimraf": "^3.0.2",
7878
"semver": "^7.5.4",
79-
"storybook": "^7.5.3",
79+
"storybook": "next",
8080
"ts-jest": "^29.0.0",
8181
"tsup": "^6.5.0",
8282
"typescript": "~4.9.4",

‎stories/atoms/Button.stories.tsx

Lines changed: 108 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import type { Meta, StoryObj } from '@storybook/react';
3-
import { expect } from '@storybook/test';
4-
import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/test';
3+
import { fn, expect, within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/test';
54

65
import { isTestRunner } from '../../.storybook/is-test-runner';
76

@@ -34,108 +33,123 @@ export const Secondary: Story = {
3433
},
3534
};
3635

37-
export const Demo = (args) => (
38-
<button type="button" onClick={() => args.onSubmit('clicked')}>
39-
Click
40-
</button>
41-
);
42-
Demo.argTypes = {
43-
onSubmit: { action: true },
44-
};
45-
Demo.play = async ({ args, canvasElement }) => {
46-
await userEvent.click(within(canvasElement).getByRole('button'));
47-
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
48-
};
49-
50-
export const FindBy = (args) => {
51-
const [isLoading, setIsLoading] = React.useState(true);
52-
React.useEffect(() => {
53-
setTimeout(() => setIsLoading(false), 500);
54-
}, []);
55-
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
56-
};
57-
FindBy.play = async ({ canvasElement }) => {
58-
const canvas = within(canvasElement);
59-
await canvas.findByRole('button');
60-
await expect(true).toBe(true);
61-
};
62-
63-
export const WaitFor = (args) => (
64-
<button type="button" onClick={() => setTimeout(() => args.onSubmit('clicked'), 100)}>
65-
Click
66-
</button>
67-
);
68-
WaitFor.argTypes = Demo.argTypes;
69-
WaitFor.play = async ({ args, canvasElement }) => {
70-
await userEvent.click(await within(canvasElement).findByText('Click'));
71-
await waitFor(async () => {
36+
export const Demo = {
37+
render: (args) => (
38+
<button type="button" onClick={() => args.onSubmit('clicked')}>
39+
Click
40+
</button>
41+
),
42+
args: {
43+
onSubmit: fn(),
44+
},
45+
play: async ({ args, canvasElement }) => {
46+
await userEvent.click(within(canvasElement).getByRole('button'));
7247
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
73-
await expect(true).toBe(true);
74-
});
48+
},
7549
};
7650

77-
export const WaitForElementToBeRemoved = () => {
78-
const [isLoading, setIsLoading] = React.useState(true);
79-
React.useEffect(() => {
80-
setTimeout(() => setIsLoading(false), 1500);
81-
}, []);
82-
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
83-
};
84-
WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
85-
const canvas = within(canvasElement);
86-
await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
87-
const button = await canvas.findByText('Loaded!');
88-
await expect(button).not.toBeNull();
51+
export const FindBy = {
52+
render: () => {
53+
const [isLoading, setIsLoading] = React.useState(true);
54+
React.useEffect(() => {
55+
setTimeout(() => setIsLoading(false), 500);
56+
}, []);
57+
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
58+
},
59+
play: async ({ canvasElement }) => {
60+
const canvas = within(canvasElement);
61+
await canvas.findByRole('button');
62+
await expect(true).toBe(true);
63+
},
8964
};
9065

91-
export const WithLoaders = (args, { loaded: { todo } }) => {
92-
return (
93-
<button type="button" onClick={args.onSubmit(todo.title)}>
94-
Todo: {todo.title}
66+
export const WaitFor = {
67+
render: (args) => (
68+
<button type="button" onClick={() => setTimeout(() => args.onSubmit('clicked'), 100)}>
69+
Click
9570
</button>
96-
);
71+
),
72+
args: Demo.args,
73+
play: async ({ args, canvasElement }) => {
74+
await userEvent.click(await within(canvasElement).findByText('Click'));
75+
await waitFor(async () => {
76+
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
77+
await expect(true).toBe(true);
78+
});
79+
},
9780
};
98-
WithLoaders.argTypes = Demo.argTypes;
99-
WithLoaders.loaders = [
100-
async () => {
101-
// long fake timeout
102-
await new Promise((resolve) => setTimeout(resolve, 2000));
103-
104-
return {
105-
todo: {
106-
userId: 1,
107-
id: 1,
108-
title: 'delectus aut autem',
109-
completed: false,
110-
},
111-
};
81+
82+
export const WaitForElementToBeRemoved = {
83+
render: () => {
84+
const [isLoading, setIsLoading] = React.useState(true);
85+
React.useEffect(() => {
86+
setTimeout(() => setIsLoading(false), 1500);
87+
}, []);
88+
return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
89+
},
90+
play: async ({ canvasElement }) => {
91+
const canvas = within(canvasElement);
92+
await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
93+
const button = await canvas.findByText('Loaded!');
94+
await expect(button).not.toBeNull();
11295
},
113-
];
114-
WithLoaders.play = async ({ args, canvasElement }) => {
115-
const canvas = within(canvasElement);
116-
const todoItem = await canvas.findByText('Todo: delectus aut autem');
117-
await userEvent.click(todoItem);
118-
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
11996
};
12097

121-
export const UserAgent = () => (
122-
<div>
123-
<p>
124-
<strong>isTestRunner:</strong> {isTestRunner().toString()}
125-
</p>
126-
<p>
127-
<strong>User agent:</strong> {window.navigator.userAgent}
128-
</p>
129-
</div>
130-
);
131-
UserAgent.play = async () => {
132-
if (isTestRunner()) {
133-
await expect(window.navigator.userAgent).toContain('StorybookTestRunner');
134-
}
98+
export const WithLoaders = {
99+
render: (args, { loaded: { todo } }) => {
100+
return (
101+
<button type="button" onClick={args.onSubmit(todo.title)}>
102+
Todo: {todo.title}
103+
</button>
104+
);
105+
},
106+
args: Demo.args,
107+
loaders: [
108+
async () => {
109+
// long fake timeout
110+
await new Promise((resolve) => setTimeout(resolve, 1000));
111+
112+
return {
113+
todo: {
114+
userId: 1,
115+
id: 1,
116+
title: 'delectus aut autem',
117+
completed: false,
118+
},
119+
};
120+
},
121+
],
122+
123+
play: async ({ args, canvasElement }) => {
124+
const canvas = within(canvasElement);
125+
const todoItem = await canvas.findByText('Todo: delectus aut autem');
126+
await userEvent.click(todoItem);
127+
await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
128+
},
135129
};
136-
UserAgent.parameters = {
137-
tests: {
138-
skip: true,
139-
disableSnapshots: true,
130+
131+
export const UserAgent = {
132+
render: () => (
133+
<div>
134+
<p>
135+
<strong>isTestRunner:</strong> {isTestRunner().toString()}
136+
</p>
137+
<p>
138+
<strong>User agent:</strong> {window.navigator.userAgent}
139+
</p>
140+
</div>
141+
),
142+
143+
play: async () => {
144+
if (isTestRunner()) {
145+
await expect(window.navigator.userAgent).toContain('StorybookTestRunner');
146+
}
147+
},
148+
149+
parameters: {
150+
tests: {
151+
skip: true,
152+
disableSnapshots: true,
153+
},
140154
},
141155
};

‎stories/expected-failures/Failure.stories.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ export default {
88
component: Page,
99
};
1010

11-
const Template = (args) => <Page {...args} />;
12-
1311
export const ComponentLogsErrors = () => {
1412
console.error('Console error with a failure');
1513
return <div>Hello world</div>;
@@ -19,14 +17,16 @@ export const ComponentThrowsErrors = () => {
1917
throw new Error('Component has a failure');
2018
};
2119

22-
export const PlayFnThrowsErrors = Template.bind({});
23-
PlayFnThrowsErrors.play = () => {
24-
throw new Error('Play function has a failure');
20+
export const PlayFnThrowsErrors = {
21+
play: () => {
22+
throw new Error('Play function has a failure');
23+
},
2524
};
2625

27-
export const PlayFnAssertionFails = Template.bind({});
28-
PlayFnAssertionFails.play = async ({ canvasElement }) => {
29-
const canvas = within(canvasElement);
30-
const unexistentButton = await canvas.getByRole('button', { name: /I do not exist/i });
31-
await userEvent.click(unexistentButton);
26+
export const PlayFnAssertionFails = {
27+
play: async ({ canvasElement }) => {
28+
const canvas = within(canvasElement);
29+
const unexistentButton = await canvas.getByRole('button', { name: /I do not exist/i });
30+
await userEvent.click(unexistentButton);
31+
},
3232
};

‎yarn.lock

Lines changed: 866 additions & 2026 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.