Quitter une commande commencée — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 12)

Quitter une commande commencée

Projet : la Librairie en application Vue · niveau 2

Énoncé

Si l'utilisateur a commencé à remplir le formulaire de commande et clique sur un lien du menu, on veut lui demander confirmation avant de quitter la page, sauf si la commande a déjà été envoyée. Écrire la garde, et un test qui remplace window.confirm.

Corrigé

Dans le <script setup> de la page de commande, avec onBeforeRouteLeave importé de vue-router :


// Quitter la page avec un formulaire commencé et non envoyé : on demande confirmation.
onBeforeRouteLeave(() => {
  const commence = commande.nom !== "" || commande.courriel !== "";
  if (commence && !reponse.value) {
    return window.confirm("Votre commande n’est pas envoyée. Quitter quand même ?");
  }
});


  const reponses = [false, true];
  const confirmer = vi.fn(() => reponses.shift());
  vi.stubGlobal("confirm", confirmer);
  await router.push("/");
  console.info("refus     → on reste sur", router.currentRoute.value.fullPath);
  await router.push("/");
  console.info("acceptation → on arrive sur", router.currentRoute.value.fullPath);
  console.info("question posée :", confirmer.mock.calls[0][0]);
  expect(confirmer).toHaveBeenCalledTimes(2);
});


refus     → on reste sur /commande-ex6
acceptation → on arrive sur /
question posée : Votre commande n’est pas envoyée. Quitter quand même ?

Une garde de composant qui renvoie false annule la navigation : l'adresse ne change pas. window.confirm bloque la page et ne se met pas en forme ; une vraie application ouvrirait sa propre fenêtre modale (chapitre 7), la garde attendant alors une promesse.