import { test, expect } from "./fixtures";

test.describe("menu mobile", () => {
  test("ouverture, navigation clavier, fermeture Échap", async ({ page, isMobile }) => {
    test.skip(!isMobile, "mobile uniquement");
    await page.goto("/");
    const opener = page.getByRole("button", { name: "Ouvrir le menu" });
    await expect(opener).toBeVisible();
    await opener.click();
    const dialog = page.getByRole("dialog");
    await expect(dialog).toBeVisible();
    // Le panneau doit couvrir tout l’écran (régression : confiné à l’en-tête par backdrop-filter)
    const box = await dialog.boundingBox();
    const vp = page.viewportSize()!;
    expect(box?.width).toBeGreaterThanOrEqual(vp.width - 1);
    expect(box?.height).toBeGreaterThanOrEqual(vp.height - 1);
    await expect(dialog.getByRole("link", { name: "Nos services" })).toBeVisible();
    await expect(page.getByRole("button", { name: "Fermer le menu" })).toBeFocused();
    await page.keyboard.press("Escape");
    await expect(dialog).toBeHidden();
    await expect(opener).toBeFocused();
    await opener.click();
    await dialog.getByRole("link", { name: "À propos" }).click();
    await expect(page).toHaveURL(/\/a-propos$/);
    await expect(page.getByRole("dialog")).toBeHidden();
  });
});

test.describe("responsive", () => {
  for (const width of [360, 390, 768, 1024, 1440, 1920]) {
    test(`aucun débordement horizontal à ${width} px`, async ({ page, isMobile }) => {
      test.skip(isMobile, "largeurs forcées sur le projet desktop");
      await page.setViewportSize({ width, height: 900 });
      for (const r of ["/", "/nous-joindre", "/services"]) {
        await page.goto(r);
        const overflow = await page.evaluate(
          () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
        );
        expect(overflow, `${r} @ ${width}`).toBeLessThanOrEqual(0);
      }
    });
  }
});