123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
|
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
|
|
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
|
|
import EditorPage from "@/app/editor/page";
|
|
|
|
// EditorPage 상단 메뉴 UX TDD
|
|
// - Export 미리보기 기능 제거 후, 상단 메뉴에 더 이상 "Export 미리보기" 항목이 노출되지 않아야 한다.
|
|
// - 대신 프로젝트 저장/불러오기와 연계된 "프로젝트 목록" 항목이 메뉴에 노출되어야 한다.
|
|
|
|
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) => <a href={href}>{children}</a>,
|
|
};
|
|
});
|
|
|
|
vi.mock("next/navigation", () => {
|
|
return {
|
|
__esModule: true,
|
|
useRouter: () => ({
|
|
push: vi.fn(),
|
|
}),
|
|
useSearchParams: () => ({
|
|
get: () => null,
|
|
}),
|
|
};
|
|
});
|
|
|
|
describe("EditorPage - 상단 메뉴 (Export 미리보기 제거)", () => {
|
|
it("메뉴를 열었을 때 'Export 미리보기' 항목은 보이지 않고, '프로젝트 목록' 항목이 노출되어야 한다", () => {
|
|
render(<EditorPage />);
|
|
|
|
const menuButton = screen.getByText("Menu");
|
|
fireEvent.click(menuButton);
|
|
|
|
const removedItem = screen.queryByText("Export 미리보기");
|
|
expect(removedItem).toBeNull();
|
|
|
|
const projectListItem = screen.getByText("Projects");
|
|
expect(projectListItem).toBeTruthy();
|
|
});
|
|
|
|
it("헤더의 '프리뷰 열기' 링크는 현재 프로젝트 slug 를 쿼리로 포함한 /preview?slug=... 형식이어야 한다", () => {
|
|
render(<EditorPage />);
|
|
|
|
const previewLink = screen.getByRole("link", { name: "Open preview" });
|
|
expect(previewLink).toBeTruthy();
|
|
expect(previewLink.getAttribute("href")).toBe("/preview?slug=export-preview-test");
|
|
});
|
|
});
|