// frontend/playwright/responsive.spec.ts
import { expect, test } from "@playwright/test";

const viewports = [
  { name: "mobile", w: 390, h: 844 },
  { name: "tablet", w: 834, h: 1112 },
  { name: "desktop", w: 1440, h: 900 },
];

for (const v of viewports) {
  test(`반응형(${v.name}): 가로 스크롤 없음 + 내비 접근 가능`, async ({ page }) => {
    await page.setViewportSize({ width: v.w, height: v.h });
    await page.goto("/tasks");
    await expect(page.locator(".kboard")).toBeVisible();
    const scrollW = await page.evaluate(() => document.documentElement.scrollWidth);
    const clientW = await page.evaluate(() => document.documentElement.clientWidth);
    expect(scrollW).toBeLessThanOrEqual(clientW + 1);
    // 모바일에서도 13항목 내비에 도달 가능(가로 스크롤 내비 유지)
    await expect(page.getByRole("navigation").getByRole("link", { name: /작업/ })).toBeVisible();
  });
}