Retirer une ligne — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 11)

Retirer une ligne

Tests et mise en production · niveau 2

Énoncé

Tester le contenu du panier : avec deux livres dans le store, un clic sur le premier bouton « Retirer » doit laisser une seule ligne, mettre le total à jour et produire l'annonce « « Le Petit Prince » retiré du panier. ».

Corrigé


// Exercice 11.4 : retirer une ligne du panier.
import { test, expect } from "vitest";
import { mount } from "@vue/test-utils";
import PanierContenu from "@/components/PanierContenu.vue";
import { usePanierStore } from "@/stores/panier.js";
import { preparer, livre } from "./aide.js";

test("le bouton Retirer enlève la ligne et met le total à jour", async () => {
  const { plugins } = await preparer();
  const panier = usePanierStore();
  panier.ajouter(livre());
  panier.ajouter(livre({ isbn: "9782956300014", titre: "Programmation Java", prix: 32 }));
  const contenu = mount(PanierContenu, { global: { plugins } });
  expect(contenu.findAll("tbody tr")).toHaveLength(2);

  await contenu.find("tbody tr button").trigger("click"); // première ligne : le Petit Prince
  expect(contenu.findAll("tbody tr")).toHaveLength(1);
  expect(contenu.find(".total").text()).toBe("Total : 32,00 €");
  expect(panier.annonce).toBe("« Le Petit Prince » retiré du panier.");
});


 ✓ tests/ex4-retirer.test.js (1 test)
   ✓ le bouton Retirer enlève la ligne et met le total à jour