Attendre le serveur

// Exercice 11.5 : la fiche attend le serveur.
import { test, expect, vi, afterEach } from "vitest";
import { mount, flushPromises } from "@vue/test-utils";
import PageLivre from "@/pages/PageLivre.vue";
import { preparer, livre } from "./aide.js";

afterEach(() => vi.unstubAllGlobals());

async function monter(reponse) {
  vi.stubGlobal("fetch", vi.fn(async () => reponse));
  const { plugins } = await preparer("/livres/9782956300052");
  return mount(PageLivre, { props: { isbn: "9782956300052" }, global: { plugins } });
}

test("chargement, puis le livre", async () => {
  const fiche = await monter({ ok: true, status: 200, json: async () => livre() });
  expect(fiche.find("h1").text()).toBe("Chargement de la fiche…"); // avant la réponse
  await flushPromises();
  expect(fiche.find("h1").text()).toBe("Le Petit Prince");
  expect(fiche.find("dl").text()).toContain("25 en stock");
});

test("ISBN inconnu : message d'erreur", async () => {
  const fiche = await monter({ ok: false, status: 404, json: async () => ({}) });
  await flushPromises();
  expect(fiche.find("h1").text()).toBe("Livre introuvable");
  expect(fiche.find(".signature").text()).toContain("(Le serveur a répondu 404.)");
});

 ✓ tests/ex5-fiche.test.js (2 tests)
   ✓ chargement, puis le livre
   ✓ ISBN inconnu : message d'erreur

Juste après le montage, la requête est partie mais sa promesse n'est pas encore résolue : on voit l'état « chargement ». flushPromises laisse la fausse réponse arriver et useFetch mettre à jour ses ref. Le faux fetch ne vérifie pas l'adresse demandée ; on pourrait l'ajouter avec toHaveBeenCalledWith("/api/livres/9782956300052", …).