Ajouter des tests de non régression visuelle (et plus encore !) sur Storybook avec Chromatic

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 :

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 puis créez un repo "chromatic-tuto-elevenlabs". Sur votre terminal, lancez ces commandes (les commandes sont aussi indiquées préremplies sur Github) :

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 ! Nous allons désormais passer au moment que vous attendez tous : installer Chromatic !

Nous allons installer Chromatic en devDependency :

npm install -D chromatic

Ensuite, connectez-vous à Chromatic avec votre compte GitHub : 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 ? 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 ! Il nous reste une dernière étape avant de rentrer dans le vif du sujet : créer une Github Action !

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.

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) :

# .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 :

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 !