Le raccourci clavier

// Exercice 11.6 : le raccourci « / » de la recherche.
import { test, expect } from "vitest";
import { mount } from "@vue/test-utils";
import ChampRecherche from "@/components/ChampRecherche.vue";

function monter() {
  // attachTo : le composant est placé dans le document, sinon focus() n'a pas d'effet.
  return mount(ChampRecherche, {
    props: { id: "filtre", etiquette: "Rechercher", modelValue: "" },
    attachTo: document.body,
  });
}

test("« / » place le curseur dans la recherche", () => {
  const champ = monter();
  document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "/", bubbles: true }));
  expect(document.activeElement.id).toBe("filtre");
  champ.unmount();
});

test("« / » tapé dans un autre champ reste un caractère", () => {
  const champ = monter();
  const autre = document.createElement("input");
  document.body.append(autre);
  autre.focus();
  const touche = new KeyboardEvent("keydown", { key: "/", bubbles: true, cancelable: true });
  autre.dispatchEvent(touche);
  expect(document.activeElement).toBe(autre);
  expect(touche.defaultPrevented).toBe(false);
  autre.remove();
  champ.unmount();
});

 ✓ tests/ex6-raccourci.test.js (2 tests)
   ✓ « / » place le curseur dans la recherche
   ✓ « / » tapé dans un autre champ reste un caractère

Par défaut, mount construit le composant dans un élément détaché du document : focus() n'y a pas d'effet, et un événement envoyé à document.body ne traverse pas le composant. attachTo: document.body le place dans la page ; il faut alors le démonter à la fin du test pour ne pas gêner les suivants.