// handlers.js : décrit les réponses simulées, au plus près du comportement réel de l'API
import { http, HttpResponse } from "msw";

export const handlers = [
    http.get("/api/cours", () => {
        return HttpResponse.json([
            { id: 1, titre: "HTML" },
            { id: 2, titre: "CSS" },
        ]);
    }),

    http.post("/api/cours/:id/inscription", async ({ params, request }) => {
        const body = await request.json();
        // params.id : segment dynamique de l'URL interceptée
        return HttpResponse.json({ id: params.id, inscrit: true, ...body }, { status: 201 });
    }),

    http.get("/api/cours/:id", ({ params }) => {
        if (params.id === "999") {
            return new HttpResponse(null, { status: 404 }); // simuler un cas d'erreur réaliste
        }
        return HttpResponse.json({ id: params.id, titre: "HTML" });
    }),
];

// setupTests.js (Vitest/Jest) : démarre le serveur de mock pour toute la suite de tests
import { setupServer } from "msw/node";
import { handlers } from "./handlers";
import { afterAll, afterEach, beforeAll } from "vitest";

export const server = setupServer(...handlers);

beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
// "error" : toute requête NON mockée fait échouer le test -- évite les faux positifs silencieux

afterEach(() => server.resetHandlers()); // repart des handlers par défaut entre chaque test
afterAll(() => server.close());

// Le composant testé utilise un vrai fetch() -- MSW l'intercepte de façon transparente,
// sans que le code applicatif ne sache qu'il est testé
function ListeCours() {
    const [cours, setCours] = useState([]);
    const [chargement, setChargement] = useState(true);

    useEffect(() => {
        fetch("/api/cours")
            .then((r) => r.json())
            .then((data) => { setCours(data); setChargement(false); });
    }, []);

    if (chargement) return <p>Chargement...</p>;
    return <ul>{cours.map((c) => <li key={c.id}>{c.titre}</li>)}</ul>;
}

import { render, screen } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { server } from "./setupTests";
import { describe, it, expect } from "vitest";

describe("ListeCours", () => {
    it("affiche les cours renvoyés par l'API", async () => {
        render(<ListeCours />);

        expect(await screen.findByText("HTML")).toBeInTheDocument();
        expect(screen.getByText("CSS")).toBeInTheDocument();
    });

    it("gère une réponse d'erreur serveur", async () => {
        // override PONCTUEL du handler par défaut, pour CE test uniquement
        server.use(
            http.get("/api/cours", () => {
                return new HttpResponse(null, { status: 500 });
            })
        );

        render(<ListeCours />);

        expect(await screen.findByText(/erreur/i)).toBeInTheDocument();
    });
});

// MSW fonctionne aussi côté navigateur (dev/démo), via un Service Worker réel --
// même fichier de handlers réutilisé entre tests et environnement de développement
// browser.js
import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);
// worker.start() dans main.jsx, uniquement en développement