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

test("wide application shell visual contract", async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 900 });
  await page.goto("/");
  await expect(page.getByRole("main")).toBeVisible();
  await expect(page).toHaveScreenshot("app-shell-wide-light.png", {
    fullPage: true,
  });
});

test("compact drawer and pseudo-locale visual contract", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto("/");
  await page.locator("#locale-preference").selectOption("en-XA");
  await page.locator(".app-shell__menu-button").click();
  await expect(page.locator(".ui-drawer")).toHaveJSProperty("open", true);
  await expect(page).toHaveScreenshot("app-shell-compact-pseudo-drawer.png", {
    fullPage: true,
  });
});

test("design-system gallery dark visual contract", async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 900 });
  await page.goto("/examples/ui");
  await page.locator("#theme-preference").selectOption("dark");
  await expect(page.getByRole("main")).toHaveScreenshot(
    "design-system-gallery-dark.png",
  );
});

test("loading empty error and access surfaces visual contract", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1280, height: 1100 });
  await page.goto("/examples/states");
  await expect(page.getByRole("main")).toHaveScreenshot(
    "state-surfaces-light.png",
  );
});

test("platform composition overview visual contract", async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 1100 });
  await page.goto("/examples/platform");
  await expect(
    page.locator("section[aria-labelledby='platform-capabilities-title']"),
  ).toBeVisible();
  await expect(page.getByRole("main")).toHaveScreenshot(
    "platform-overview-light.png",
  );
});