import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
import EditorPage from "@/app/editor/page";
// EditorPage Export 미리보기 UX TDD
// - 상단 메뉴에 "Export 미리보기" 항목이 노출되는지 검증한다.
// - Export 미리보기 모달에서 "미리보기 새로고침" 클릭 시
// - /api/export/preview 엔드포인트를 호출하고,
// - 반환된 HTML 을 iframe srcdoc 으로 렌더하는지 확인한다.
let mockState: any;
beforeEach(() => {
const baseProjectConfig: ProjectConfig = {
title: "Export 미리보기 테스트",
slug: "export-preview-test",
canvasPreset: "full",
} as ProjectConfig;
mockState = {
blocks: [
{
id: "blk_text_1",
type: "text",
props: {
text: "Export 미리보기 본문",
align: "left",
size: "base",
},
},
] 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(),
replaceBlocks: vi.fn(),
reorderBlocks: vi.fn(),
moveBlock: 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(),
};
});
afterEach(() => {
cleanup();
vi.unstubAllGlobals();
});
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) => {children},
};
});
describe("EditorPage - Export 미리보기", () => {
it("메뉴에서 Export 미리보기 항목을 클릭하면 Export 미리보기 모달이 열려야 한다", () => {
render();
const menuButton = screen.getByText("메뉴");
fireEvent.click(menuButton);
const previewMenuItem = screen.getByText("Export 미리보기");
fireEvent.click(previewMenuItem);
const modalTitle = screen.getByText("Export 미리보기");
expect(modalTitle).toBeTruthy();
});
it("Export 미리보기 새로고침 시 /api/export/preview 를 호출하고 iframe 에 HTML 을 렌더해야 한다", async () => {
const fetchMock = vi.fn().mockResolvedValue(
new Response(
"Export 미리보기 테스트Export 미리보기 본문",
{
status: 200,
headers: { "Content-Type": "text/html; charset=utf-8" },
},
),
);
vi.stubGlobal("fetch", fetchMock);
render();
const menuButton = screen.getByText("메뉴");
fireEvent.click(menuButton);
const previewMenuItem = screen.getByText("Export 미리보기");
fireEvent.click(previewMenuItem);
const refreshButton = screen.getByText("미리보기 새로고침");
fireEvent.click(refreshButton);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
});
const [url, options] = fetchMock.mock.calls[0] as any;
expect(url).toBe("/api/export/preview");
expect(options.method).toBe("POST");
expect(options.headers["Content-Type"]).toBe("application/json");
const parsed = JSON.parse(options.body);
expect(Array.isArray(parsed.blocks)).toBe(true);
expect(parsed.blocks[0].id).toBe("blk_text_1");
expect(parsed.projectConfig.slug).toBe("export-preview-test");
const iframe = await screen.findByTestId("export-preview-frame");
const srcDoc = iframe.getAttribute("srcdoc") ?? "";
expect(srcDoc).toContain("Export 미리보기 테스트");
expect(srcDoc).toContain("Export 미리보기 본문");
});
});