Le compteur de l'en-tête — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 11)

Le compteur de l'en-tête

Tests et mise en production · niveau 2

Énoncé

Écrire un test qui monte l'en-tête de la Librairie, vérifie que le lien du panier affiche « Panier (0) », ajoute deux fois un livre par le store, puis vérifie « Panier (2) ». De quoi le composant a-t-il besoin pour être monté ? Pourquoi faut-il attendre avant la seconde vérification ?

Corrigé


// Exercice 11.3 : le compteur du panier dans l'en-tête.
import { test, expect } from "vitest";
import { mount } from "@vue/test-utils";
import EnTete from "@/components/EnTete.vue";
import { usePanierStore } from "@/stores/panier.js";
import { preparer, livre } from "./aide.js";

test("l'en-tête suit le nombre d'articles", async () => {
  const { plugins } = await preparer();
  const entete = mount(EnTete, { global: { plugins } });
  const lienPanier = () => entete.find("a[href='/panier']");
  expect(lienPanier().text()).toBe("Panier (0)");

  const panier = usePanierStore();
  panier.ajouter(livre());
  panier.ajouter(livre());
  await entete.vm.$nextTick(); // le DOM est mis à jour au tick suivant
  expect(lienPanier().text()).toBe("Panier (2)");
});


 ✓ tests/ex3-entete.test.js (1 test)
   ✓ l'en-tête suit le nombre d'articles

L'en-tête utilise le store du panier et des <RouterLink> : il lui faut une Pinia active et un routeur, que preparer fournit. La modification passe par le store, pas par un trigger : rien n'attend la mise à jour du DOM à notre place, d'où l'attente du tick suivant (la méthode nextTick de l'instance, ou celle qu'on importe de Vue).