1차 싱크 완료
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
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-form-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>,
|
||||
};
|
||||
});
|
||||
|
||||
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("formInput: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
|
||||
const blocks: Block[] = [
|
||||
{
|
||||
id: "form_input_1",
|
||||
type: "formInput",
|
||||
props: {
|
||||
label: "폼 입력",
|
||||
inputType: "text",
|
||||
textColorCustom: "#ff0000",
|
||||
fillColorCustom: "#123456",
|
||||
strokeColorCustom: "#654321",
|
||||
widthMode: "fixed",
|
||||
widthPx: 240,
|
||||
borderRadius: "full",
|
||||
},
|
||||
} as any,
|
||||
];
|
||||
|
||||
mockState.blocks = blocks;
|
||||
mockState.selectedBlockId = "form_input_1";
|
||||
|
||||
render(<EditorPage />);
|
||||
|
||||
const field = screen.getByTestId("form-input-field") as HTMLElement;
|
||||
|
||||
expect(field.style.color).toBe(hexToRgb("#ff0000"));
|
||||
expect(field.style.backgroundColor).toBe(hexToRgb("#123456"));
|
||||
expect(field.style.borderColor).toBe(hexToRgb("#654321"));
|
||||
expect(field.style.width).toBe("240px");
|
||||
// borderRadius=full → 9999px 로 적용
|
||||
expect(field.style.borderRadius).toBe("9999px");
|
||||
});
|
||||
|
||||
it("formSelect: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
|
||||
const blocks: Block[] = [
|
||||
{
|
||||
id: "form_select_1",
|
||||
type: "formSelect",
|
||||
props: {
|
||||
label: "폼 셀렉트",
|
||||
textColorCustom: "#ff0000",
|
||||
fillColorCustom: "#123456",
|
||||
strokeColorCustom: "#654321",
|
||||
widthMode: "fixed",
|
||||
widthPx: 260,
|
||||
borderRadius: "lg",
|
||||
options: [
|
||||
{ label: "A", value: "a" },
|
||||
{ label: "B", value: "b" },
|
||||
],
|
||||
},
|
||||
} as any,
|
||||
];
|
||||
|
||||
mockState.blocks = blocks;
|
||||
mockState.selectedBlockId = "form_select_1";
|
||||
|
||||
render(<EditorPage />);
|
||||
|
||||
const select = screen.getByLabelText("폼 셀렉트") as HTMLSelectElement;
|
||||
const wrapper = select.parentElement as HTMLElement; // style 이 적용된 div
|
||||
|
||||
expect(wrapper.style.color).toBe(hexToRgb("#ff0000"));
|
||||
expect(wrapper.style.backgroundColor).toBe(hexToRgb("#123456"));
|
||||
expect(wrapper.style.borderColor).toBe(hexToRgb("#654321"));
|
||||
expect(wrapper.style.width).toBe("260px");
|
||||
expect(wrapper.style.borderRadius).toBe("9999px"); // lg → 9999 (에디터 구현 기준)
|
||||
});
|
||||
|
||||
it("formRadio: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
|
||||
const blocks: Block[] = [
|
||||
{
|
||||
id: "form_radio_1",
|
||||
type: "formRadio",
|
||||
props: {
|
||||
formFieldName: "radio-group",
|
||||
groupLabel: "라디오 그룹",
|
||||
textColorCustom: "#ff0000",
|
||||
fillColorCustom: "#123456",
|
||||
strokeColorCustom: "#654321",
|
||||
widthMode: "fixed",
|
||||
widthPx: 280,
|
||||
borderRadius: "lg",
|
||||
options: [
|
||||
{ label: "옵션 A", value: "a" },
|
||||
{ label: "옵션 B", value: "b" },
|
||||
],
|
||||
},
|
||||
} as any,
|
||||
];
|
||||
|
||||
mockState.blocks = blocks;
|
||||
mockState.selectedBlockId = "form_radio_1";
|
||||
|
||||
render(<EditorPage />);
|
||||
|
||||
const label = screen.getByText("라디오 그룹");
|
||||
const container = label.nextElementSibling as HTMLElement; // style 이 적용된 div
|
||||
|
||||
expect(container).toBeTruthy();
|
||||
expect(container.style.color).toBe(hexToRgb("#ff0000"));
|
||||
expect(container.style.backgroundColor).toBe(hexToRgb("#123456"));
|
||||
expect(container.style.borderColor).toBe(hexToRgb("#654321"));
|
||||
expect(container.style.width).toBe("280px");
|
||||
expect(container.style.borderRadius).toBe("9999px");
|
||||
});
|
||||
|
||||
it("formCheckbox: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
|
||||
const blocks: Block[] = [
|
||||
{
|
||||
id: "form_checkbox_1",
|
||||
type: "formCheckbox",
|
||||
props: {
|
||||
formFieldName: "check-group",
|
||||
groupLabel: "체크 그룹",
|
||||
textColorCustom: "#ff0000",
|
||||
fillColorCustom: "#123456",
|
||||
strokeColorCustom: "#654321",
|
||||
widthMode: "fixed",
|
||||
widthPx: 300,
|
||||
borderRadius: "lg",
|
||||
options: [
|
||||
{ label: "체크 1", value: "c1" },
|
||||
{ label: "체크 2", value: "c2" },
|
||||
],
|
||||
},
|
||||
} as any,
|
||||
];
|
||||
|
||||
mockState.blocks = blocks;
|
||||
mockState.selectedBlockId = "form_checkbox_1";
|
||||
|
||||
render(<EditorPage />);
|
||||
|
||||
// "체크 그룹" 텍스트를 포함하는 가장 가까운 컨테이너를 찾아 스타일을 검사한다.
|
||||
const label = screen.getByText("체크 그룹");
|
||||
const groupContainer = label.closest("div") as HTMLElement;
|
||||
|
||||
expect(groupContainer.style.color).toBe(hexToRgb("#ff0000"));
|
||||
expect(groupContainer.style.backgroundColor).toBe(hexToRgb("#123456"));
|
||||
expect(groupContainer.style.borderColor).toBe(hexToRgb("#654321"));
|
||||
expect(groupContainer.style.width).toBe("300px");
|
||||
expect(groupContainer.style.borderRadius).toBe("9999px");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user