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

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

let mockState: any;

beforeEach(() => {
  const baseProjectConfig: ProjectConfig = {
    title: "이미지 블록 스타일 테스트",
    slug: "editor-image-style-test",
    canvasPreset: "full",
    canvasWidthPx: 1024,
    canvasBgColorHex: "#0f172a",
    bodyBgColorHex: "#020617",
  } as ProjectConfig;

  mockState = {
    blocks: [] as Block[],
    projectConfig: baseProjectConfig,
    selectedBlockId: null as string | null,
    selectedListItemId: null as string | null,
    undo: vi.fn(),
    redo: vi.fn(),
    removeBlock: vi.fn(),
    duplicateBlock: vi.fn(),
    selectBlock: vi.fn(),
    selectListItem: vi.fn(),
    addTextBlock: vi.fn(),
    addButtonBlock: vi.fn(),
    addImageBlock: vi.fn(),
    addDividerBlock: vi.fn(),
    addListBlock: vi.fn(),
    addSectionBlock: vi.fn(),
    addFormBlock: vi.fn(),
    addFormInputBlock: vi.fn(),
    addFormSelectBlock: vi.fn(),
    addFormCheckboxBlock: vi.fn(),
    addFormRadioBlock: vi.fn(),
    addHeroTemplateSection: vi.fn(),
    addFeaturesTemplateSection: vi.fn(),
    addCtaTemplateSection: vi.fn(),
    addFaqTemplateSection: vi.fn(),
    addPricingTemplateSection: vi.fn(),
    addTestimonialsTemplateSection: vi.fn(),
    addBlogTemplateSection: vi.fn(),
    addTeamTemplateSection: vi.fn(),
    addFooterTemplateSection: vi.fn(),
    updateBlock: vi.fn(),
    replaceBlocks: vi.fn(),
    reorderBlocks: vi.fn(),
    moveBlock: vi.fn(),
  };
});

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

vi.mock("@/features/editor/state/editorStore", () => {
  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
  (useEditorStore as any).getState = () => 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(),
    }),
    useSearchParams: () => ({
      get: () => null,
    }),
  };
});

describe("EditorPage - 이미지 블록 스타일", () => {
  it("widthMode=fixed 일 때 widthPx / borderRadiusPx 가 에디터 이미지 렌더에 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "image_style_1",
        type: "image",
        props: {
          src: "/images/example.png",
          alt: "예제 이미지",
          align: "center",
          widthMode: "fixed",
          widthPx: 320,
          borderRadius: "lg",
          borderRadiusPx: 24,
        },
      } as any,
    ];

    mockState.blocks = blocks;
    mockState.selectedBlockId = "image_style_1";

    render(<EditorPage />);

    const img = screen.getByAltText("예제 이미지") as HTMLImageElement;

    expect(img.style.width).toBe("320px");
    expect(img.style.borderRadius).toBe("24px");
  });

  it("이미지 블록이 비어 있을 때 en 로케일에서는 영어 플레이스홀더가 표시되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "image_placeholder_en",
        type: "image",
        props: {
          src: "",
          alt: "",
          align: "center",
          widthMode: "auto",
          borderRadius: "none",
          borderRadiusPx: 0,
        },
      } as any,
    ];

    mockState.blocks = blocks;
    mockState.selectedBlockId = "image_placeholder_en";

    render(
      <LocaleProvider initialLocale="en">
        <EditorPage />
      </LocaleProvider>,
    );

    expect(
      screen.getByText("Enter an image URL or upload a file to see the preview here."),
    ).toBeTruthy();
  });

  it("이미지 블록이 비어 있을 때 ko 로케일에서는 한국어 플레이스홀더가 표시되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "image_placeholder_ko",
        type: "image",
        props: {
          src: "",
          alt: "",
          align: "center",
          widthMode: "auto",
          borderRadius: "none",
          borderRadiusPx: 0,
        },
      } as any,
    ];

    mockState.blocks = blocks;
    mockState.selectedBlockId = "image_placeholder_ko";

    render(
      <LocaleProvider initialLocale="ko">
        <EditorPage />
      </LocaleProvider>,
    );

    expect(
      screen.getByText(
        "이미지 URL 을 입력하거나 파일을 업로드하면 여기에서 미리보기가 표시됩니다.",
      ),
    ).toBeTruthy();
  });
});