Le menu se referme — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 11)

Le menu se referme

Tests et mise en production · niveau 2

Énoncé

Au chapitre 9, l'en-tête referme le menu des téléphones quand on change de page. Écrire le test : ouvrir le menu, vérifier aria-expanded, naviguer vers le panier, vérifier de nouveau.

Corrigé


// Exercice 11.7 : le menu se referme au changement de page.
import { test, expect } from "vitest";
import { mount, flushPromises } from "@vue/test-utils";
import EnTete from "@/components/EnTete.vue";
import { preparer } from "./aide.js";

test("ouvrir le menu, puis naviguer", async () => {
  const { plugins, router } = await preparer("/");
  const entete = mount(EnTete, { global: { plugins } });
  const bouton = entete.find(".bouton-menu");
  await bouton.trigger("click");
  expect(bouton.attributes("aria-expanded")).toBe("true");
  await router.push("/panier");
  await flushPromises();
  expect(bouton.attributes("aria-expanded")).toBe("false");
});


 ✓ tests/ex7-menu.test.js (1 test)
   ✓ ouvrir le menu, puis naviguer