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

// The persistent sidebar becomes an off-canvas drawer below 840px (see
// styles.css's compact-navigation media block) -- these tests only make
// sense at that width, so every test in this file pins a mobile viewport.
test.use({ viewport: { width: 390, height: 844 } });

test.describe("mobile navigation drawer", () => {
  test.beforeEach(async ({ page }) => {
    await loginAs(page, "hub-viewer");
    await page.goto("/");
  });

  test("opens via the hamburger trigger and exposes its state to assistive tech", async ({ page }) => {
    const trigger = page.getByRole("button", { name: "Open navigation" });
    await expect(trigger).toHaveAttribute("aria-expanded", "false");
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);

    await trigger.click();
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
    await expect(trigger).toHaveAttribute("aria-expanded", "true");
  });

  test("closes via its own close button", async ({ page }) => {
    await page.getByRole("button", { name: "Open navigation" }).click();
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
    await page.getByRole("button", { name: "Close navigation" }).click();
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
  });

  test("closes on Escape", async ({ page }) => {
    await page.getByRole("button", { name: "Open navigation" }).click();
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
    await page.keyboard.press("Escape");
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
  });

  test("closes on backdrop click", async ({ page }) => {
    await page.getByRole("button", { name: "Open navigation" }).click();
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
    // The backdrop spans the full viewport (position:fixed; inset:0), but
    // the open sidebar itself sits on top of its left ~240px and intercepts
    // pointer events there -- click well to the right of the drawer's own
    // width so the hit lands on the backdrop, not the drawer.
    await page.locator(".nav-backdrop").click({ position: { x: 350, y: 400 } });
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
  });

  test("closes automatically after navigating to another page", async ({ page }) => {
    await page.getByRole("button", { name: "Open navigation" }).click();
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
    await page.getByRole("link", { name: "Catalog", exact: true }).click();
    await expect(page).toHaveURL(/\/tools$/);
    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
  });
});