Skip to content

Commit

Permalink
chore(react): update test.md file to last english version chromaui#3
Browse files Browse the repository at this point in the history
  • Loading branch information
@xaviermarchal
xaviermarchal committed Jun 11, 2023
1 parent 294c42b commit 33cf2fb
Showing 1 changed file with 73 additions and 34 deletions.
107 changes: 73 additions & 34 deletions content/intro-to-storybook/react/fr/test.md
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
---
title: 'Tester les composantes UI'
tocTitle: 'Test'
title: 'Tests visuels'
tocTitle: 'Test visuel'
description: 'Apprenez à tester les composants UI'
---

Aucun tutoriel de Storybook ne serait complet sans test. Les tests sont essentiels pour créer des UI de haute qualité. Dans les systèmes modulaires, de minuscules modifications peuvent entraîner des régressions majeures. Jusqu'à présent, nous avons rencontré trois types de tests :
Aucun tutoriel de Storybook ne serait complet sans tests. Les tests sont essentiels pour créer des UI de haute qualité. Dans les systèmes modulaires, de minuscules modifications peuvent entraîner des régressions majeures. Jusqu'à présent, nous avons rencontré trois types de tests:

- **Tests manuels** qui consistent pour les développeurs à examiner manuellement un composant pour en vérifier l'exactitude. Ils nous aident à vérifier l'aspect d'un composant au fur et à mesure de sa construction.
- **Les captures instantanées** avec Storyshots capturent le balisage rendu d'un composant. Ils nous aident à nous tenir au courant des changements de balisage qui provoquent des erreurs de rendu et des avertissements.
- **Les tests unitaires** avec Jest vérifient que la sortie d'un composant reste la même avec une entrée fixe. Ils sont parfaits pour tester les qualités fonctionnelles d'un composant.
- **Les tests manuels** qui consistent pour les développeurs à examiner manuellement un composant pour en vérifier l'exactitude. Ils nous aident à vérifier l'aspect d'un composant au fur et à mesure de sa construction.

## "Mais est-ce que ça a l'air bien ?"
- **Les tests d'accessibilité**, avec l'addon a11y, vérifient que le composant est accessible à tout type de personne. Ils sont parfaits pour collecter de l'information sur comment les personnes avec des difficultés physique utilisent les composants.

Malheureusement, les méthodes de test mentionnées ci-dessus ne suffisent pas à prévenir les bugs de l'UI. Les interfaces utilisateur sont délicates à tester car la conception est subjective et nuancée. Les tests manuels sont, eh bien, manuels. Les tests instantanés déclenchent trop de faux positifs lorsqu'ils sont utilisés pour l'UI. Les tests unitaires au niveau pixel sont de mauvaise qualité. Une stratégie de test complète de Storybook comprend également des tests de régression visuelle.
- **Les tests d'interactions**, avec la fonction play, vérifient que le composant agit de la manière attendue quand nous interagissons avec lui. Ils sont parfaits pour tester les actions utilisateurs quand le composant est utilisé.

## "Mais est-ce que ça a l'air bien?"

Malheureusement, les méthodes de test mentionnées ci-dessus ne suffisent pas à prévenir les bogues de l'UI. Les interfaces utilisateur sont délicates à tester car la conception est subjective et nuancée. Les tests manuels sont, malheureusement, manuels. Les autres tests d'UI, comme les tests de snapshots, déclenchent trop de faux positifs, et les tests unitaires au niveau pixel sont de mauvaise qualité. Une stratégie de test complète de Storybook comprend également des tests de régression visuelle.

## Tests visuels pour Storybook

Les tests de régression visuelle, également appelés tests visuels, sont conçus pour détecter les changements d'apparence. Ils fonctionnent en prenant des captures d'écran de chaque story et en les comparant entre elles commit par commit pour faire ressortir les changements. C'est parfait pour vérifier des éléments graphiques comme la mise en page, la couleur, la taille et le contraste.
Les tests de régression visuelle, également appelés tests visuels, sont conçus pour détecter les changements d'apparence. Ils fonctionnent en prenant des captures d'écran de chaque story et en les comparant entre elles commit par commit pour faire ressortir les changements. Ils sont parfaits pour vérifier les éléments graphiques comme la mise en page, la couleur, la taille et le contraste.

<video autoPlay muted playsInline loop style="width:480px; margin: 0 auto;">
<source
Expand All @@ -25,39 +27,76 @@ Les tests de régression visuelle, également appelés tests visuels, sont conç
/>
</video>

Storybook est un outil fantastique pour les tests de régression visuelle car chaque story est essentiellement une spécification de test. Chaque fois que nous écrivons ou mettons à jour un story, nous obtenons gratuitement une spécification !
Storybook est un outil fantastique pour les tests de régression visuelle car chaque story est essentiellement une spécification de test. Chaque fois que nous écrivons ou mettons à jour une story, nous obtenons gratuitement une spécification!

Il existe un certain nombre d'outils pour les tests de régression visuelle. Nous recommandons [**Chromatic**](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook), un service de publication gratuit créé par les mainteneurs de Storybook qui effectue des tests visuels dans un cloud parallélisé. Il nous permet également de publier Storybook en ligne, comme nous l'avons vu dans le [chapitre précédent](/intro-to-storybook/react/fr/deploy/).

## Voir les modifications de l'UI

Les tests de régression visuelle reposent sur la comparaison des images du nouveau code UI rendu avec les images de base. Si une modification de l'UI est détectée, nous en sommes informés.

Voyons comment cela fonctionne en modifiant l'arrière-plan du composant `Tâche`.
Voyons comment cela fonctionne en modifiant l'arrière-plan du composant `Task`.

Commencez par créer une nouvelle branche pour ce changement :
Commencez par créer une nouvelle branche pour ce changement:

```shell
git checkout -b change-task-background
```

Modifiez `Task` comme suit:

```js:title=src/components/Task.js
<div className="title">
<input
type="text"
value={title}
readOnly={true}
placeholder="Input title"
style={{ background: 'red' }}
/>
</div>
Modifiez `src/components/Task.js` comme suit:

```diff:title=src/components/Task.js
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
return (
<div className={`list-item ${state}`}>
<label
htmlFor="checked"
aria-label={`archiveTask-${id}`}
className="checkbox"
>
<input
type="checkbox"
disabled={true}
name="checked"
id={`archiveTask-${id}`}
checked={state === "TASK_ARCHIVED"}
/>
<span
className="checkbox-custom"
onClick={() => onArchiveTask(id)}
/>
</label>

<label htmlFor="title" aria-label={title} className="title">
<input
type="text"
value={title}
readOnly={true}
name="title"
placeholder="Input title"
+ style={{ background: 'red' }}
/>
</label>

{state !== "TASK_ARCHIVED" && (
<button
className="pin-button"
onClick={() => onPinTask(id)}
id={`pinTask-${id}`}
aria-label={`pinTask-${id}`}
key={`pinTask-${id}`}
>
<span className={`icon-star`} />
</button>
)}
</div>
);
}
```

Cela donne une nouvelle couleur de fond pour l'objet.

![changement de fond de la tâche](/intro-to-storybook/chromatic-task-change.png)
![Changement de fond de la tâche](/intro-to-storybook/chromatic-task-change.png)

Ajoutez le fichier:

Expand All @@ -71,33 +110,33 @@ Faire un commit:
git commit -m "change task background to red"
```

Et envoyer les changements au repo à distance:
Et envoyer les changements au dépôt à distance:

```shell
git push -u origin change-task-background
```

Enfin, ouvrez votre dépôt GitHub et lancez un pull request pour la branche `change-task-background`.
Enfin, ouvrez votre dépôt GitHub et lancez une pull request pour la branche `change-task-background`.

![Créer un PR dans GitHub pour la tâche](/github/pull-request-background.png)
![Créer une PR dans GitHub pour la tâche](/github/pull-request-background.png)

Ajoutez un texte descriptif à votre pull request et cliquez sur `Create pull request`. Cliquez sur le bouton "🟡 UI Tests" en bas de la page.

![Créé un PR dans GitHub pour la tâche](/github/pull-request-background-ok.png)
![Créer une PR dans GitHub pour la tâche](/github/pull-request-background-ok.png)

Cela vous montrera les modifications de l'UI prises en compte par votre commit.

![Changements détectés par Chromatic](/intro-to-storybook/chromatic-catch-changes.png)

Il y a beaucoup de changements! La hiérarchie des composants où `Task` est un enfant de `TaskList et`Inbox` signifie une petite modification provoque des régressions majeures. C'est précisément pour cette raison que les développeurs ont besoin de tests de régression visuelle en plus des autres méthodes de test.
Il y a beaucoup de changements! La hiérarchie des composants où `Task` est un enfant de `TaskList` et `Inbox` signifie qu'une petite modification provoque des régressions majeures. C'est précisément pour cette raison que les développeurs ont besoin de tests de régression visuelle en plus des autres méthodes de test.

![UI minor tweaks major regressions](/intro-to-storybook/minor-major-regressions.gif)
![Un petit changement d'UI provoque des régressions majeures](/intro-to-storybook/minor-major-regressions.gif)

## Révision des changements

Les tests de régression visuelle permettent de s'assurer que les composants ne changent pas par accident. Mais c'est toujours à nous de déterminer si les changements sont intentionnels ou non.

Si un changement est intentionnel, nous devrons mettre à jour la base de référence afin que les futurs tests soient comparés à la dernière version du story. Si un changement n'est pas intentionnel, il doit être corrigé.
Si un changement est intentionnel, nous devrons mettre à jour les images de référence afin que les futurs tests soient comparés à la dernière version de la story. Si un changement n'est pas intentionnel, il doit être corrigé.

<video autoPlay muted playsInline loop style="width:480px; margin: 0 auto;">
<source
Expand All @@ -110,10 +149,10 @@ Comme les applications modernes sont construites à partir de composants, il est

## Fusionner les changements

Lorsque nous aurons terminé notre examen, nous serons prêts à fusionner les changements apportés à l'UI en toute confiance, sachant que les mises à jour n'introduiront pas accidentellement des bogues. Si vous aimez le nouveau fond "rouge", alors acceptez les changements, sinon revenez à l'état précédent.
Lorsque nous avons terminé notre revue des changements, nous sommes prêts à fusionner les changements apportés à l'UI en toute confiance, sachant que les mises à jour n'introduise pas accidentellement des bogues. Si vous aimez le nouveau fond `rouge`, alors acceptez les changements, sinon revenez à l'état précédent.

![Changements prêts à être fusionnés](/intro-to-storybook/chromatic-review-finished.png)

Storybook nous aide à **construire** des composants ; les tests nous aident à **les entretenir**. Les quatre types de tests de l'UI couverts dans ce tutoriel sont les tests visuels, captures instantanées, unitaires et de régression visuelle. Les trois derniers peuvent être automatisés en les ajoutant à un CI alors que nous venons de terminer la mise en place. Cela nous aide à distribuer les composants sans nous soucier des bogues clandestins. L'ensemble du déroulement des opérations est illustré ci-dessous.
Storybook nous aide à **construire** des composants; les tests nous aident à **les maintenir**. Les quatre types de tests de l'UI couverts dans ce tutoriel sont les tests visuels, d'accessibilité, d'interactions et de régression visuelle. Les trois derniers peuvent être automatisés en les ajoutant à une CI alors que nous venons de terminer la mise en place, et cela nous aide à délivrer des composants sans nous soucier des bogues clandestins. L'ensemble du déroulement des opérations est illustré ci-dessous.

![Déroulement des opérations du test de régression visuel](/intro-to-storybook/cdd-review-workflow.png)

0 comments on commit 33cf2fb

Please sign in to comment.