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
@@ -0,0 +1,281 @@
+// @ts-nocheck -- standalone evidence runner executed directly with tsx.
+import { createRequire } from "node:module";
+import { mkdir, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+import { chromium } from "@playwright/test";
+
+import {
+  TECH_LOG_BREAKPOINT_WIDTHS,
+  TECH_LOG_CANONICAL_ROUTES,
+  TECH_LOG_FIXED_TIME,
+  TECH_LOG_STUDIO_STATE_PATHS,
+  TECH_LOG_UNKNOWN_PUBLIC_PATHS,
+} from "./tech-log-fixtures.ts";
+
+const require = createRequire(import.meta.url);
+const { PNG } = require(
+  resolve("node_modules/.pnpm/playwright-core@1.62.0/node_modules/playwright-core/lib/utilsBundle.js"),
+);
+
+const sourceBaseUrl = process.env.TECH_LOG_SOURCE_URL ?? "http://127.0.0.1:4175";
+const targetBaseUrl = process.env.TECH_LOG_TARGET_URL ?? "http://127.0.0.1:4174";
+const outputPath = process.env.TECH_LOG_PARITY_OUTPUT ?? "artifacts/quality/tech-log-source-parity.json";
+const fixedDate = new Date(TECH_LOG_FIXED_TIME);
+const noMotionCss = `
+  *, *::before, *::after {
+    animation-delay: 0s !important;
+    animation-duration: 0s !important;
+    caret-color: transparent !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
+`;
+
+const allCases = [
+  ...TECH_LOG_CANONICAL_ROUTES.flatMap(({ routeId, path }) =>
+    [360, 1440].map((width) => ({ name: `${routeId}-${width}`, path, width }))),
+  ...TECH_LOG_BREAKPOINT_WIDTHS.map((width) => ({
+    name: `TECH_LOG_HOME-BREAKPOINT-${width}`,
+    path: "/",
+    width,
+  })),
+  ...TECH_LOG_STUDIO_STATE_PATHS.map(([state, path]) => ({
+    name: `TECH_LOG_STUDIO_STATE-${state}`,
+    path,
+    width: 1440,
+  })),
+  ...TECH_LOG_UNKNOWN_PUBLIC_PATHS.flatMap(([route, path]) =>
+    [360, 1440].map((width) => ({
+      name: `TECH_LOG_UNKNOWN_${route.toUpperCase().replaceAll("-", "_")}-${width}`,
+      path,
+      width,
+    }))),
+  { name: "TECH_LOG_SEARCH_DIALOG", path: "/", width: 390, action: "search-dialog" },
+  { name: "TECH_LOG_STUDIO_MOBILE_MENU", path: "/studio", width: 390, action: "studio-menu" },
+  {
+    name: "TECH_LOG_STUDIO_IMMEDIATE_PREVIEW",
+    path: "/studio/documents/11111111-1111-4111-8111-111111111111/edit",
+    width: 1440,
+    action: "immediate-preview",
+  },
+  {
+    name: "TECH_LOG_STUDIO_DIRTY_DIALOG",
+    path: "/studio/documents/11111111-1111-4111-8111-111111111111/edit",
+    width: 1440,
+    action: "dirty-dialog",
+  },
+  {
+    name: "TECH_LOG_STUDIO_CURRENT_PREVIEW_CREATED",
+    path: "/studio/documents/11111111-1111-4111-8111-111111111113/preview",
+    width: 1440,
+    action: "create-preview",
+  },
+  {
+    name: "TECH_LOG_STUDIO_UNPUBLISH_DIALOG",
+    path: "/studio/publications",
+    width: 1440,
+    action: "unpublish-dialog",
+  },
+  {
+    name: "TECH_LOG_STUDIO_WARNING_ACKNOWLEDGED",
+    path: "/studio/documents/11111111-1111-4111-8111-111111111116/validation",
+    width: 1440,
+    action: "warning-acknowledged",
+  },
+];
+const caseFilter = process.env.TECH_LOG_PARITY_CASE;
+const cases = caseFilter
+  ? allCases.filter(({ name }) => name.includes(caseFilter))
+  : allCases;
+const diagnosticDirectory = process.env.TECH_LOG_PARITY_DIAGNOSTICS ?? "/tmp/techlog-parity-diagnostics";
+
+async function interact(page, action) {
+  if (action === "search-dialog") {
+    await page.getByRole("button", { name: "검색 열기" }).click();
+  } else if (action === "studio-menu") {
+    await page.getByRole("button", { name: "Studio 메뉴 열기" }).click();
+  } else if (action === "immediate-preview") {
+    await page.getByRole("tab", { name: "즉시 미리보기" }).click();
+  } else if (action === "dirty-dialog") {
+    await page.getByLabel("요약").fill("저장하지 않은 시각 검증 변경");
+    await page.getByRole("link", { name: "게시 기록", exact: true }).first().click();
+  } else if (action === "create-preview") {
+    await page.getByRole("button", { name: "Public Preview 만들기" }).click();
+    await page.getByText("현재 저장 버전의 Public Preview입니다.").waitFor();
+  } else if (action === "unpublish-dialog") {
+    await page.getByRole("button", { name: /컬렉션 Fetch Join과 페이징은 왜 충돌하는가 게시 취소/ }).click();
+  } else if (action === "warning-acknowledged") {
+    await page.getByRole("button", { name: "검증하기" }).click();
+    await page.getByText("경고를 확인하고 Preview를 만들 수 있습니다").waitFor();
+    await page.getByRole("link", { name: "Public Preview 만들기" }).click();
+    await page.getByRole("button", { name: "Public Preview 만들기" }).click();
+    await page.getByText("현재 저장 버전의 Public Preview입니다.").waitFor();
+    await page.getByRole("link", { name: "게시 준비로 이동" }).click();
+    await page.getByRole("checkbox").check();
+    await page.getByRole("button", { name: /게시$/ }).waitFor();
+  }
+}
+
+async function settle(page, baseUrl, parityCase) {
+  await page.setViewportSize({ width: parityCase.width, height: 1000 });
+  await page.clock.setFixedTime(fixedDate);
+  await page.goto(new URL(parityCase.path, baseUrl).href, { waitUntil: "networkidle" });
+  await page.locator("body").waitFor({ state: "visible" });
+  await page.evaluate(async () => document.fonts.ready);
+  await page.addStyleTag({ content: noMotionCss });
+  await interact(page, parityCase.action);
+  await page.evaluate(async () => document.fonts.ready);
+}
+
+async function projection(page) {
+  return page.evaluate(() => {
+    const normalizeReference = (value) => value
+      .split(" ")
+      .map((token) => token.replace(/^_[rR].*?_(?=-|$)/, "<generated-id>"))
+      .join(" ");
+    const attributes = (element) => Object.fromEntries(
+      [...element.attributes]
+        .filter(({ name }) => name === "role" || name.startsWith("aria-"))
+        .map(({ name, value }) => [name, normalizeReference(value)])
+        .sort(([left], [right]) => left.localeCompare(right)),
+    );
+    return [...document.querySelectorAll("header, main, footer, dialog")].map((element) => ({
+      tag: element.tagName.toLowerCase(),
+      className: [...element.classList].map((name) => name.replace(/^_([A-Za-z0-9]+)_[A-Za-z0-9]+_(\d+)$/, "_$1_<generated-module>_$2")).sort().join(" "),
+      text: element.textContent?.replace(/\s+/g, " ").trim() ?? "",
+      aria: attributes(element),
+      descendants: [...element.querySelectorAll("[role], [aria-label], [aria-labelledby], [aria-describedby], [aria-current], [aria-expanded], [aria-controls]")]
+        .map((child) => ({
+          tag: child.tagName.toLowerCase(),
+          className: [...child.classList].map((name) => name.replace(/^_([A-Za-z0-9]+)_[A-Za-z0-9]+_(\d+)$/, "_$1_<generated-module>_$2")).sort().join(" "),
+          text: child.textContent?.replace(/\s+/g, " ").trim() ?? "",
+          aria: attributes(child),
+        })),
+    }));
+  });
+}
+
+async function layoutProjection(page) {
+  return page.evaluate(() => [...document.querySelectorAll("header, main, main *, footer, dialog, .studio-app *")].map((element) => {
+    const box = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    return {
+      tag: element.tagName.toLowerCase(),
+      className: [...element.classList].sort().join(" "),
+      top: box.top,
+      left: box.left,
+      width: box.width,
+      height: box.height,
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      lineHeight: style.lineHeight,
+      margin: style.margin,
+      padding: style.padding,
+    };
+  }));
+}
+
+function pixelDifference(sourceBuffer, targetBuffer) {
+  const source = PNG.sync.read(sourceBuffer);
+  const target = PNG.sync.read(targetBuffer);
+  if (source.width !== target.width || source.height !== target.height) {
+    return { pixels: null, sourceSize: [source.width, source.height], targetSize: [target.width, target.height] };
+  }
+  let pixels = 0;
+  for (let offset = 0; offset < source.data.length; offset += 4) {
+    if (
+      source.data[offset] !== target.data[offset] ||
+      source.data[offset + 1] !== target.data[offset + 1] ||
+      source.data[offset + 2] !== target.data[offset + 2] ||
+      source.data[offset + 3] !== target.data[offset + 3]
+    ) pixels += 1;
+  }
+  return { pixels, sourceSize: [source.width, source.height], targetSize: [target.width, target.height] };
+}
+
+const browser = await chromium.launch();
+const contextOptions = {
+  colorScheme: "light",
+  deviceScaleFactor: 1,
+  locale: "ko-KR",
+  reducedMotion: "reduce",
+  serviceWorkers: "block",
+  timezoneId: "Asia/Seoul",
+};
+const sourceContext = await browser.newContext(contextOptions);
+const targetContext = await browser.newContext(contextOptions);
+const results = [];
+
+try {
+  for (const parityCase of cases) {
+    const sourcePage = await sourceContext.newPage();
+    const targetPage = await targetContext.newPage();
+    const sourceErrors = [];
+    const targetErrors = [];
+    for (const [page, errors] of [[sourcePage, sourceErrors], [targetPage, targetErrors]]) {
+      page.on("console", (message) => { if (message.type() === "error") errors.push(`console: ${message.text()}`); });
+      page.on("pageerror", (error) => errors.push(`pageerror: ${error.message}`));
+      page.on("requestfailed", (request) => errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText ?? ""}`));
+    }
+    await Promise.all([
+      settle(sourcePage, sourceBaseUrl, parityCase),
+      settle(targetPage, targetBaseUrl, parityCase),
+    ]);
+    const [sourceShot, targetShot, sourceDom, targetDom, sourceLayout, targetLayout, sourceFonts, targetFonts] = await Promise.all([
+      sourcePage.screenshot({ fullPage: true }),
+      targetPage.screenshot({ fullPage: true }),
+      projection(sourcePage),
+      projection(targetPage),
+      layoutProjection(sourcePage),
+      layoutProjection(targetPage),
+      sourcePage.evaluate(() => [...document.fonts].map(({ family, status }) => ({ family, status })).filter(({ family }) => /Pretendard|IBM Plex Mono/.test(family))),
+      targetPage.evaluate(() => [...document.fonts].map(({ family, status }) => ({ family, status })).filter(({ family }) => /Pretendard|IBM Plex Mono/.test(family))),
+    ]);
+    const pixel = pixelDifference(sourceShot, targetShot);
+    const domEqual = JSON.stringify(sourceDom) === JSON.stringify(targetDom);
+    const fontsEqual = JSON.stringify(sourceFonts) === JSON.stringify(targetFonts);
+    const isPlainNotFound =
+      parityCase.name.includes("NOT_FOUND") || parityCase.name.includes("UNKNOWN");
+    const expectsSourceNotFoundResponse =
+      isPlainNotFound || parityCase.path.includes("unknown");
+    const expectedNotFoundConsole = expectsSourceNotFoundResponse
+      ? (message) => message === "console: Failed to load resource: the server responded with a status of 404 (Not Found)"
+      : () => false;
+    const unexplainedSourceErrors = sourceErrors.filter((message) => !expectedNotFoundConsole(message));
+    const unexplainedTargetErrors = targetErrors.filter((message) => !expectedNotFoundConsole(message));
+    const fontContractApplies = !isPlainNotFound;
+    const passed = pixel.pixels === 0 && domEqual && (!fontContractApplies || fontsEqual) && unexplainedSourceErrors.length === 0 && unexplainedTargetErrors.length === 0;
+    if (!passed) {
+      await mkdir(diagnosticDirectory, { recursive: true });
+      const stem = parityCase.name.toLowerCase().replace(/[^a-z0-9-]+/g, "-");
+      await Promise.all([
+        writeFile(resolve(diagnosticDirectory, `${stem}-source.png`), sourceShot),
+        writeFile(resolve(diagnosticDirectory, `${stem}-target.png`), targetShot),
+        writeFile(resolve(diagnosticDirectory, `${stem}-dom.json`), `${JSON.stringify({ sourceDom, targetDom, sourceLayout, targetLayout }, null, 2)}\n`),
+      ]);
+    }
+    results.push({ name: parityCase.name, path: parityCase.path, width: parityCase.width, action: parityCase.action ?? null, pixel, domEqual, fontsEqual, fontContractApplies, sourceFonts, targetFonts, sourceErrors, targetErrors, unexplainedSourceErrors, unexplainedTargetErrors, passed });
+    console.log(`${passed ? "PASS" : "FAIL"} ${parityCase.name} pixels=${pixel.pixels ?? "SIZE"} dom=${domEqual} fonts=${fontContractApplies ? fontsEqual : "source-plain-text"} errors=${unexplainedSourceErrors.length}/${unexplainedTargetErrors.length}`);
+    await Promise.all([sourcePage.close(), targetPage.close()]);
+  }
+} finally {
+  await Promise.all([sourceContext.close(), targetContext.close()]);
+  await browser.close();
+}
+
+const evidence = {
+  generatedAt: new Date().toISOString(),
+  sourceBaseUrl,
+  targetBaseUrl,
+  conditions: { ...contextOptions, fixedTime: TECH_LOG_FIXED_TIME, viewportHeight: 1000, screenshots: "fullPage", masks: 0 },
+  total: results.length,
+  passed: results.filter((result) => result.passed).length,
+  failed: results.filter((result) => !result.passed).length,
+  totalDifferentPixels: results.reduce((sum, result) => sum + (result.pixel.pixels ?? 0), 0),
+  results,
+};
+await mkdir(resolve(outputPath, ".."), { recursive: true });
+await writeFile(outputPath, `${JSON.stringify(evidence, null, 2)}\n`);
+console.log(JSON.stringify({ outputPath, total: evidence.total, passed: evidence.passed, failed: evidence.failed, totalDifferentPixels: evidence.totalDifferentPixels }));
+if (evidence.failed > 0) process.exitCode = 1;