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

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

let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<typeof vi.fn> };

beforeEach(() => {
  const baseConfig: ProjectConfig = {
    title: "프로젝트",
    slug: "project",
    canvasPreset: "full",
    canvasWidthPx: 1024,
    canvasBgColorHex: "#0f172a",
    bodyBgColorHex: "#020617",
  } as ProjectConfig;

  mockState = {
    projectConfig: baseConfig,
    updateProjectConfig: vi.fn(),
  };
});

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

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

describe("ProjectPropertiesPanel", () => {
  it("캔버스 너비 프리셋을 변경하면 canvasPreset/canvasWidthPx 가 업데이트되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;

    fireEvent.change(select, { target: { value: "mobile" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "mobile", canvasWidthPx: 390 });
  });

  it("태블릿 프리셋을 선택하면 canvasPreset=tablet 과 canvasWidthPx=768 로 업데이트되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;

    fireEvent.change(select, { target: { value: "tablet" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "tablet", canvasWidthPx: 768 });
  });

  it("데스크톱 프리셋을 선택하면 canvasPreset=desktop 과 canvasWidthPx=1200 으로 업데이트되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;

    fireEvent.change(select, { target: { value: "desktop" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "desktop", canvasWidthPx: 1200 });
  });

  it("캔버스 너비를 390 으로 입력하면 mobile 프리셋으로 동기화되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "390" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "mobile", canvasWidthPx: 390 });
  });

  it("캔버스 너비를 768 로 입력하면 tablet 프리셋으로 동기화되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "768" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "tablet", canvasWidthPx: 768 });
  });

  it("캔버스 너비를 1200 으로 입력하면 desktop 프리셋으로 동기화되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "1200" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "desktop", canvasWidthPx: 1200 });
  });

  it("캔버스 너비를 커스텀 값으로 입력하면 canvasPreset=custom 과 함께 canvasWidthPx 가 설정되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "1000" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasPreset: "custom", canvasWidthPx: 1000 });
  });

  it("캔버스 배경색 HEX 입력을 변경하면 canvasBgColorHex 가 업데이트되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("캔버스 배경색 HEX") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "#123456" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasBgColorHex: "#123456" });
  });

  it("페이지 배경색 HEX 입력을 변경하면 bodyBgColorHex 가 업데이트되어야 한다", () => {
    render(<ProjectPropertiesPanel />);

    const input = screen.getByLabelText("페이지 배경색 HEX") as HTMLInputElement;

    fireEvent.change(input, { target: { value: "#654321" } });

    expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "#654321" });
  });
});