import { test, expect, devices } from "@playwright/test";
import { makeEntry, mockApi, 登录 } from "../测试夹具";

async function expectNoHorizontalOverflow(page: import("@playwright/test").Page) {
  await expect.poll(async () => page.evaluate(() =>
    Math.max(document.documentElement.scrollWidth, document.body.scrollWidth) - window.innerWidth,
  )).toBeLessThanOrEqual(0);
}

test.describe("iOS 视口兼容性", () => {
  test("01-iPhone 窄视口的主要页面不产生横向滚动", async ({ browser }) => {
    const context = await browser.newContext({ ...devices["iPhone SE"] });
    const page = await context.newPage();
    await mockApi(page, { initialEntries: [makeEntry()] });
    await 登录(page);

    for (const path of ["/", "/stats", "/ledgers", "/entries/entry-lunch"]) {
      await page.goto(path);
      await expect(page.locator(".app-shell")).toBeVisible();
      await expectNoHorizontalOverflow(page);
    }

    await page.goto("/");
    await page.getByRole("button", { name: "记一笔" }).click();
    await expect(page.getByRole("region", { name: "快速记账" })).toBeVisible();
    await page.getByLabel("备注").click();
    await expect(page.getByLabel("备注")).toHaveCSS("font-size", "16px");
    await expectNoHorizontalOverflow(page);
    await context.close();
  });
});