Skip to content

Commit a9eb4c1

Browse files
VassoDVassoD
committed
docs(react/fr/screen.md):Update the french doc based on the english version
1 parent ae7a763 commit a9eb4c1

File tree

1 file changed

+121
-103
lines changed

1 file changed

+121
-103
lines changed

‎content/intro-to-storybook/react/fr/screen.md

+121-103
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,15 @@ const store = configureStore({
113113
export default store;
114114
```
115115

116-
Maintenant que nous avons mis à jour notre store pour récupérer les données de l'API et que nous gérons les différents états de notre application, nous pouvons créer `InboxScreen.js` dans le dossier `src/components`:
116+
Maintenant que nous avons mis à jour notre store pour récupérer les données de l'API et que nous gérons les différents états de notre application, nous pouvons créer `InboxScreen.jsx` dans le dossier `src/components`:
117+
118+
```jsx:title=src/components/InboxScreen.jsx
119+
import { useEffect } from 'react';
117120

118-
```js:title=src/components/InboxScreen.js
119-
import React, { useEffect } from 'react';
120121
import { useDispatch, useSelector } from 'react-redux';
122+
121123
import { fetchTasks } from '../lib/store';
124+
122125
import TaskList from './TaskList';
123126

124127
export default function InboxScreen() {
@@ -154,32 +157,42 @@ export default function InboxScreen() {
154157

155158
Nous avons aussi besoin de changer le composant `App` pour rendre le `InboxScreen` (nous utiliserons à la fin un routeur pour choisir le bon écran, mais ne nous inquiétons pas de cela ici):
156159

157-
```diff:title=src/App.js
158-
- import logo from './logo.svg';
159-
- import './App.css';
160+
```diff:title=src/App.jsx
161+
- import { useState } from 'react'
162+
- import reactLogo from './assets/react.svg'
163+
- import viteLogo from '/vite.svg'
164+
- import './App.css'
165+
160166
+ import './index.css';
161167
+ import store from './lib/store';
162168

163169
+ import { Provider } from 'react-redux';
164170
+ import InboxScreen from './components/InboxScreen';
165171

166172
function App() {
173+
- const [count, setCount] = useState(0)
167174
return (
168175
- <div className="App">
169-
- <header className="App-header">
170-
- <img src={logo} className="App-logo" alt="logo" />
176+
- <div>
177+
- <a href="https://vitejs.dev" target="_blank">
178+
- <img src={viteLogo} className="logo" alt="Vite logo" />
179+
- </a>
180+
- <a href="https://reactjs.org" target="_blank">
181+
- <img src={reactLogo} className="logo react" alt="React logo" />
182+
- </a>
183+
- </div>
184+
- <h1>Vite + React</h1>
185+
- <div className="card">
186+
- <button onClick={() => setCount((count) => count + 1)}>
187+
- count is {count}
188+
- </button>
171189
- <p>
172-
- Edit <code>src/App.js</code> and save to reload.
190+
- Edit <code>src/App.jsx</code> and save to test HMR
173191
- </p>
174-
- <a
175-
- className="App-link"
176-
- href="https://reactjs.org"
177-
- target="_blank"
178-
- rel="noopener noreferrer"
179-
- >
180-
- Learn React
181-
- </a>
182-
- </header>
192+
- </div>
193+
- <p className="read-the-docs">
194+
- Click on the Vite and React logos to learn more
195+
- </p>
183196
- </div>
184197
+ <Provider store={store}>
185198
+ <InboxScreen />
@@ -191,11 +204,9 @@ export default App;
191204

192205
Cependant, c'est dans le rendu de la story dans Storybook que les choses deviennent intéressantes.
193206

194-
Comme nous l'avons vu précédemment, le composant `TaskList` est un composant **connecté** et se fonde sur le store Redux pour rendre ses tâches. Comme `InboxScreen` est aussi un composant connecté, nous allons faire un travail similaire et fournir un store à la story. Voici comment rendre les stories dans `InboxScreen.stories.js`:
195-
196-
```js:title=src/components/InboxScreen.stories.js
197-
import React from 'react';
207+
Comme nous l'avons vu précédemment, le composant `TaskList` est un composant **connecté** et se fonde sur le store Redux pour rendre ses tâches. Comme `InboxScreen` est aussi un composant connecté, nous allons faire un travail similaire et fournir un store à la story. Voici comment rendre les stories dans `InboxScreen.stories.jsx`:
198208

209+
```jsx:title=src/components/InboxScreen.stories.jsx
199210
import InboxScreen from './InboxScreen';
200211
import store from '../lib/store';
201212

@@ -205,12 +216,12 @@ export default {
205216
component: InboxScreen,
206217
title: 'InboxScreen',
207218
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
219+
tags: ['autodocs'],
208220
};
209221

210-
const Template = () => <InboxScreen />;
222+
export const Default = {};
211223

212-
export const Default = Template.bind({});
213-
export const Error = Template.bind({});
224+
export const Error = {};
214225
```
215226

216227
Nous pouvons constater une erreur dans la story de `error`. Au lieu d'afficher le bon état, il montre une liste de tâches. Une manière de corriger ce problème est de fournir une version simulée (qu'on appelle un "mock") de chaque étape, comme nous avons fait dans le chapitre précédent. Ici, pour nous aider à corriger cette erreur, nous allons utiliser une librairie de simulation d'API bien connue, grâce à un addon de Storybook.
@@ -234,85 +245,87 @@ Ensuite, nous devons mettre à jour `.storybook/preview.js` et les initialiser:
234245
```diff:title=.storybook/preview.js
235246
import '../src/index.css';
236247

237-
+ // Registers the msw addon
238-
+ import { initialize, mswDecorator } from 'msw-storybook-addon';
248+
// Registers the msw addon
249+
+ import { initialize, mswLoader } from 'msw-storybook-addon';
239250

240-
+ // Initialize MSW
251+
// Initialize MSW
241252
+ initialize();
242253

243-
+ // Provide the MSW addon decorator globally
244-
+ export const decorators = [mswDecorator];
245-
246254
//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
247-
export const parameters = {
248-
actions: { argTypesRegex: '^on[A-Z].*' },
249-
controls: {
250-
matchers: {
251-
color: /(background|color)$/i,
252-
date: /Date$/,
255+
/** @type { import('@storybook/react').Preview } */
256+
const preview = {
257+
parameters: {
258+
controls: {
259+
matchers: {
260+
color: /(background|color)$/i,
261+
date: /Date$/,
262+
},
253263
},
254264
},
265+
+ loaders: [mswLoader],
255266
};
267+
268+
export default preview;
256269
```
257270

258271
Enfin, mettez à jour les stories de `InboxScreen` en incluant un [paramètre](https://storybook.js.org/docs/react/writing-stories/parameters) qui simule les appels à l'API:
259272

260-
```diff:title=src/components/InboxScreen.stories.js
261-
import React from 'react';
262-
273+
```diff:title=src/components/InboxScreen.stories.jsx
263274
import InboxScreen from './InboxScreen';
275+
264276
import store from '../lib/store';
265-
+ import { rest } from 'msw';
277+
278+
+ import { http, HttpResponse } from 'msw';
279+
266280
+ import { MockedState } from './TaskList.stories';
281+
267282
import { Provider } from 'react-redux';
268283

269284
export default {
270285
component: InboxScreen,
271286
title: 'InboxScreen',
272287
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
288+
tags: ['autodocs'],
273289
};
274290

275-
const Template = () => <InboxScreen />;
276-
277-
export const Default = Template.bind({});
278-
+ Default.parameters = {
291+
export const Default = {
292+
+ parameters: {
279293
+ msw: {
280294
+ handlers: [
281-
+ rest.get(
282-
+ 'https://jsonplaceholder.typicode.com/todos?userId=1',
283-
+ (req, res, ctx) => {
284-
+ return res(ctx.json(MockedState.tasks));
285-
+ }
286-
+ ),
295+
+ http.get('https://jsonplaceholder.typicode.com/todos?userId=1', () => {
296+
+ return HttpResponse.json(MockedState.tasks);
297+
+ }),
287298
+ ],
288299
+ },
289-
+ };
300+
+ },
301+
};
290302

291-
export const Error = Template.bind({});
292-
+ Error.parameters = {
303+
export const Error = {
304+
+ parameters: {
293305
+ msw: {
294306
+ handlers: [
295-
+ rest.get(
296-
+ 'https://jsonplaceholder.typicode.com/todos?userId=1',
297-
+ (req, res, ctx) => {
298-
+ return res(ctx.status(403));
299-
+ }
300-
+ ),
307+
+ http.get('https://jsonplaceholder.typicode.com/todos?userId=1', () => {
308+
+ return new HttpResponse(null, {
309+
+ status: 403,
310+
+ });
311+
+ }),
301312
+ ],
302313
+ },
303-
+ };
314+
+ },
315+
};
304316
```
305317

306318
<div class="aside">
307-
💡 En complément, une autre approche valable serait de passer la donnée à travers la hiérarchie des composants, d'autant plus si vous utilisez <a href="http://graphql.org/">GraphQL</a>. C'est comment nous avons construit <a href="https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook">Chromatic</a> à travers plus de 800 stories.
319+
320+
💡 En complément, une autre approche valable serait de passer la donnée à travers la hiérarchie des composants, d'autant plus si vous utilisez [GraphQL](http://graphql.org/). C'est comment nous avons construit [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) à travers plus de 800 stories.
308321

309322
</div>
310323

311324
Regardez votre Storybook, et vous verrez que la story `error` fonctionne dorénavant comme prévue. MSW a intercepté notre appel à l'API et a fourni la réponse adéquate.
312325

313326
<video autoPlay muted playsInline loop>
314327
<source
315-
src="/intro-to-storybook/inbox-screen-with-working-msw-addon-optimized.mp4"
328+
src="/intro-to-storybook/inbox-screen-with-working-msw-addon-optimized-7.0.mp4"
316329
type="video/mp4"
317330
/>
318331
</video>
@@ -333,46 +346,42 @@ L'addon `@storybook/addon-interactions` nous aide à visualiser nos tests dans S
333346

334347
Regardons cela! Mettez à jour votre nouvelle story `InboxScreen`, et créer les interactions avec le composant en ajoutant le code suivant:
335348

336-
```diff:title=src/components/InboxScreen.stories.js
337-
import React from 'react';
338-
349+
```diff:title=src/components/InboxScreen.stories.jsx
339350
import InboxScreen from './InboxScreen';
340351

341352
import store from '../lib/store';
342-
import { rest } from 'msw';
353+
354+
import { http, HttpResponse } from 'msw';
355+
343356
import { MockedState } from './TaskList.stories';
357+
344358
import { Provider } from 'react-redux';
345359

346360
+ import {
347361
+ fireEvent,
348-
+ within,
349362
+ waitFor,
363+
+ within,
350364
+ waitForElementToBeRemoved
351-
+ } from '@storybook/testing-library';
365+
+ } from '@storybook/test';
352366

353367
export default {
354368
component: InboxScreen,
355369
title: 'InboxScreen',
356370
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
371+
tags: ['autodocs'],
357372
};
358373

359-
const Template = () => <InboxScreen />;
360-
361-
export const Default = Template.bind({});
362-
Default.parameters = {
363-
msw: {
364-
handlers: [
365-
rest.get(
366-
'https://jsonplaceholder.typicode.com/todos?userId=1',
367-
(req, res, ctx) => {
368-
return res(ctx.json(MockedState.tasks));
369-
}
370-
),
371-
],
374+
export const Default = {
375+
parameters: {
376+
msw: {
377+
handlers: [
378+
http.get('https://jsonplaceholder.typicode.com/todos?userId=1', () => {
379+
return HttpResponse.json(MockedState.tasks);
380+
}),
381+
],
382+
},
372383
},
373-
};
374-
375-
+ Default.play = async ({ canvasElement }) => {
384+
+ play: async ({ canvasElement }) => {
376385
+ const canvas = within(canvasElement);
377386
+ // Waits for the component to transition from the loading state
378387
+ await waitForElementToBeRemoved(await canvas.findByTestId('loading'));
@@ -383,28 +392,35 @@ Default.parameters = {
383392
+ // Simulates pinning the third task
384393
+ await fireEvent.click(canvas.getByLabelText('pinTask-3'));
385394
+ });
386-
+ };
387-
388-
export const Error = Template.bind({});
389-
Error.parameters = {
390-
msw: {
391-
handlers: [
392-
rest.get(
393-
'https://jsonplaceholder.typicode.com/todos?userId=1',
394-
(req, res, ctx) => {
395-
return res(ctx.status(403));
396-
}
397-
),
398-
],
395+
+ },
396+
};
397+
398+
export const Error = {
399+
parameters: {
400+
msw: {
401+
handlers: [
402+
http.get('https://jsonplaceholder.typicode.com/todos?userId=1', () => {
403+
return new HttpResponse(null, {
404+
status: 403,
405+
});
406+
}),
407+
],
408+
},
399409
},
400410
};
401411
```
402412

413+
<div class="aside">
414+
415+
💡 Le package `@storybook/test` remplace les packages de test `@storybook/jest` et `@storybook/testing-library`, offrant une taille de bundle plus petite et une API plus simple basée sur le package [Vitest](https://vitest.dev/).
416+
417+
</div>
418+
403419
Regardez la story `Default` . Cliquer sur le section `Interactions` pour voir la liste des interactions de votre fonction play de votre story.
404420

405421
<video autoPlay muted playsInline loop>
406422
<source
407-
src="/intro-to-storybook/storybook-interactive-stories-play-function-6-4.mp4"
423+
src="/intro-to-storybook/storybook-interactive-stories-play-function-7-0.mp4"
408424
type="video/mp4"
409425
/>
410426
</video>
@@ -440,9 +456,11 @@ yarn test-storybook --watch
440456
```
441457

442458
<div class="aside">
443-
💡 Les tests d'interactions avec la fonction play sont une manière fantastique de tester vos composants d'UI. Ils peuvent faire plein plus que ce que nous avons parcouru. Nous vous encourageons à lire la <a href="https://storybook.js.org/docs/react/writing-tests/interaction-testing">documentation officielle</a> pour apprendre plus à ce sujet.
444-
<br />
445-
Pour creuser encore plus les tests, vous pouvez lire <a href="/ui-testing-handbook">Le livre du test</a>. Il agrège les stratégies de tests utilisées par les équipes front reconnues afin de vous faire accélérer votre flux de développement.
459+
460+
💡 Les tests d'interactions avec la fonction play sont une manière fantastique de tester vos composants d'UI. Ils peuvent faire plein plus que ce que nous avons parcouru. Nous vous encourageons à lire la [documentation officielle](https://storybook.js.org/docs/writing-tests/component-testing) pour en savoir plus.
461+
462+
Pour creuser encore plus les tests, vous pouvez lire le [Guide des Tests](/ui-testing-handbook). Il agrège les stratégies de tests utilisées par les équipes front reconnues afin de vous faire accélérer votre flux de développement.
463+
446464
</div>
447465

448466
![Le lanceur de test Storybook a lancé tous les tests](/intro-to-storybook/storybook-test-runner-execution.png)
@@ -465,5 +483,5 @@ Nous avons commencé du bas avec une `Task`, puis progressé avec `TaskList`, et
465483
Nous n'avons pas encore terminé - le travail ne s'arrête pas à la construction de l'UI. Nous devons également veiller à ce qu'elle reste durable dans le temps.
466484

467485
<div class="aside">
468-
💡 N'oubliez pas de commiter vos changements avec git!
486+
💡 N'oubliez pas de commiter vos changements avec git !
469487
</div>

0 commit comments

Comments
 (0)