page-builder/tests/unit/PreviewCanvasPreset.spec.tsx

import { describe, it, expect, afterEach, vi, beforeEach } from "vitest";
import { render, screen, cleanup } from "@testing-library/react";
import PreviewPage from "@/app/preview/page";
import type { ProjectConfig, Block } from "@/features/editor/state/editorStore";

// PreviewPage 캔버스 프리셋/폭/배경색 TDD
// - canvasPreset / canvasWidthPx / canvasBgColorHex / bodyBgColorHex 가
//   preview-canvas-inner 및 main 배경에 올바르게 반영되는지 검증한다.

let mockState: any;

beforeEach(() => {
  const baseProjectConfig: ProjectConfig = {
    title: "프리뷰 캔버스 테스트",
    slug: "preview-canvas-test",
    canvasPreset: "full",
    canvasBgColorHex: "#0f172a",
    bodyBgColorHex: "#020617",
  };

  mockState = {
    blocks: [] as Block[],
    projectConfig: baseProjectConfig,
  };
});

vi.mock("@/features/editor/state/editorStore", () => {
  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
  return {
    __esModule: true,
    useEditorStore,
  };
});

vi.mock("next/link", () => {
  return {
    __esModule: true,
    default: ({ href, children }: any) => <a href={href}>{children}</a>,
  };
});

vi.mock("next/navigation", () => {
  return {
    __esModule: true,
    useRouter: () => ({
      push: vi.fn(),
    }),
  };
});

afterEach(() => {
  cleanup();
});

describe("PreviewPage - canvasPreset / canvasWidthPx", () => {
  it("mobile 프리셋 + canvasWidthPx=390 은 preview-canvas-inner maxWidth 를 390px 로 설정해야 한다", () => {
    mockState.projectConfig = {
      ...(mockState.projectConfig as ProjectConfig),
      canvasPreset: "mobile",
      canvasWidthPx: 390,
    } as ProjectConfig;

    render(<PreviewPage />);

    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
    expect(inner.style.maxWidth).toBe("390px");
  });

  it("tablet 프리셋 + canvasWidthPx=768 은 maxWidth 를 768px 로 설정해야 한다", () => {
    mockState.projectConfig = {
      ...(mockState.projectConfig as ProjectConfig),
      canvasPreset: "tablet",
      canvasWidthPx: 768,
    } as ProjectConfig;

    render(<PreviewPage />);

    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
    expect(inner.style.maxWidth).toBe("768px");
  });

  it("desktop 프리셋 + canvasWidthPx=1200 은 maxWidth 를 1200px 로 설정해야 한다", () => {
    mockState.projectConfig = {
      ...(mockState.projectConfig as ProjectConfig),
      canvasPreset: "desktop",
      canvasWidthPx: 1200,
    } as ProjectConfig;

    render(<PreviewPage />);

    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
    expect(inner.style.maxWidth).toBe("1200px");
  });

  it("full 프리셋에서 canvasWidthPx 가 없으면 maxWidth 는 비워져 있어야 한다", () => {
    mockState.projectConfig = {
      ...(mockState.projectConfig as ProjectConfig),
      canvasPreset: "full",
      canvasWidthPx: undefined,
    } as ProjectConfig;

    render(<PreviewPage />);

    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
    expect(inner.style.maxWidth).toBe("");
  });

  it("custom 프리셋 + canvasWidthPx=1024 는 maxWidth 를 1024px 로 설정해야 한다", () => {
    mockState.projectConfig = {
      ...(mockState.projectConfig as ProjectConfig),
      canvasPreset: "custom",
      canvasWidthPx: 1024,
    } as ProjectConfig;

    render(<PreviewPage />);

    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
    expect(inner.style.maxWidth).toBe("1024px");
  });

  it("canvasBgColorHex 와 bodyBgColorHex 가 각각 preview-canvas-inner 및 main 배경에 적용되어야 한다", () => {
    mockState.projectConfig = {
      ...(mockState.projectConfig as ProjectConfig),
      canvasPreset: "full",
      canvasBgColorHex: "#111111",
      bodyBgColorHex: "#222222",
    } as ProjectConfig;

    const { container } = render(<PreviewPage />);

    const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
    const main = container.querySelector("main") as HTMLElement;

    expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
    expect(main.style.backgroundColor).toBe("rgb(34, 34, 34)");
  });

	it("bodyBgColorHex 가 빈 문자열이면 PreviewPage main 에 background-color 가 들어가지 않아야 한다", () => {
		mockState.projectConfig = {
			...(mockState.projectConfig as ProjectConfig),
			bodyBgColorHex: "",
		} as ProjectConfig;

		const { container } = render(<PreviewPage />);
		const main = container.querySelector("main") as HTMLElement;
		// 명시적으로 빈 문자열을 지정한 경우에는 PreviewPage 가 어떤 기본 배경색도 강제로 설정하지 않아야 한다.
		expect(main.style.backgroundColor).toBe("");
	});
});