feat(analytics): instrumente le parcours simulateur

Émet les events Matomo ouverture/soumission/résultat/réinitialisation depuis la page simulateur.

Author: sbenfares

src/features/simulateurs/pages/SimulateursIndexPage.spec.tsx

@@ -0,0 +1,102 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+// jsdom n'implémente pas scrollIntoView (appelé par la page après évaluation).
+Element.prototype.scrollIntoView = vi.fn();
+
+const trackEvent = vi.fn();
+vi.mock("@shared/analytics", async () => {
+  const actual = await vi.importActual<typeof import("@shared/analytics")>("@shared/analytics");
+  return {
+    ...actual,
+    useMatomo: () => ({ trackEvent, trackPageView: vi.fn(), enableHeatmaps: vi.fn() }),
+  };
+});
+
+import { SimulateursIndexPage } from "./SimulateursIndexPage";
+import { MATOMO_EVENTS } from "@shared/analytics";
+
+function selectType(value: string) {
+  fireEvent.change(screen.getByLabelText(/Type d'établissement/i), { target: { value } });
+}
+
+function getForm(): HTMLElement {
+  const form = screen.getByRole("button", { name: /valider/i }).closest("form");
+  if (!form) throw new Error("formulaire introuvable");
+  return form;
+}
+
+// Remplit chaque select avec sa première option valide ; deux passes pour capter
+// le select conditionnel "statut" révélé après le choix de la zone.
+function fillAndSubmit(form: HTMLElement) {
+  for (let pass = 0; pass < 2; pass++) {
+    for (const select of within(form).queryAllByRole("combobox")) {
+      const option = within(select)
+        .getAllByRole("option")
+        .find((opt) => !(opt as HTMLOptionElement).disabled);
+      if (option)
+        fireEvent.change(select, { target: { value: (option as HTMLOptionElement).value } });
+    }
+  }
+  fireEvent.submit(form);
+}
+
+describe("SimulateursIndexPage — tracking Matomo", () => {
+  beforeEach(() => trackEvent.mockClear());
+
+  it("émet simulateur_ouvert au choix d'un type", () => {
+    render(
+      <MemoryRouter>
+        <SimulateursIndexPage />
+      </MemoryRouter>,
+    );
+    selectType("abattoir");
+    expect(trackEvent).toHaveBeenCalledWith(MATOMO_EVENTS.SIMULATEUR_OUVERT, { name: "abattoir" });
+  });
+
+  it("émet simulation_lancee puis resultat_affiche à une soumission valide", () => {
+    render(
+      <MemoryRouter>
+        <SimulateursIndexPage />
+      </MemoryRouter>,
+    );
+    selectType("abattoir");
+    trackEvent.mockClear();
+    fillAndSubmit(getForm());
+
+    const events = trackEvent.mock.calls.map((call) => call[0] as string);
+    const lancee = events.indexOf(MATOMO_EVENTS.SIMULATION_LANCEE);
+    const affiche = events.indexOf(MATOMO_EVENTS.RESULTAT_AFFICHE);
+    expect(lancee).toBeGreaterThanOrEqual(0);
+    expect(affiche).toBeGreaterThan(lancee);
+  });
+
+  it("émet reinitialisation au clic sur le bouton Réinitialiser", () => {
+    render(
+      <MemoryRouter>
+        <SimulateursIndexPage />
+      </MemoryRouter>,
+    );
+    selectType("abattoir");
+    trackEvent.mockClear();
+    fireEvent.click(screen.getByRole("button", { name: /réinitialiser/i }));
+    expect(trackEvent).toHaveBeenCalledWith(MATOMO_EVENTS.REINITIALISATION, { name: "abattoir" });
+  });
+
+  it("n'émet pas reinitialisation sur une simple saisie de champ", () => {
+    render(
+      <MemoryRouter>
+        <SimulateursIndexPage />
+      </MemoryRouter>,
+    );
+    selectType("abattoir");
+    trackEvent.mockClear();
+    const select = within(getForm()).getAllByRole("combobox")[0];
+    const option = within(select)
+      .getAllByRole("option")
+      .find((opt) => !(opt as HTMLOptionElement).disabled);
+    fireEvent.change(select, { target: { value: (option as HTMLOptionElement).value } });
+    expect(trackEvent).not.toHaveBeenCalledWith(MATOMO_EVENTS.REINITIALISATION, expect.anything());
+  });
+});

src/features/simulateurs/pages/SimulateursIndexPage.tsx

@@ -14,6 +14,7 @@ import {
 } from "@engine";
 import { Notice } from "@shared/components/Notice";
 import { PageTitle } from "@shared/components/PageTitle";
+import { useMatomo, MATOMO_EVENTS } from "@shared/analytics";
 import { AbattoirsForm } from "../abattoirs/components/AbattoirsForm";
 import { AbattoirsResult } from "../abattoirs/components/AbattoirsResult";
 import { EtablissementsForm } from "../etablissements/components/EtablissementsForm";
@@ -28,6 +29,7 @@ export function SimulateursIndexPage() {
     null,
   );
   const resultRef = useRef<HTMLDivElement>(null);
+  const { trackEvent } = useMatomo();
 
   // Scroll vers le panneau de résultats à chaque nouvelle évaluation.
   useEffect(() => {
@@ -37,21 +39,32 @@ export function SimulateursIndexPage() {
   }, [abattoirsResult, etablissementsResult]);
 
   function handleAbattoirsSubmit(inputs: AbattoirsInputs) {
+    trackEvent(MATOMO_EVENTS.SIMULATION_LANCEE, { name: "abattoir" });
     setAbattoirsResult(evaluateAbattoir(inputs));
+    trackEvent(MATOMO_EVENTS.RESULTAT_AFFICHE, { name: "abattoir" });
   }
 
   function handleEtablissementsSubmit(inputs: EtablissementsInputs) {
+    trackEvent(MATOMO_EVENTS.SIMULATION_LANCEE, { name: "autre" });
     setEtablissementsResult(evaluateEtablissements(inputs));
+    trackEvent(MATOMO_EVENTS.RESULTAT_AFFICHE, { name: "autre" });
   }
 
   function resetResults() {
     setAbattoirsResult(null);
     setEtablissementsResult(null);
   }
 
+  // Réinitialisation explicite (bouton du formulaire), distincte des resets implicites (saisie).
+  function handleReset() {
+    resetResults();
+    if (type !== "") trackEvent(MATOMO_EVENTS.REINITIALISATION, { name: type });
+  }
+
   function handleTypeChange(value: TypeEtablissement) {
     setType(value);
     resetResults();
+    if (value !== "") trackEvent(MATOMO_EVENTS.SIMULATEUR_OUVERT, { name: value });
   }
 
   return (
@@ -93,7 +106,7 @@ export function SimulateursIndexPage() {
               <div className="fr-mt-8w">
                 <AbattoirsForm
                   onSubmit={handleAbattoirsSubmit}
-                  onReset={resetResults}
+                  onReset={handleReset}
                   onChange={resetResults}
                 />
               </div>
@@ -103,7 +116,7 @@ export function SimulateursIndexPage() {
               <div className="fr-mt-8w">
                 <EtablissementsForm
                   onSubmit={handleEtablissementsSubmit}
-                  onReset={resetResults}
+                  onReset={handleReset}
                   onChange={resetResults}
                 />
               </div>