311 lines
9.2 KiB
TypeScript
311 lines
9.2 KiB
TypeScript
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";
|
|
|
|
let mockState: any;
|
|
|
|
beforeEach(() => {
|
|
const baseProjectConfig: ProjectConfig = {
|
|
title: "선택 포커스 테스트",
|
|
slug: "selection-focus",
|
|
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("선택/비선택 블록 셸은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_1",
|
|
type: "text",
|
|
props: {
|
|
text: "첫 번째 블록",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "blk_2",
|
|
type: "text",
|
|
props: {
|
|
text: "두 번째 블록",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "blk_2";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const allBlocks = screen.getAllByTestId("editor-block") as HTMLElement[];
|
|
const selected = allBlocks.find((el) => el.dataset.selected === "true");
|
|
const nonSelected = allBlocks.find((el) => el.dataset.selected !== "true");
|
|
|
|
expect(selected).toBeTruthy();
|
|
expect(nonSelected).toBeTruthy();
|
|
|
|
const selectedClass = selected!.className;
|
|
const nonSelectedClass = nonSelected!.className;
|
|
|
|
// 선택된 블록: 하이라이트 보더 + 라이트/다크 배경/텍스트 듀얼 테마
|
|
expect(selectedClass).toContain("border-sky-500");
|
|
expect(selectedClass).toContain("bg-sky-50");
|
|
expect(selectedClass).toContain("text-slate-900");
|
|
expect(selectedClass).toContain("dark:bg-slate-900/80");
|
|
expect(selectedClass).toContain("dark:text-slate-100");
|
|
|
|
// 비선택 블록: 기본 카드 크롬(라이트/다크 듀얼)
|
|
expect(nonSelectedClass).toContain("border-slate-200");
|
|
expect(nonSelectedClass).toContain("bg-white");
|
|
expect(nonSelectedClass).toContain("text-slate-900");
|
|
expect(nonSelectedClass).toContain("dark:border-slate-700");
|
|
expect(nonSelectedClass).toContain("dark:bg-slate-900");
|
|
expect(nonSelectedClass).toContain("dark:text-slate-100");
|
|
});
|
|
|
|
it("블록 드래그 핸들은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_1",
|
|
type: "text",
|
|
props: {
|
|
text: "첫 번째 블록",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "blk_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const handle = screen.getByLabelText("블록 드래그 핸들") as HTMLButtonElement;
|
|
const className = handle.getAttribute("class") ?? "";
|
|
|
|
// 라이트 모드: 밝은 버튼 크롬
|
|
expect(className).toContain("border-slate-300");
|
|
expect(className).toContain("bg-slate-50");
|
|
expect(className).toContain("text-slate-500");
|
|
// 다크 모드: 기존 다크 톤 유지
|
|
expect(className).toContain("dark:border-slate-700");
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-400");
|
|
});
|
|
|
|
it("선택된 블록은 editor-block 에 border-sky-500 / bg-slate-900/80 하이라이트를 가져야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_1",
|
|
type: "text",
|
|
props: {
|
|
text: "첫 번째 블록",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "blk_2",
|
|
type: "text",
|
|
props: {
|
|
text: "두 번째 블록",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "blk_2";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const allBlocks = screen.getAllByTestId("editor-block") as HTMLElement[];
|
|
const selected = allBlocks.find((el) => el.dataset.selected === "true");
|
|
|
|
expect(selected).toBeTruthy();
|
|
expect(selected!.className).toContain("border-sky-500");
|
|
expect(selected!.className).toContain("bg-slate-900/80");
|
|
});
|
|
|
|
it("섹션 블록 자체를 선택하면 섹션 wrapper 가 강조되어야 한다", () => {
|
|
const section: Block = {
|
|
id: "sec_1",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [
|
|
{
|
|
id: "sec_1_col_1",
|
|
span: 12,
|
|
},
|
|
],
|
|
maxWidthMode: "normal",
|
|
gapX: "md",
|
|
alignItems: "top",
|
|
},
|
|
} as any;
|
|
|
|
mockState.blocks = [section];
|
|
mockState.selectedBlockId = "sec_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const sectionEl = screen.getByTestId("editor-section") as HTMLElement;
|
|
expect(sectionEl.className).toContain("border-sky-500");
|
|
});
|
|
|
|
it("EditorPage 레이아웃은 main 에 h-screen 컨테이너를 사용하고, 좌/중/우 컬럼이 각각 스크롤되어야 한다", () => {
|
|
mockState.blocks = [];
|
|
mockState.selectedBlockId = null;
|
|
|
|
const { container } = render(<EditorPage />);
|
|
|
|
const main = container.querySelector("main") as HTMLElement;
|
|
expect(main).toBeTruthy();
|
|
const mainClass = main.getAttribute("class") ?? "";
|
|
// 전체 에디터는 뷰포트 높이에 맞춘 h-screen 컨테이너 안에서 동작해야 한다.
|
|
expect(mainClass).toContain("h-screen");
|
|
expect(mainClass).not.toContain("min-h-screen");
|
|
expect(mainClass).toContain("flex");
|
|
expect(mainClass).toContain("overflow-hidden");
|
|
|
|
// 좌측 BlocksSidebar 는 자체 스크롤(overflow-y-auto)을 가져야 한다.
|
|
const blocksSidebar = screen.getByTestId("blocks-sidebar") as HTMLElement;
|
|
const blocksClass = blocksSidebar.getAttribute("class") ?? "";
|
|
expect(blocksClass).toContain("overflow-y-auto");
|
|
expect(blocksClass).toContain("pb-scroll");
|
|
|
|
// 중앙 EditorCanvas 는 자체 스크롤(overflow-auto)을 가져야 한다.
|
|
const canvas = screen.getByTestId("editor-canvas") as HTMLElement;
|
|
const canvasClass = canvas.getAttribute("class") ?? "";
|
|
expect(canvasClass).toContain("overflow-auto");
|
|
expect(canvasClass).toContain("pb-scroll");
|
|
|
|
// 우측 PropertiesSidebar 도 자체 스크롤(overflow-auto)을 가져야 한다.
|
|
const propsSidebar = screen.getByTestId("properties-sidebar") as HTMLElement;
|
|
const propsClass = propsSidebar.getAttribute("class") ?? "";
|
|
expect(propsClass).toContain("overflow-auto");
|
|
expect(propsClass).toContain("pb-scroll");
|
|
});
|
|
|
|
it("섹션 자식 블록을 선택해도 섹션 wrapper 가 강조되어야 한다", () => {
|
|
const section: Block = {
|
|
id: "sec_1",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [
|
|
{
|
|
id: "sec_1_col_1",
|
|
span: 12,
|
|
},
|
|
],
|
|
maxWidthMode: "normal",
|
|
gapX: "md",
|
|
alignItems: "top",
|
|
},
|
|
} as any;
|
|
|
|
const child: Block = {
|
|
id: "txt_child",
|
|
type: "text",
|
|
props: {
|
|
text: "섹션 안 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
sectionId: "sec_1",
|
|
columnId: "sec_1_col_1",
|
|
} as any;
|
|
|
|
mockState.blocks = [section, child];
|
|
mockState.selectedBlockId = "txt_child";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const sectionEl = screen.getByTestId("editor-section") as HTMLElement;
|
|
expect(sectionEl.className).toContain("border-sky-500");
|
|
});
|
|
});
|