134 lines
3.7 KiB
TypeScript
134 lines
3.7 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: "editor-divider-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,
|
|
}),
|
|
};
|
|
});
|
|
|
|
function hexToRgb(hex: string) {
|
|
const clean = hex.replace("#", "");
|
|
const int = parseInt(clean, 16);
|
|
const r = (int >> 16) & 255;
|
|
const g = (int >> 8) & 255;
|
|
const b = int & 255;
|
|
return `rgb(${r}, ${g}, ${b})`;
|
|
}
|
|
|
|
describe("EditorPage - 디바이더 블록 스타일", () => {
|
|
it("colorHex / widthMode+widthPx / marginYPx 가 에디터 디바이더 렌더에 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "divider_style_1",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "medium",
|
|
widthMode: "fixed",
|
|
widthPx: 400,
|
|
colorHex: "#123456",
|
|
marginYPx: 32,
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "divider_style_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
// EditorPage 의 디바이더는 wrapper div 안에 border-t 클래스를 가진 div 로 렌더된다.
|
|
const editorBlock = screen.getByTestId("editor-block") as HTMLElement;
|
|
const inner = editorBlock.querySelector("div.border-t") as HTMLElement;
|
|
expect(inner).toBeTruthy();
|
|
|
|
expect(inner.style.borderColor).toBe(hexToRgb("#123456"));
|
|
expect(inner.style.width).toBe("400px");
|
|
|
|
// marginTop/marginBottom 은 상위 wrapper div 에 적용된다.
|
|
const wrapper = inner.parentElement as HTMLElement;
|
|
expect(wrapper.style.marginTop).toBe("32px");
|
|
expect(wrapper.style.marginBottom).toBe("32px");
|
|
});
|
|
});
|