tech-log-frontend/tests/visual/tech-log.visual.spec.ts

import { expect, test } from "../support/browser/strict-browser-test.ts";
import {
  gotoTechLog,
  TECH_LOG_BREAKPOINT_WIDTHS,
  TECH_LOG_CANONICAL_ROUTES,
  TECH_LOG_PUBLIC_FIXTURE_PATHS,
  TECH_LOG_STUDIO_STATE_PATHS,
  TECH_LOG_UNKNOWN_PUBLIC_PATHS,
} from "../support/browser/tech-log-fixtures.ts";

function fixtureSnapshotName(path: string) {
  return `tech-log-public-fixture-${path.slice(1).replaceAll("/", "-")}-1440.png`;
}

for (const route of TECH_LOG_CANONICAL_ROUTES) {
  for (const width of [360, 1440] as const) {
    test(`${route.routeId} matches the reviewed ${width}px visual`, async ({ page }) => {
      await page.setViewportSize({ width, height: 1000 });
      await gotoTechLog(page, route.path);
      await expect(page).toHaveScreenshot(`${route.routeId.toLowerCase()}-${width}.png`, {
        fullPage: true,
      });
    });
  }
}

for (const path of TECH_LOG_PUBLIC_FIXTURE_PATHS) {
  test(`known Public fixture ${path} matches its reviewed wide visual`, async ({
    page,
  }) => {
    await page.setViewportSize({ width: 1440, height: 1000 });
    await gotoTechLog(page, path);
    await expect(page).toHaveScreenshot(fixtureSnapshotName(path), {
      fullPage: true,
    });
  });
}

for (const width of TECH_LOG_BREAKPOINT_WIDTHS) {
  test(`Public home matches the reviewed ${width}px breakpoint visual`, async ({ page }) => {
    await page.setViewportSize({ width, height: 1000 });
    await gotoTechLog(page, "/");
    await expect(page).toHaveScreenshot(`tech-log-home-breakpoint-${width}.png`, {
      fullPage: true,
    });
  });
}

for (const [state, path] of TECH_LOG_STUDIO_STATE_PATHS) {
  test(`Studio ${state} matches its reviewed wide state visual`, async ({ page }) => {
    await page.setViewportSize({ width: 1440, height: 1000 });
    await gotoTechLog(page, path);
    await expect(page).toHaveScreenshot(`tech-log-studio-${state}-1440.png`, {
      fullPage: true,
    });
  });
}

for (const [route, path] of TECH_LOG_UNKNOWN_PUBLIC_PATHS) {
  for (const width of [360, 1440] as const) {
    test(`unknown Public ${route} matches the source ${width}px response`, async ({ page }) => {
      await page.setViewportSize({ width, height: 1000 });
      await gotoTechLog(page, path);
      await expect(page.getByText("Not Found", { exact: true })).toBeVisible();
      await expect(page.locator(".site-frame")).toHaveCount(0);
      await expect(page).toHaveScreenshot(`tech-log-unknown-${route}-${width}.png`, {
        fullPage: true,
      });
    });
  }
}

test("open Public search dialog matches the source without a mask", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await gotoTechLog(page, "/");
  await page.getByRole("button", { name: "검색 열기" }).click();
  await expect(page.getByRole("dialog", { name: "검색" })).toBeVisible();
  await expect(page).toHaveScreenshot("tech-log-search-dialog-390.png", {
    fullPage: true,
  });
});

test("open Studio mobile menu matches the source without a mask", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await gotoTechLog(page, "/studio");
  await page.getByRole("button", { name: "Studio 메뉴 열기" }).click();
  await expect(page).toHaveScreenshot("tech-log-studio-mobile-menu-390.png", {
    fullPage: true,
  });
});

test("Studio immediate preview matches the source without a mask", async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await gotoTechLog(
    page,
    "/studio/documents/11111111-1111-4111-8111-111111111111/edit",
  );
  await page.getByRole("tab", { name: "즉시 미리보기" }).click();
  await expect(page.getByRole("tabpanel", { name: "즉시 미리보기" })).toBeVisible();
  await expect(page).toHaveScreenshot("tech-log-studio-immediate-preview-1440.png", {
    fullPage: true,
  });
});

test("Studio dirty-leave dialog matches the source without a mask", async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await gotoTechLog(
    page,
    "/studio/documents/11111111-1111-4111-8111-111111111111/edit",
  );
  await page.getByLabel("요약").fill("저장하지 않은 시각 검증 변경");
  await page.getByRole("link", { name: "게시 기록", exact: true }).first().click();
  await expect(
    page.getByRole("dialog", { name: "저장하지 않은 변경" }),
  ).toBeVisible();
  await expect(page).toHaveScreenshot("tech-log-studio-dirty-leave-dialog-1440.png", {
    fullPage: true,
  });
});

test("Studio newly-created current preview matches the source without a mask", async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await gotoTechLog(
    page,
    "/studio/documents/11111111-1111-4111-8111-111111111113/preview",
  );
  await page.getByRole("button", { name: "Public Preview 만들기" }).click();
  await expect(page.getByText("현재 저장 버전의 Public Preview입니다.")).toBeVisible();
  await expect(page).toHaveScreenshot("tech-log-studio-current-preview-created-1440.png", {
    fullPage: true,
  });
});

test("Studio unpublish confirmation matches the source without a mask", async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await gotoTechLog(page, "/studio/publications");
  await page
    .getByRole("button", {
      name: /컬렉션 Fetch Join과 페이징은 왜 충돌하는가 게시 취소/,
    })
    .click();
  await expect(page.getByRole("dialog", { name: "게시를 취소할까요?" })).toBeVisible();
  await expect(page).toHaveScreenshot("tech-log-studio-unpublish-dialog-1440.png", {
    fullPage: true,
  });
});

test("Studio warning acknowledgement publish state matches the source without a mask", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1440, height: 1000 });
  await gotoTechLog(
    page,
    "/studio/documents/11111111-1111-4111-8111-111111111116/validation",
  );
  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 expect(page.getByRole("button", { name: /게시$/ })).toBeEnabled();
  await expect(page).toHaveScreenshot("tech-log-studio-warning-acknowledged-1440.png", {
    fullPage: true,
  });
});