feat: add tuto chromatic (#1079)

* feat: add tuto chromatic

* feat: changes for review

* Optimised images with calibre/image-actions

* feat: add node minimal version

* Update chromatic-in-ci.md

fix typos

* Update chromatic-use.md

fix typos

* Update initialization.md

fix typos

* Update introduction.md

fix typos

* Update other-tests.md

fix typos

---------

Co-authored-by: Alice Fauquet <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: ElevenTom <[email protected]>

_authors/afauquet.md

@@ -0,0 +1,6 @@
+---
+contentType: author
+username: afauquet
+name: Alice Fauquet
+---
+Frontend developer

_tutorials/fr/2024-03-27-chromatic/index.md

@@ -0,0 +1,26 @@
+---
+contentType: tutorial
+lang: fr
+date: '2024-03-27'
+slug: chromatic
+title: Ajouter des tests de non régression visuelle (et plus encore !) sur Storybook avec Chromatic
+excerpt: >-
+  Nous allons découvrir comment utiliser Chromatic en CI pour faire des tests de non régression visuelle et des tests d'interaction sur un Storybook pour être confiant à chaque nouvelle feature implémentée.
+categories:
+    - javascript
+keywords:
+    - chromatic
+    - storybook
+    - visual-testing
+    - react
+    - design system
+authors:
+    - afauquet
+steps:
+  - introduction
+  - initialization
+  - chromatic-in-ci
+  - chromatic-use
+  - other-tests
+  - conclusion
+---

_tutorials/fr/2024-03-27-chromatic/steps/chromatic-in-ci.md

@@ -0,0 +1,82 @@
+---
+contentType: tutorial-step
+tutorial: chromatic
+slug: chromatic-in-ci
+title: Utilisation de Chromatic en CI
+---
+
+## Utilisation de Chromatic en CI
+
+Nous allons commencer par **initialiser notre projet** et faire un premier commit.
+
+Utilisez les commandes suivantes pour créer **un premier commit** sur une branche principale appelée `main` :
+
+```bash
+git init
+git add .
+git commit -m "init commit"
+git branch -M main
+```
+
+Ensuite nous allons **créer un repo sur Github** et y envoyer notre premier commit. Rendez-vous sur cette page [https://github.com/new](https://github.com/new) puis créez un repo "chromatic-tuto-elevenlabs". Sur votre terminal, lancez ces commandes (les commandes sont aussi indiquées préremplies sur Github) :
+
+```bash
+git remote add origin https://github.com/<votre username>/<nom sur repo>.git
+git push -u origin main
+```
+
+Votre premier commit est maintenant sur Github&nbsp;! Nous allons désormais passer au moment que vous attendez tous&nbsp;: **installer Chromatic**&nbsp;!
+
+Nous allons installer Chromatic en devDependency&nbsp;:
+
+```bash
+npm install -D chromatic
+```
+
+Ensuite, connectez-vous à Chromatic avec votre compte GitHub&nbsp;: [https://www.chromatic.com/start](https://www.chromatic.com/start).
+Choisissez l’option `Choose from GitHub`, choisissez le repo que nous utilisons pour ce tuto puis récupérez et utilisez la ligne de commande sous "Publish your Storybook", elle va nous permettre de **faire le lien entre le projet et Chromatic**.
+
+À la fin du processus vous trouverez un lien qui vous donnera accès à une **version publiée** de votre Storybook. Pas mal, non&nbsp;? Chromatic vous affichera également **un token**, gardez-le de côté car on va s'en servir dans quelques instants.
+
+C’est très bien mais nous ce qu’on veut c’est utiliser Chromatic&nbsp;! Il nous reste une dernière étape avant de rentrer dans le vif du sujet&nbsp;: **créer une Github Action**&nbsp;!
+
+Tout d’abord on a besoin de **créer un secret** sur Github. Créez le secret `CHROMATIC_PROJECT_TOKEN` qui contient le token, que vous avez récupéré précédemment. [Pour créer un secret vous pouvez suivre cette documentation](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).
+
+Retournez sur votre IDE, créez un dossier `.github/workflows` puis un fichier `chromatic.yml` et collez-y ce template ([qu'on peut également retrouver sur le documentation de Chromatic](https://www.chromatic.com/docs/github-actions/))&nbsp;:
+
+```yml
+# .github/workflows/chromatic.yml
+
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache --check-cache
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+```
+
+Créez un commit et poussez-le sur le repo&nbsp;:
+
+```bash
+git add .
+git commit -m "GitHub action setup"
+git push origin main
+```
+
+Vous pouvez trouver le build dans la pipeline après le push.
+
+Nous allons maintenant voir **comment fonctionne Chromatic**&nbsp;!

_tutorials/fr/2024-03-27-chromatic/steps/conclusion.md

@@ -0,0 +1,13 @@
+---
+contentType: tutorial-step
+tutorial: chromatic
+slug: conclusion
+title: Conclusion
+---
+
+## Conclusion
+
+Eh bien ce tuto était un gros morceau !
+
+On a installé un projet avec Storybook et Chromatic, configuré et installé Chromatic en CI, réalisé toutes sortes de tests de non régression visuelle et d'interactions... J'espère que toutes ces étapes vous ont permis de mieux comprendre les avantages (et les défauts !) de Chromatic, et comment cet outil peut vous aider à être plus confiant à chaque nouvelle feature implémentée sur vos projets.
+

_tutorials/fr/2024-03-27-chromatic/steps/initialization.md

@@ -0,0 +1,45 @@
+---
+contentType: tutorial-step
+tutorial: chromatic
+slug: initialization
+title: Initialisation du projet
+---
+
+## Initialisation du projet (Vite + React + Storybook)
+
+Comme il est probable que vous utilisiez React, nous allons faire un nouveau projet en React appelé "chromatic-tuto-elevenlabs" sur lequel nous allons installer Storybook et React. Storybook comprendra automatiquement qu’il est sur un projet React.
+
+Sur un terminal, placez-vous dans le dossier dans lequel vous souhaitez **créer le projet**, puis lancez ces commandes :
+
+```bash
+npm create vite@latest chromatic-tuto-elevenlabs --template react-ts
+```
+
+Acceptez l’installation de `create-vite` puis sélectionnez en Framework `React` et en variant `Typescript` (ou `Javascript` si vous êtes plus à l’aise, ça ne change pas grand chose dans le cadre de ce tuto mais il faudra adapter les extraits de code en retirant les types). **Installez le projet** sans le lancer :
+
+```bash
+cd chromatic-tuto-elevenlabs
+npm install
+```
+
+Avant de lancer le projet nous allons **installer Storybook**. Comme dit précédemment, Storybook va automatiquement déterminer dans quel environnement il est installé.
+
+<div class="admonition important" markdown="1"><p class="admonition-title">Important</p>
+Une nouvelle version majeure de Storybook, la version 8, est sortie récement au moment où j'écris ce tuto. Pour être sûrs de ne pas se retrouver avec des bugs dûs à la nouveauté de cette version, je vous propose d'installer la dernière version 7 sur laquelle je suis sûre que tout fonctionne bien.
+</div>
+
+Lancez cette commande, puis acceptez l’installation du package `storybook`, puis un peu plus tard dans l’installation, installez le plugin ESLint recommandé si vous le souhaitez.
+
+```bash
+npx storybook@7 init
+```
+
+À la fin de l’installation un onglet s’ouvre par défaut à l’adresse `localhost:6006`. Si vous avez besoin de relancer Storybook plus tard, faites cette commande&nbsp;:
+
+```bash
+npm run storybook
+```
+
+Si vous n’avez pas l’habitude de Storybook je vous conseille de suivre le tour proposé par Storybook au premier lancement du projet (préparez-vous à recevoir une myriade de confettis colorés).
+
+Nous avons donc pour l’instant 3 stories&nbsp;: un bouton, un header et une page complète. Nous allons utiliser dans ce tuto le composant le plus simple&nbsp;: le bouton. Mais accrochez-vous parce qu’il va falloir **faire un peu de CI**...

_tutorials/fr/2024-03-27-chromatic/steps/introduction.md

@@ -0,0 +1,35 @@
+---
+contentType: tutorial-step
+tutorial: chromatic
+slug: introduction
+title: Introduction
+---
+
+## Qu'allons-nous faire ?
+
+Storybook se définit comme un "workshop" permettant de créer des composants et des pages en isolation. Concrètement, **c’est une interface sur laquelle on va pouvoir jouer avec les différents états d’un composant** pour vérifier s’il correspond bien au design attendu, trouver de la documentation et récupérer les props à utiliser pour différentes implémentations. C’est un outil qui est de plus en plus utilisé lors de la **création de Design Systems**, et qui peut être utilisé avec de plus en plus de frameworks bien qu’il soit initialement fait pour React. L’utilisation de Storybook peut être améliorée avec des plugins.
+
+Mais si on passe nos composants sur Storybook, **est-ce qu’il est possible de les y tester aussi directement ? La réponse est oui !** Un des outils à notre disposition pour cela, **c’est Chromatic**.
+
+Chromatic est développé par la même équipe que Storybook (d’ailleurs on peut remarquer que la chaîne officielle de Storybook sur Youtube s’est renommée Chromatic !). C’est un outil qu’on utilise dans la CI, qui permet de faire des **tests de non régression visuelle (mais pas que !)** sur les stories créées sur Storybook. Chromatic est un outil payant avec une version gratuite que nous allons utiliser et qui va nous permettre d'effectuer 5000 snapshots, ce qui est largement suffisant pour les besoins de ce tuto !
+
+<div class="admonition info" markdown="1"><p class="admonition-title">Note</p>
+Un plugin est actuellement en bêta au moment où j'écris ce tutoriel pour la version 8 de Storybook pour permettre de lancer Chromatic directement en local sans passer par la CI, mais pour l’instant nous allons passer par la CI uniquement.
+</div>
+
+Les tests de non régression visuelle sont parfaits dans le cas d’un Design System car ils permettent de **vérifier au pixel près si les modifications sur un composant n’affectent pas d’autres composants**, ce qui peut être très compliqué à remarquer sur des projets complexes. Dans ce tuto nous allons voir&nbsp;:
+
+-   comment **installer Storybook et Chromatic** sur un nouveau projet Vite + React
+-   comment **automatiser** Chromatic en CI
+-   comment **créer et tester visuellement** sur Chromatic un composant simple
+-   comment faire des **tests d’interaction** et les lancer avec Chromatic
+
+## Prérequis
+
+- Avoir NodeJs en version 16 ou plus installé sur votre machine (`node -v` pour vérifier)
+- Avoir un compte Github
+
+<div class="admonition note" markdown="1"><p class="admonition-title">Note</p>
+Avant de commencer je voudrais quand même vous avertir&nbsp;: Chromatic est un outil très pratique, qui n'a pas vraiment de concurrent aussi facile d'utilisation actuellement. À partir du moment où on commence à ajouter des tests de non régression visuelle il devient difficile de s'en passer pour le projet. Il est donc probable que votre projet devienne dépendant de Chromatic, et il est déjà arrivé qu'ils décident d'augmenter le tarif de certains services. Comme il n'y a actuellement pas de réel concurrent, utiliser Chromatic c'est malheureusement accepter cette dépendance.
+</div>
+