Skip to content
This repository was archived by the owner on Jan 31, 2024. It is now read-only.

Commit b9db5c9

Browse files
author
yannbf@gmail.com
committed
Update CHANGELOG.md [skip ci]
1 parent 87bb13b commit b9db5c9

File tree

1 file changed

+207
-0
lines changed

1 file changed

+207
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,210 @@
1+
# v1.0.0 (Mon Nov 22 2021)
2+
3+
:tada: This release contains work from new contributors! :tada:
4+
5+
Thanks for all your work!
6+
7+
:heart: Tom Coleman ([@tmeasday](https://github.com/tmeasday))
8+
9+
:heart: null[@jonniebigodes](https://github.com/jonniebigodes)
10+
11+
### Release Notes
12+
13+
#### Version 1.0.0 ([#60](https://github.com/storybookjs/testing-react/pull/60))
14+
15+
### Breaking changes
16+
17+
Updates Storybook peer dependency to 6.4
18+
19+
### Features
20+
21+
#### CSF3
22+
23+
Storybook 6.4 released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in `@storybook/testing-react`, but you have to match the requisites:
24+
25+
1 - Either your **story** has a `render` method or your **meta** contains a `component` property:
26+
27+
```js
28+
// Example 1: Meta with component property
29+
export default {
30+
title: 'Button',
31+
component: Button // <-- This is strictly necessary
32+
}
33+
34+
// Example 2: Story with render method:
35+
export const Primary = {
36+
render: (args) => <Button {...args}>
37+
}
38+
```
39+
40+
#### Play function
41+
42+
Storybook 6.4 also brings a new function called `play`, where you can write automated interactions to the story.
43+
44+
In `@storybook/testing-react`, the `play` function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
45+
46+
Consider the following example:
47+
48+
```tsx
49+
export const InputFieldFilled: Story<InputFieldProps> = {
50+
play: async ({ canvasElement }) => {
51+
const canvas = within(canvasElement);
52+
await userEvent.type(canvas.getByRole('textbox'), 'Hello world!');
53+
},
54+
};
55+
```
56+
57+
You can use the play function like this:
58+
59+
```tsx
60+
const { InputFieldFilled } = composeStories(stories);
61+
62+
test('renders with play function', async () => {
63+
const { container } = render(<InputFieldFilled />);
64+
65+
// pass container as canvasElement and play an interaction that fills the input
66+
await InputFieldFilled.play({ canvasElement: container });
67+
68+
const input = screen.getByRole('textbox') as HTMLInputElement;
69+
expect(input.value).toEqual('Hello world!');
70+
});
71+
```
72+
73+
#### Feature/run play function typed ([#57](https://github.com/storybookjs/testing-react/pull/57))
74+
75+
### Breaking changes
76+
77+
Updates Storybook peer dependency to 6.4
78+
79+
### Features
80+
81+
#### CSF3
82+
83+
Storybook 6.4 released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in `@storybook/testing-react`, but you have to match the requisites:
84+
85+
1 - Either your **story** has a `render` method or your **meta** contains a `component` property:
86+
87+
```js
88+
// Example 1: Meta with component property
89+
export default {
90+
title: 'Button',
91+
component: Button // <-- This is strictly necessary
92+
}
93+
94+
// Example 2: Story with render method:
95+
export const Primary = {
96+
render: (args) => <Button {...args}>
97+
}
98+
```
99+
100+
#### Play function
101+
102+
Storybook 6.4 also brings a new function called `play`, where you can write automated interactions to the story.
103+
104+
In `@storybook/testing-react`, the `play` function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
105+
106+
Consider the following example:
107+
108+
```tsx
109+
export const InputFieldFilled: Story<InputFieldProps> = {
110+
play: async ({ canvasElement }) => {
111+
const canvas = within(canvasElement);
112+
await userEvent.type(canvas.getByRole('textbox'), 'Hello world!');
113+
},
114+
};
115+
```
116+
117+
You can use the play function like this:
118+
119+
```tsx
120+
const { InputFieldFilled } = composeStories(stories);
121+
122+
test('renders with play function', async () => {
123+
const { container } = render(<InputFieldFilled />);
124+
125+
// pass container as canvasElement and play an interaction that fills the input
126+
await InputFieldFilled.play({ canvasElement: container });
127+
128+
const input = screen.getByRole('textbox') as HTMLInputElement;
129+
expect(input.value).toEqual('Hello world!');
130+
});
131+
```
132+
133+
#### feat: support CSF3 format ([#46](https://github.com/storybookjs/testing-react/pull/46))
134+
135+
### Features
136+
137+
138+
Storybook released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in @storybook/testing-react, but you have to match the requisites:
139+
140+
1 - Either your **story** has a `render` method or your **meta** contains a `component` property:
141+
142+
```js
143+
// Example 1: Meta with component property
144+
export default {
145+
title: 'Button',
146+
component: Button // <-- This is strictly necessary
147+
}
148+
149+
// Example 2: Story with render method:
150+
export const Primary = {
151+
render: (args) => <Button {...args}>
152+
}
153+
```
154+
155+
2 - For typescript users, you need to be using Storybook 6.4 or higher.
156+
157+
#### CSF3 - Interactions with play function
158+
159+
CSF3 also brings a new function called `play`, where you can write automated interactions to the story.
160+
161+
In @storybook/testing-react, the `play` function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
162+
163+
Consider the following example:
164+
165+
```tsx
166+
export const InputFieldFilled: Story<InputFieldProps> = {
167+
play: async () => {
168+
await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
169+
},
170+
};
171+
```
172+
173+
You can use the play function like this:
174+
175+
```tsx
176+
const { InputFieldFilled } = composeStories(stories);
177+
178+
test('renders with play function', async () => {
179+
render(<InputFieldFilled />);
180+
181+
// play an interaction that fills the input
182+
await InputFieldFilled.play!();
183+
184+
const input = screen.getByRole('textbox') as HTMLInputElement;
185+
expect(input.value).toEqual('Hello world!');
186+
});
187+
```
188+
189+
---
190+
191+
#### 💥 Breaking Change
192+
193+
- Feature/run play function typed [#57](https://github.com/storybookjs/testing-react/pull/57) ([@tmeasday](https://github.com/tmeasday) [@yannbf](https://github.com/yannbf))
194+
- feat: support CSF3 format [#46](https://github.com/storybookjs/testing-react/pull/46) ([@yannbf](https://github.com/yannbf))
195+
196+
#### 📝 Documentation
197+
198+
- Chore: (Docs) Updates the assets used in the documentation for the addon [#52](https://github.com/storybookjs/testing-react/pull/52) ([@jonniebigodes](https://github.com/jonniebigodes))
199+
200+
#### Authors: 3
201+
202+
- [@jonniebigodes](https://github.com/jonniebigodes)
203+
- Tom Coleman ([@tmeasday](https://github.com/tmeasday))
204+
- Yann Braga ([@yannbf](https://github.com/yannbf))
205+
206+
---
207+
1208
# v0.0.22 (Sun Aug 15 2021)
2209

3210
:tada: This release contains work from a new contributor! :tada:

0 commit comments

Comments
 (0)