import { expect, test } from "../support/browser/strict-browser-test.ts";

test("boots and navigates the compact production shell", async ({ page }) => {
  await page.goto("/");
  await expect(page.getByRole("main")).toBeVisible();
  const menu = page.getByRole("button", { name: "메뉴", exact: true });
  await expect(menu).toHaveCSS("min-width", "44px");
  await menu.click();
  const navigation = page.getByRole("navigation", { name: "주요 탐색" });
  await expect(navigation).toBeVisible();
  // The drawer is a non-modal dialog, so page content stays in the
  // accessibility tree while it is open. Scope to the navigation and match the
  // whole name, or a route call to action on the page behind it also matches.
  await navigation
    .getByRole("link", { name: "UI 구성요소", exact: true })
    .click();
  await expect(page).toHaveURL(/\/examples\/ui$/);
  await expect(page.locator("html")).toHaveAttribute("data-build-id", "local-build");
  const overflow = await page.evaluate(
    () => document.documentElement.scrollWidth - window.innerWidth,
  );
  expect(overflow).toBeLessThanOrEqual(1);
});