test: prove TechLog UI migration parity

2026-08-16 02:48:26 +09:00
parent c5c8b9423c
commit 6c2780b7a7
176 changed files with 2393 additions and 616 deletions
@@ -1,36 +1,36 @@
 import { expect, test } from "../support/browser/strict-browser-test.ts";
+import {
+  gotoTechLog,
+  horizontalOverflow,
+  TECH_LOG_CANONICAL_ROUTES,
+} from "../support/browser/tech-log-fixtures.ts";

-test("reflows the UI gallery at the 320px minimum without horizontal overflow", async ({
-  page,
-}) => {
-  await page.setViewportSize({ width: 320, height: 720 });
-  await page.goto("/examples/ui");
-  await expect(
-    page.getByRole("heading", { level: 1, name: "UI 구성요소" }),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "메뉴", exact: true }),
-  ).toBeVisible();
+for (const route of TECH_LOG_CANONICAL_ROUTES) {
+  for (const width of [360, 1440] as const) {
+    test(`${route.routeId} has no horizontal overflow at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await gotoTechLog(page, route.path);
+      const dimensions = await horizontalOverflow(page);
+      expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
+      if (route.routeId !== "NOT_FOUND") {
+        await expect(page.getByRole("main")).toBeVisible();
+        await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
+      } else {
+        await expect(page.getByText("Not Found", { exact: true })).toBeVisible();
+      }
+    });
+  }
+}

-  const viewport = await page.evaluate(() => ({
-    clientWidth: document.documentElement.clientWidth,
-    scrollWidth: document.documentElement.scrollWidth,
-  }));
-  expect(viewport.scrollWidth).toBeLessThanOrEqual(viewport.clientWidth);
-});
-
-test("keeps desktop navigation and two-column examples at wide viewports", async ({
-  page,
-}) => {
-  await page.setViewportSize({ width: 1440, height: 900 });
-  await page.goto("/examples/ui");
-
-  await expect(page.getByRole("navigation", { name: "주요 탐색" })).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "메뉴", exact: true }),
-  ).toBeHidden();
-  await expect(page.locator(".component-grid--two").first()).toHaveCSS(
-    "grid-template-columns",
-    /.+px .+px/,
+test("compact Public controls retain 44px targets", async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await gotoTechLog(page, "/");
+  await expect(page.locator("details.mobile-nav > summary")).toHaveCSS(
+    "min-height",
+    "44px",
+  );
+  await expect(page.getByRole("button", { name: "검색 열기" })).toHaveCSS(
+    "min-height",
+    "44px",
  );
 });