1442 lines
50 KiB
TypeScript
1442 lines
50 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import {
|
|
createEditorStore,
|
|
buildItemsTreeFromItems,
|
|
flattenItemsTreeToItems,
|
|
indentListItem,
|
|
itemsTreeToLines,
|
|
linesToItemsTree,
|
|
moveListItemDown,
|
|
moveListItemUp,
|
|
outdentListItem,
|
|
parseTextareaToLines,
|
|
stringifyLinesToTextarea,
|
|
} from "@/features/editor/state/editorStore";
|
|
import type {
|
|
TextBlockProps,
|
|
ListItemNode,
|
|
ListBlockProps,
|
|
DividerBlockProps,
|
|
ImageBlockProps,
|
|
SectionBlockProps,
|
|
ListLine,
|
|
ButtonBlockProps,
|
|
} from "@/features/editor/state/editorStore";
|
|
|
|
// 에디터 상태 스토어에 대한 첫 TDD: 텍스트 블록 추가
|
|
|
|
describe("editorStore", () => {
|
|
it("addTextBlock 호출 시 텍스트 블록이 추가되고 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("text");
|
|
const textProps = blocks[0].props as TextBlockProps;
|
|
expect(textProps.text).toBe("새 텍스트");
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("섹션 블록에 배경 커스텀 색상을 설정할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addSectionBlock();
|
|
|
|
const { blocks } = store.getState();
|
|
const sectionBlock = blocks.find((b) => b.type === "section")!;
|
|
const sectionProps = sectionBlock.props as SectionBlockProps;
|
|
|
|
expect(sectionProps.backgroundColorCustom).toBeUndefined();
|
|
|
|
store.getState().updateBlock(sectionBlock.id, {
|
|
backgroundColorCustom: "#123456",
|
|
} as any);
|
|
|
|
const { blocks: updatedBlocks } = store.getState();
|
|
const updatedSection = updatedBlocks.find((b) => b.id === sectionBlock.id)!;
|
|
const updatedProps = updatedSection.props as SectionBlockProps;
|
|
|
|
expect(updatedProps.backgroundColorCustom).toBe("#123456");
|
|
});
|
|
|
|
it("섹션 블록에 세로 패딩/최대 폭/컬럼 간 간격(px)을 설정할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addSectionBlock();
|
|
|
|
const { blocks } = store.getState();
|
|
const sectionBlock = blocks.find((b) => b.type === "section")!;
|
|
|
|
store.getState().updateBlock(sectionBlock.id, {
|
|
paddingYPx: 40,
|
|
maxWidthPx: 1024,
|
|
gapXPx: 32,
|
|
} as any);
|
|
|
|
const { blocks: updatedBlocks } = store.getState();
|
|
const updatedSection = updatedBlocks.find((b) => b.id === sectionBlock.id)!;
|
|
const updatedProps = updatedSection.props as SectionBlockProps;
|
|
|
|
expect(updatedProps.paddingYPx).toBe(40);
|
|
expect(updatedProps.maxWidthPx).toBe(1024);
|
|
expect(updatedProps.gapXPx).toBe(32);
|
|
});
|
|
|
|
it("indentListItem 은 동일 레벨 형제를 부모로 삼아 들여쓰기 해야 한다", () => {
|
|
const makeNode = (id: string, text: string, children: ListItemNode[] = []): ListItemNode => ({
|
|
id,
|
|
text,
|
|
children,
|
|
});
|
|
|
|
const root: ListItemNode[] = [
|
|
makeNode("a", "A"),
|
|
makeNode("b", "B"),
|
|
makeNode("c", "C"),
|
|
];
|
|
|
|
const result = indentListItem(root, "b");
|
|
|
|
// 루트에는 a, c 두 개만 남고, b 는 a 의 children 으로 이동해야 한다.
|
|
expect(result.map((n) => n.id)).toEqual(["a", "c"]);
|
|
const aNode = result[0];
|
|
expect(aNode.children).toBeTruthy();
|
|
expect(aNode.children!.map((n) => n.id)).toEqual(["b"]);
|
|
});
|
|
|
|
it("indentListItem 은 첫 번째 아이템을 들여쓰기 시도해도 변경하지 않는다", () => {
|
|
const root: ListItemNode[] = [
|
|
{ id: "a", text: "A", children: [] },
|
|
{ id: "b", text: "B", children: [] },
|
|
];
|
|
|
|
const result = indentListItem(root, "a");
|
|
// 첫 번째 아이템은 들여쓰기 할 수 없으므로 그대로 유지되어야 한다.
|
|
expect(result).toEqual(root);
|
|
});
|
|
|
|
it("outdentListItem 은 부모의 다음 형제로 내어쓰기 해야 한다", () => {
|
|
const root: ListItemNode[] = [
|
|
{
|
|
id: "a",
|
|
text: "A",
|
|
children: [
|
|
{ id: "b", text: "B", children: [] },
|
|
],
|
|
},
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
const result = outdentListItem(root, "b");
|
|
|
|
// b 는 a 의 children 에서 제거되고, 루트에서 a 다음 위치로 이동해야 한다.
|
|
expect(result.map((n) => n.id)).toEqual(["a", "b", "c"]);
|
|
expect(result[0].children).toEqual([]);
|
|
});
|
|
|
|
it("moveListItemUp 은 동일 부모 내에서 아이템을 한 칸 위로 이동시켜야 한다", () => {
|
|
const root: ListItemNode[] = [
|
|
{ id: "a", text: "A", children: [] },
|
|
{ id: "b", text: "B", children: [] },
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
const result = moveListItemUp(root, "c");
|
|
expect(result.map((n) => n.id)).toEqual(["a", "c", "b"]);
|
|
});
|
|
|
|
it("moveListItemDown 은 동일 부모 내에서 아이템을 한 칸 아래로 이동시켜야 한다", () => {
|
|
const root: ListItemNode[] = [
|
|
{ id: "a", text: "A", children: [] },
|
|
{ id: "b", text: "B", children: [] },
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
const result = moveListItemDown(root, "a");
|
|
expect(result.map((n) => n.id)).toEqual(["b", "a", "c"]);
|
|
});
|
|
|
|
it("리스트 블록은 중첩 리스트용 itemsTree 기본 구조도 함께 가져야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addListBlock();
|
|
|
|
const { blocks } = store.getState();
|
|
const listBlock = blocks[0];
|
|
const listProps = listBlock.props as ListBlockProps & { itemsTree?: any[] };
|
|
|
|
expect(Array.isArray(listProps.itemsTree)).toBe(true);
|
|
expect(listProps.itemsTree!.length).toBeGreaterThanOrEqual(1);
|
|
|
|
const firstNode = listProps.itemsTree![0];
|
|
expect(typeof firstNode.id).toBe("string");
|
|
expect(firstNode.id.length).toBeGreaterThan(0);
|
|
expect(typeof firstNode.text).toBe("string");
|
|
expect(Array.isArray(firstNode.children)).toBe(true);
|
|
});
|
|
|
|
it("selectListItem 으로 현재 선택된 리스트 아이템 ID 를 상태에 저장할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const initialState = store.getState() as any;
|
|
expect(initialState.selectedListItemId ?? null).toBeNull();
|
|
|
|
(store.getState() as any).selectListItem("item_1");
|
|
expect((store.getState() as any).selectedListItemId).toBe("item_1");
|
|
|
|
(store.getState() as any).selectListItem(null);
|
|
expect((store.getState() as any).selectedListItemId).toBeNull();
|
|
});
|
|
|
|
it("indentSelectedListItem 은 선택된 리스트 아이템을 들여쓰기 유틸을 통해 업데이트해야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addListBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const listBlock = blocks.find((b) => b.type === "list")!;
|
|
const listProps = listBlock.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
|
|
|
const initialTree: ListItemNode[] = [
|
|
{ id: "a", text: "A", children: [] },
|
|
{ id: "b", text: "B", children: [] },
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
|
stateAny.selectListItem("b");
|
|
|
|
stateAny.indentSelectedListItem(listBlock.id);
|
|
|
|
({ blocks } = store.getState());
|
|
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
|
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
|
|
|
expect(updatedProps.itemsTree).toBeTruthy();
|
|
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["a", "c"]);
|
|
const aNode = updatedProps.itemsTree![0];
|
|
expect(aNode.children!.map((n) => n.id)).toEqual(["b"]);
|
|
});
|
|
|
|
it("outdentSelectedListItem 은 선택된 리스트 아이템을 부모의 다음 형제로 내어쓰기해야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addListBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const listBlock = blocks.find((b) => b.type === "list")!;
|
|
|
|
const initialTree: ListItemNode[] = [
|
|
{
|
|
id: "a",
|
|
text: "A",
|
|
children: [
|
|
{ id: "b", text: "B", children: [] },
|
|
],
|
|
},
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
|
stateAny.selectListItem("b");
|
|
|
|
stateAny.outdentSelectedListItem(listBlock.id);
|
|
|
|
({ blocks } = store.getState());
|
|
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
|
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
|
|
|
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["a", "b", "c"]);
|
|
expect(updatedProps.itemsTree![0].children).toEqual([]);
|
|
});
|
|
|
|
it("moveSelectedListItemUp 은 선택된 리스트 아이템을 같은 레벨에서 한 칸 위로 이동시켜야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addListBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const listBlock = blocks.find((b) => b.type === "list")!;
|
|
|
|
const initialTree: ListItemNode[] = [
|
|
{ id: "a", text: "A", children: [] },
|
|
{ id: "b", text: "B", children: [] },
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
|
stateAny.selectListItem("c");
|
|
|
|
stateAny.moveSelectedListItemUp(listBlock.id);
|
|
|
|
({ blocks } = store.getState());
|
|
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
|
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
|
|
|
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["a", "c", "b"]);
|
|
});
|
|
|
|
it("moveSelectedListItemDown 은 선택된 리스트 아이템을 같은 레벨에서 한 칸 아래로 이동시켜야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addListBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const listBlock = blocks.find((b) => b.type === "list")!;
|
|
|
|
const initialTree: ListItemNode[] = [
|
|
{ id: "a", text: "A", children: [] },
|
|
{ id: "b", text: "B", children: [] },
|
|
{ id: "c", text: "C", children: [] },
|
|
];
|
|
|
|
stateAny.updateBlock(listBlock.id, { itemsTree: initialTree } as any);
|
|
stateAny.selectListItem("a");
|
|
|
|
stateAny.moveSelectedListItemDown(listBlock.id);
|
|
|
|
({ blocks } = store.getState());
|
|
const updatedList = blocks.find((b) => b.id === listBlock.id)!;
|
|
const updatedProps = updatedList.props as ListBlockProps & { itemsTree?: ListItemNode[] };
|
|
|
|
expect(updatedProps.itemsTree!.map((n) => n.id)).toEqual(["b", "a", "c"]);
|
|
});
|
|
|
|
it("buildItemsTreeFromItems 는 단순 문자열 배열을 flat ListItemNode 트리로 변환해야 한다", () => {
|
|
const items = ["하나", "둘", "셋"];
|
|
const tree = buildItemsTreeFromItems("list_1", items);
|
|
|
|
expect(tree.map((n) => n.text)).toEqual(items);
|
|
expect(tree.map((n) => n.id)).toEqual(["list_1_item_1", "list_1_item_2", "list_1_item_3"]);
|
|
expect(tree.every((n) => Array.isArray(n.children) && n.children.length === 0)).toBe(true);
|
|
});
|
|
|
|
it("flattenItemsTreeToItems 는 중첩 리스트 트리를 depth-first 순서의 문자열 배열로 플랫하게 변환해야 한다", () => {
|
|
const tree: ListItemNode[] = [
|
|
{
|
|
id: "a",
|
|
text: "A",
|
|
children: [
|
|
{ id: "a1", text: "A-1", children: [] },
|
|
{ id: "a2", text: "A-2", children: [] },
|
|
],
|
|
},
|
|
{
|
|
id: "b",
|
|
text: "B",
|
|
children: [
|
|
{
|
|
id: "b1",
|
|
text: "B-1",
|
|
children: [{ id: "b1a", text: "B-1-a", children: [] }],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const items = flattenItemsTreeToItems(tree);
|
|
|
|
expect(items).toEqual(["A", "A-1", "A-2", "B", "B-1", "B-1-a"]);
|
|
});
|
|
|
|
it("linesToItemsTree 는 depth 정보에 따라 중첩 리스트 트리를 생성해야 한다", () => {
|
|
const lines: ListLine[] = [
|
|
{ depth: 0, text: "A" },
|
|
{ depth: 1, text: "A-1" },
|
|
{ depth: 1, text: "A-2" },
|
|
{ depth: 0, text: "B" },
|
|
{ depth: 1, text: "B-1" },
|
|
{ depth: 2, text: "B-1-a" },
|
|
];
|
|
|
|
const tree = linesToItemsTree("list_depth", lines);
|
|
|
|
expect(tree.map((n) => n.text)).toEqual(["A", "B"]);
|
|
expect(tree[0].children?.map((n) => n.text)).toEqual(["A-1", "A-2"]);
|
|
|
|
const bNode = tree[1];
|
|
expect(bNode.text).toBe("B");
|
|
expect(bNode.children?.[0].text).toBe("B-1");
|
|
expect(bNode.children?.[0].children?.[0].text).toBe("B-1-a");
|
|
});
|
|
|
|
it("itemsTreeToLines 는 중첩 리스트 트리를 depth 정보가 포함된 라인 배열로 직렬화해야 한다", () => {
|
|
const tree: ListItemNode[] = [
|
|
{
|
|
id: "a",
|
|
text: "A",
|
|
children: [
|
|
{ id: "a1", text: "A-1", children: [] },
|
|
{ id: "a2", text: "A-2", children: [] },
|
|
],
|
|
},
|
|
{
|
|
id: "b",
|
|
text: "B",
|
|
children: [
|
|
{
|
|
id: "b1",
|
|
text: "B-1",
|
|
children: [{ id: "b1a", text: "B-1-a", children: [] }],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const lines = itemsTreeToLines(tree);
|
|
|
|
expect(lines).toEqual<ReadonlyArray<ListLine>>([
|
|
{ depth: 0, text: "A" },
|
|
{ depth: 1, text: "A-1" },
|
|
{ depth: 1, text: "A-2" },
|
|
{ depth: 0, text: "B" },
|
|
{ depth: 1, text: "B-1" },
|
|
{ depth: 2, text: "B-1-a" },
|
|
]);
|
|
});
|
|
|
|
it("ListLine 배열을 textarea 에 쓸 수 있는 문자열로 직렬화할 수 있어야 한다", () => {
|
|
const lines: ListLine[] = [
|
|
{ depth: 0, text: "A" },
|
|
{ depth: 1, text: "A-1" },
|
|
{ depth: 1, text: "A-2" },
|
|
{ depth: 0, text: "B" },
|
|
{ depth: 1, text: "B-1" },
|
|
{ depth: 2, text: "B-1-a" },
|
|
];
|
|
|
|
const text = (stringifyLinesToTextarea as any)(lines);
|
|
const rows = text.split(/\r?\n/);
|
|
|
|
expect(rows).toEqual([
|
|
"A",
|
|
" A-1",
|
|
" A-2",
|
|
"B",
|
|
" B-1",
|
|
" B-1-a",
|
|
]);
|
|
});
|
|
|
|
it("텍스트 블록에 글자 간격(letterSpacingCustom)을 em 단위로 설정할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
|
|
const { blocks } = store.getState();
|
|
const textBlock = blocks[0];
|
|
const textProps = textBlock.props as TextBlockProps;
|
|
|
|
expect(textProps.letterSpacingCustom).toBeUndefined();
|
|
|
|
store.getState().updateBlock(textBlock.id, {
|
|
letterSpacingCustom: "0.05em",
|
|
} as any);
|
|
|
|
const { blocks: updatedBlocks } = store.getState();
|
|
const updatedTextProps = updatedBlocks[0].props as TextBlockProps;
|
|
|
|
expect(updatedTextProps.letterSpacingCustom).toBe("0.05em");
|
|
});
|
|
|
|
it("구분선 블록을 추가하면 기본 align/thickness 와 함께 추가되고 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addDividerBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("divider");
|
|
|
|
const dividerProps = blocks[0].props as DividerBlockProps;
|
|
expect(dividerProps.align).toBe("center");
|
|
expect(dividerProps.thickness).toBe("thin");
|
|
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("리스트 블록을 추가하면 기본 items/ordered/align 과 함께 추가되고 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addListBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("list");
|
|
|
|
const listProps = blocks[0].props as ListBlockProps;
|
|
expect(Array.isArray(listProps.items)).toBe(true);
|
|
expect(listProps.items.length).toBeGreaterThanOrEqual(1);
|
|
expect(listProps.ordered).toBe(false);
|
|
expect(listProps.align).toBe("left");
|
|
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("reorderBlocks 호출 시 블록 배열 순서가 변경되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 블록 세 개를 추가하고 각기 다른 텍스트로 수정한다.
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
|
|
store.getState().updateBlock(blocks[0].id, { text: "블록 A" });
|
|
store.getState().updateBlock(blocks[1].id, { text: "블록 B" });
|
|
store.getState().updateBlock(blocks[2].id, { text: "블록 C" });
|
|
|
|
const [aId, bId, cId] = blocks.map((b) => b.id);
|
|
|
|
// B를 맨 앞으로 이동시키는 순서 변경을 수행한다.
|
|
store.getState().reorderBlocks(bId, aId);
|
|
|
|
blocks = store.getState().blocks;
|
|
|
|
expect(blocks.map((b) => b.id)).toEqual([bId, aId, cId]);
|
|
expect(blocks.map((b) => (b.props as TextBlockProps).text)).toEqual([
|
|
"블록 B",
|
|
"블록 A",
|
|
"블록 C",
|
|
]);
|
|
});
|
|
|
|
it("버튼 블록을 추가하고 라벨/링크를 업데이트할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 텍스트 블록 외에 버튼 블록을 추가하는 액션을 호출한다고 가정한다.
|
|
store.getState().addButtonBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("button");
|
|
const buttonProps = blocks[0].props as ButtonBlockProps;
|
|
expect(buttonProps.label).toBe("버튼");
|
|
expect(buttonProps.href).toBe("#");
|
|
|
|
// 버튼 라벨과 링크를 업데이트한다.
|
|
store.getState().updateBlock(blocks[0].id, {
|
|
label: "자세히 보기",
|
|
href: "https://example.com",
|
|
} as any);
|
|
|
|
const { blocks: updatedBlocks } = store.getState();
|
|
const updatedButtonProps = updatedBlocks[0].props as ButtonBlockProps;
|
|
expect(updatedButtonProps.label).toBe("자세히 보기");
|
|
expect(updatedButtonProps.href).toBe("https://example.com");
|
|
expect(selectedBlockId).toBe(updatedBlocks[0].id);
|
|
});
|
|
|
|
it("이미지 블록을 추가하면 기본 src/alt 및 스타일 기본값과 함께 추가되고 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addImageBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("image");
|
|
|
|
const imageProps = blocks[0].props as ImageBlockProps;
|
|
expect(imageProps.src).toBe("");
|
|
expect(imageProps.alt).toBe("이미지 설명");
|
|
// 정렬/너비/모서리 기본값도 함께 검증한다.
|
|
expect(imageProps.align).toBe("center");
|
|
expect(imageProps.widthMode).toBe("auto");
|
|
expect(imageProps.borderRadius).toBe("md");
|
|
|
|
// 루트에서 추가한 경우에는 sectionId/columnId 가 null 이어야 한다.
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("섹션이 선택된 상태에서 텍스트 블록을 추가하면 해당 섹션의 첫 컬럼에 배치되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 섹션 블록을 하나 추가하고 기본 1컬럼 레이아웃을 사용한다.
|
|
store.getState().addSectionBlock();
|
|
|
|
const { blocks: afterSection } = store.getState();
|
|
expect(afterSection).toHaveLength(1);
|
|
const sectionBlock = afterSection[0];
|
|
expect(sectionBlock.type).toBe("section");
|
|
|
|
const sectionProps = sectionBlock.props as any;
|
|
expect(Array.isArray(sectionProps.columns)).toBe(true);
|
|
expect(sectionProps.columns.length).toBeGreaterThan(0);
|
|
|
|
// 섹션을 선택한 후 텍스트 블록을 추가한다.
|
|
store.getState().selectBlock(sectionBlock.id);
|
|
store.getState().addTextBlock();
|
|
|
|
const { blocks: finalBlocks } = store.getState();
|
|
expect(finalBlocks).toHaveLength(2);
|
|
|
|
const textBlock = finalBlocks.find((b) => b.type === "text")!;
|
|
|
|
// 새 텍스트 블록의 sectionId/columnId가 선택된 섹션과 첫 컬럼을 가리켜야 한다.
|
|
expect((textBlock as any).sectionId).toBe(sectionBlock.id);
|
|
expect((textBlock as any).columnId).toBe(sectionProps.columns[0].id);
|
|
});
|
|
|
|
it("블록이 선택된 상태에서 새 텍스트 블록을 추가하면 동일한 섹션/컬럼에 배치되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 섹션 + 텍스트 블록을 만든다.
|
|
store.getState().addSectionBlock();
|
|
const { blocks: afterSection } = store.getState();
|
|
const sectionBlock = afterSection[0];
|
|
const sectionProps = sectionBlock.props as any;
|
|
|
|
store.getState().selectBlock(sectionBlock.id);
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const firstText = blocks.find((b) => b.type === "text")!;
|
|
|
|
// 첫 텍스트 블록의 위치를 기준으로 한다.
|
|
store.getState().selectBlock(firstText.id);
|
|
store.getState().addTextBlock();
|
|
|
|
blocks = store.getState().blocks;
|
|
const textBlocks = blocks.filter((b) => b.type === "text");
|
|
expect(textBlocks).toHaveLength(2);
|
|
|
|
const [t1, t2] = textBlocks as any[];
|
|
|
|
// 두 번째 텍스트 블록도 같은 섹션/컬럼에 있어야 한다.
|
|
expect(t1.sectionId).toBe(sectionBlock.id);
|
|
expect(t2.sectionId).toBe(sectionBlock.id);
|
|
expect(t1.columnId).toBe(sectionProps.columns[0].id);
|
|
expect(t2.columnId).toBe(sectionProps.columns[0].id);
|
|
});
|
|
|
|
it("moveBlock 호출 시 블록의 sectionId/columnId가 변경되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 섹션 + 텍스트 블록 1개를 만든다.
|
|
store.getState().addSectionBlock();
|
|
const { blocks: afterSection } = store.getState();
|
|
const sectionBlock = afterSection[0];
|
|
const sectionProps = sectionBlock.props as any;
|
|
|
|
store.getState().selectBlock(sectionBlock.id);
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const textBlock = blocks.find((b) => b.type === "text") as any;
|
|
|
|
// 초기 위치는 섹션의 첫 컬럼이어야 한다.
|
|
expect(textBlock.sectionId).toBe(sectionBlock.id);
|
|
expect(textBlock.columnId).toBe(sectionProps.columns[0].id);
|
|
|
|
// 섹션 레이아웃을 2컬럼으로 바꾸고 두 번째 컬럼으로 이동시킨다.
|
|
const updatedColumns = [
|
|
{ id: `${sectionBlock.id}_col_1`, span: 6 },
|
|
{ id: `${sectionBlock.id}_col_2`, span: 6 },
|
|
];
|
|
|
|
store.getState().updateBlock(sectionBlock.id, { columns: updatedColumns } as any);
|
|
|
|
store.getState().moveBlock(textBlock.id, sectionBlock.id, updatedColumns[1].id);
|
|
|
|
blocks = store.getState().blocks;
|
|
const moved = blocks.find((b) => b.id === textBlock.id) as any;
|
|
|
|
expect(moved.sectionId).toBe(sectionBlock.id);
|
|
expect(moved.columnId).toBe(updatedColumns[1].id);
|
|
});
|
|
|
|
it("Hero 템플릿 섹션을 추가하면 섹션과 기본 텍스트/버튼 블록들이 한번에 생성되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 템플릿 액션을 호출한다고 가정한다.
|
|
// Hero 템플릿은 기본적으로 1개의 섹션과 최소 1개의 텍스트/1개의 버튼 블록을 생성한다고 정의한다.
|
|
// (구체적인 props 내용은 구현에서 맞춰가되, 타입/개수/섹션/컬럼 배치만 검증한다.)
|
|
store.getState().addHeroTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
// 섹션 1개 + 텍스트/버튼 블록이 최소 1개씩 존재해야 한다.
|
|
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
const textBlocks = blocks.filter((b) => b.type === "text");
|
|
const buttonBlocks = blocks.filter((b) => b.type === "button");
|
|
|
|
expect(sectionBlocks).toHaveLength(1);
|
|
expect(textBlocks.length).toBeGreaterThanOrEqual(1);
|
|
expect(buttonBlocks.length).toBeGreaterThanOrEqual(1);
|
|
|
|
const section = sectionBlocks[0] as any;
|
|
const columns = (section.props as any).columns;
|
|
expect(Array.isArray(columns)).toBe(true);
|
|
expect(columns.length).toBeGreaterThanOrEqual(1);
|
|
|
|
textBlocks.forEach((tb) => {
|
|
expect(tb.sectionId).toBe(section.id);
|
|
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
});
|
|
|
|
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
});
|
|
|
|
it("CTA 템플릿 섹션을 추가하면 텍스트와 버튼이 포함된 섹션이 생성되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// CTA 템플릿 액션을 호출한다고 가정한다.
|
|
store.getState().addCtaTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
expect(sectionBlocks).toHaveLength(1);
|
|
|
|
const section = sectionBlocks[0] as any;
|
|
const columns = (section.props as any).columns;
|
|
expect(Array.isArray(columns)).toBe(true);
|
|
expect(columns.length).toBeGreaterThanOrEqual(1);
|
|
|
|
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
const buttonBlocks = blocks.filter((b) => b.type === "button") as any[];
|
|
|
|
expect(textBlocks.length).toBeGreaterThanOrEqual(1);
|
|
expect(buttonBlocks.length).toBeGreaterThanOrEqual(1);
|
|
|
|
textBlocks.forEach((tb) => {
|
|
expect(tb.sectionId).toBe(section.id);
|
|
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
});
|
|
|
|
buttonBlocks.forEach((bb) => {
|
|
expect(bb.sectionId).toBe(section.id);
|
|
expect(columns.some((col: any) => col.id === bb.columnId)).toBe(true);
|
|
});
|
|
|
|
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
});
|
|
|
|
it("FAQ 템플릿 섹션을 추가하면 질문/답변 쌍이 포함된 섹션이 생성되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addFaqTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
expect(sectionBlocks).toHaveLength(1);
|
|
|
|
const section = sectionBlocks[0] as any;
|
|
const columns = (section.props as any).columns;
|
|
expect(Array.isArray(columns)).toBe(true);
|
|
expect(columns.length).toBeGreaterThanOrEqual(1);
|
|
|
|
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
|
|
// 최소 3개의 FAQ 항목(질문+답변 쌍)을 가정한다.
|
|
expect(textBlocks.length).toBeGreaterThanOrEqual(6);
|
|
|
|
textBlocks.forEach((tb) => {
|
|
expect(tb.sectionId).toBe(section.id);
|
|
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
});
|
|
|
|
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
});
|
|
|
|
it("Pricing 템플릿 섹션을 추가하면 요금제 카드(플랜 이름/가격/설명)가 3개 생성되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addPricingTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
expect(sectionBlocks).toHaveLength(1);
|
|
|
|
const section = sectionBlocks[0] as any;
|
|
const columns = (section.props as any).columns;
|
|
expect(Array.isArray(columns)).toBe(true);
|
|
expect(columns.length).toBe(3);
|
|
|
|
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
|
|
// 3개의 요금제에 대해 각 컬럼에 최소 2개 텍스트(플랜 이름 + 가격/설명)를 가정한다.
|
|
expect(textBlocks.length).toBeGreaterThanOrEqual(6);
|
|
|
|
textBlocks.forEach((tb) => {
|
|
expect(tb.sectionId).toBe(section.id);
|
|
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
});
|
|
|
|
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
});
|
|
|
|
it("Testimonials 템플릿 섹션을 추가하면 후기(본문/작성자)가 3개 생성되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTestimonialsTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
expect(sectionBlocks).toHaveLength(1);
|
|
|
|
const section = sectionBlocks[0] as any;
|
|
const columns = (section.props as any).columns;
|
|
expect(Array.isArray(columns)).toBe(true);
|
|
expect(columns.length).toBe(3);
|
|
|
|
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
|
|
// 3개의 후기 카드에 대해 각 컬럼에 최소 2개 텍스트(본문 + 작성자)를 가정한다.
|
|
expect(textBlocks.length).toBeGreaterThanOrEqual(6);
|
|
|
|
textBlocks.forEach((tb) => {
|
|
expect(tb.sectionId).toBe(section.id);
|
|
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
});
|
|
|
|
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
});
|
|
|
|
it("undo 호출 시 마지막 변경 이전의 블록 상태로 되돌려야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 텍스트 블록을 두 개 추가한다.
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks, selectedBlockId } = store.getState();
|
|
expect(blocks).toHaveLength(2);
|
|
|
|
const firstId = blocks[0].id;
|
|
|
|
store.getState().undo();
|
|
|
|
({ blocks, selectedBlockId } = store.getState());
|
|
|
|
// 마지막 추가 이전 상태로 되돌아가야 하므로 블록은 1개만 남아야 한다.
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].id).toBe(firstId);
|
|
expect(selectedBlockId).toBe(firstId);
|
|
});
|
|
|
|
it("redo 호출 시 undo로 되돌린 변경을 다시 적용해야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
expect(blocks).toHaveLength(2);
|
|
|
|
store.getState().undo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks).toHaveLength(1);
|
|
|
|
store.getState().redo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks).toHaveLength(2);
|
|
});
|
|
|
|
it("removeBlock 호출 시 해당 블록이 삭제되고 선택 상태가 적절히 변경되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 텍스트 블록 두 개를 추가한다.
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks, selectedBlockId } = store.getState();
|
|
expect(blocks).toHaveLength(2);
|
|
|
|
const firstId = blocks[0].id;
|
|
const secondId = blocks[1].id;
|
|
|
|
// 두 번째 블록을 선택한 상태에서 삭제한다.
|
|
store.getState().selectBlock(secondId);
|
|
store.getState().removeBlock(secondId);
|
|
|
|
({ blocks, selectedBlockId } = store.getState());
|
|
|
|
// 두 번째 블록만 삭제되고 첫 번째 블록은 남아 있어야 한다.
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].id).toBe(firstId);
|
|
expect(selectedBlockId).toBe(firstId);
|
|
});
|
|
|
|
it("duplicateBlock 호출 시 같은 내용의 블록이 같은 위치 정보로 복제되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 섹션 + 텍스트 블록을 하나 만든다.
|
|
store.getState().addSectionBlock();
|
|
const { blocks: afterSection } = store.getState();
|
|
const sectionBlock = afterSection[0] as any;
|
|
|
|
store.getState().selectBlock(sectionBlock.id);
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const original = blocks.find((b) => b.type === "text") as any;
|
|
|
|
expect(original).toBeTruthy();
|
|
|
|
// duplicateBlock 으로 복제한다.
|
|
store.getState().duplicateBlock(original.id);
|
|
|
|
({ blocks } = store.getState());
|
|
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
|
|
// 텍스트 블록이 두 개가 되어야 한다.
|
|
expect(textBlocks).toHaveLength(2);
|
|
|
|
const [t1, t2] = textBlocks;
|
|
expect(t1.id).not.toBe(t2.id);
|
|
expect(t1.props).toEqual(t2.props);
|
|
expect(t2.sectionId).toBe(t1.sectionId);
|
|
});
|
|
|
|
it("폼 입력 블록을 추가하면 기본 label/formFieldName 과 함께 루트에 추가되고 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const stateAny = store.getState() as any;
|
|
stateAny.addFormInputBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("formInput");
|
|
|
|
const inputProps = blocks[0].props as any;
|
|
expect(typeof inputProps.label).toBe("string");
|
|
expect(inputProps.label.length).toBeGreaterThan(0);
|
|
// 기본 formFieldName 은 label 을 기반으로 한 키거나, 최소한 truthy 여야 한다고 가정
|
|
expect(typeof inputProps.formFieldName).toBe("string");
|
|
expect(inputProps.formFieldName.length).toBeGreaterThan(0);
|
|
|
|
// 루트에 추가된 경우 sectionId/columnId 는 null 이어야 한다.
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("폼 블록의 기본 컨트롤러 속성(fieldIds/submitButtonId)이 올바르게 초기화되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const stateAny = store.getState() as any;
|
|
stateAny.addFormBlock();
|
|
|
|
const { blocks } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("form");
|
|
|
|
const formProps = blocks[0].props as any;
|
|
// 기본적으로 fieldIds 는 빈 배열, submitButtonId 는 undefined 로 본다.
|
|
expect(Array.isArray(formProps.fieldIds) || formProps.fieldIds === undefined).toBe(true);
|
|
if (Array.isArray(formProps.fieldIds)) {
|
|
expect(formProps.fieldIds).toHaveLength(0);
|
|
}
|
|
expect(formProps.submitButtonId === undefined || formProps.submitButtonId === null).toBe(true);
|
|
});
|
|
|
|
it("폼 셀렉트 블록을 추가하면 기본 label/formFieldName/options 와 함께 루트에 추가되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const stateAny = store.getState() as any;
|
|
// 아직 구현되지 않은 액션이므로 실패 상태에서 시작
|
|
stateAny.addFormSelectBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("formSelect");
|
|
|
|
const selectProps = blocks[0].props as any;
|
|
expect(typeof selectProps.label).toBe("string");
|
|
expect(selectProps.label.length).toBeGreaterThan(0);
|
|
expect(typeof selectProps.formFieldName).toBe("string");
|
|
expect(selectProps.formFieldName.length).toBeGreaterThan(0);
|
|
expect(Array.isArray(selectProps.options)).toBe(true);
|
|
expect(selectProps.options.length).toBeGreaterThan(0);
|
|
|
|
// 루트에 추가된 경우 sectionId/columnId 는 null 이어야 한다.
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("폼 체크박스 블록을 추가하면 기본 groupLabel/formFieldName 과 함께 루트에 추가되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const stateAny = store.getState() as any;
|
|
stateAny.addFormCheckboxBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("formCheckbox");
|
|
|
|
const checkboxProps = blocks[0].props as any;
|
|
expect(typeof checkboxProps.groupLabel).toBe("string");
|
|
expect(checkboxProps.groupLabel.length).toBeGreaterThan(0);
|
|
expect(typeof checkboxProps.formFieldName).toBe("string");
|
|
expect(checkboxProps.formFieldName.length).toBeGreaterThan(0);
|
|
// 그룹 타이틀의 모드는 존재하면 기본값이 text 여야 한다.
|
|
expect(checkboxProps.groupLabelMode ?? "text").toBe("text");
|
|
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("폼 라디오 그룹 블록을 추가하면 groupLabel/formFieldName/options 와 함께 루트에 추가되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const stateAny = store.getState() as any;
|
|
stateAny.addFormRadioBlock();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].type).toBe("formRadio");
|
|
|
|
const radioProps = blocks[0].props as any;
|
|
expect(typeof radioProps.groupLabel).toBe("string");
|
|
expect(radioProps.groupLabel.length).toBeGreaterThan(0);
|
|
expect(typeof radioProps.formFieldName).toBe("string");
|
|
expect(radioProps.formFieldName.length).toBeGreaterThan(0);
|
|
expect(Array.isArray(radioProps.options)).toBe(true);
|
|
expect(radioProps.options.length).toBeGreaterThan(0);
|
|
// 라디오 그룹 타이틀 모드도 존재한다면 기본값은 text 로 본다.
|
|
expect(radioProps.groupLabelMode ?? "text").toBe("text");
|
|
|
|
expect((blocks[0] as any).sectionId).toBeNull();
|
|
expect((blocks[0] as any).columnId).toBeNull();
|
|
|
|
expect(selectedBlockId).toBe(blocks[0].id);
|
|
});
|
|
|
|
it("폼 블록의 fieldIds/submitButtonId 를 updateBlock 으로 업데이트할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
const stateAny = store.getState() as any;
|
|
stateAny.addFormBlock();
|
|
|
|
const { blocks } = store.getState();
|
|
const formBlock = blocks[0];
|
|
|
|
// 임의의 필드/버튼 id 설정
|
|
const fieldIds = ["field_1", "field_2"];
|
|
const submitButtonId = "btn_submit";
|
|
|
|
store.getState().updateBlock(formBlock.id, {
|
|
fieldIds,
|
|
submitButtonId,
|
|
} as any);
|
|
|
|
const { blocks: updatedBlocks } = store.getState();
|
|
const updatedFormProps = updatedBlocks[0].props as any;
|
|
|
|
expect(updatedFormProps.fieldIds).toEqual(fieldIds);
|
|
expect(updatedFormProps.submitButtonId).toBe(submitButtonId);
|
|
});
|
|
|
|
it("addHeroTemplateSection 호출 시 Hero 템플릿 섹션과 블록들이 추가되고 마지막 블록이 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addHeroTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
expect(blocks.length).toBeGreaterThanOrEqual(4);
|
|
|
|
const section = blocks.find((b) => b.type === "section");
|
|
expect(section).toBeTruthy();
|
|
|
|
const heroBlocks = blocks.filter((b) => b.sectionId === section!.id);
|
|
// 헤드라인/서브텍스트/버튼 3개가 섹션 내부에 있어야 한다.
|
|
expect(heroBlocks).toHaveLength(3);
|
|
expect(heroBlocks.map((b) => b.type)).toEqual(["text", "text", "button"]);
|
|
|
|
// 마지막 블록이 선택 상태여야 한다.
|
|
const lastHeroBlock = heroBlocks[heroBlocks.length - 1];
|
|
expect(selectedBlockId).toBe(lastHeroBlock.id);
|
|
});
|
|
|
|
it("addFeaturesTemplateSection 호출 시 3컬럼 Feature 텍스트 블록들이 추가되고 마지막 블록이 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addFeaturesTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
// 섹션 1개 + 각 컬럼당 제목/설명 2개씩, 총 7개 블록이 생성된다.
|
|
expect(blocks.length).toBe(7);
|
|
|
|
const section = blocks.find((b) => b.type === "section");
|
|
expect(section).toBeTruthy();
|
|
|
|
const featureBlocks = blocks.filter((b) => b.sectionId === section!.id);
|
|
expect(featureBlocks).toHaveLength(6);
|
|
expect(featureBlocks.every((b) => b.type === "text")).toBe(true);
|
|
|
|
// 마지막 Feature 블록이 선택되어야 한다.
|
|
const lastFeature = featureBlocks[featureBlocks.length - 1];
|
|
expect(selectedBlockId).toBe(lastFeature.id);
|
|
});
|
|
|
|
it("addCtaTemplateSection 호출 시 CTA 섹션과 텍스트/버튼이 추가되고 버튼이 선택되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
stateAny.addCtaTemplateSection();
|
|
|
|
const { blocks, selectedBlockId } = store.getState();
|
|
expect(blocks.length).toBe(3);
|
|
|
|
const section = blocks.find((b) => b.type === "section");
|
|
expect(section).toBeTruthy();
|
|
|
|
const ctaBlocks = blocks.filter((b) => b.sectionId === section!.id);
|
|
expect(ctaBlocks).toHaveLength(2);
|
|
expect(ctaBlocks.map((b) => b.type).sort()).toEqual(["button", "text"].sort());
|
|
|
|
const buttonBlock = ctaBlocks.find((b) => b.type === "button");
|
|
expect(buttonBlock).toBeTruthy();
|
|
expect(selectedBlockId).toBe(buttonBlock!.id);
|
|
});
|
|
|
|
it("projectConfig 기본값과 updateProjectConfig 액션으로 프로젝트 설정을 관리할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
expect(stateAny.projectConfig).toBeTruthy();
|
|
expect(stateAny.projectConfig.title).toBe("새 페이지");
|
|
expect(stateAny.projectConfig.slug).toBe("my-landing");
|
|
expect(stateAny.projectConfig.canvasPreset).toBe("full");
|
|
expect(stateAny.projectConfig.canvasBgColorHex).toBe("#020617");
|
|
expect(stateAny.projectConfig.bodyBgColorHex).toBe("#020617");
|
|
expect(stateAny.projectConfig.headHtml).toBe("");
|
|
expect(stateAny.projectConfig.trackingScript).toBe("");
|
|
|
|
stateAny.updateProjectConfig({
|
|
title: "랜딩 페이지",
|
|
slug: "landing-page",
|
|
canvasPreset: "desktop",
|
|
bodyBgColorHex: "#111111",
|
|
});
|
|
|
|
const next = store.getState() as any;
|
|
expect(next.projectConfig.title).toBe("랜딩 페이지");
|
|
expect(next.projectConfig.slug).toBe("landing-page");
|
|
expect(next.projectConfig.canvasPreset).toBe("desktop");
|
|
expect(next.projectConfig.bodyBgColorHex).toBe("#111111");
|
|
|
|
stateAny.updateProjectConfig({
|
|
canvasPreset: "custom",
|
|
canvasWidthPx: 1024,
|
|
});
|
|
|
|
const custom = store.getState() as any;
|
|
expect(custom.projectConfig.canvasPreset).toBe("custom");
|
|
expect(custom.projectConfig.canvasWidthPx).toBe(1024);
|
|
});
|
|
|
|
it("여러 블록/템플릿 추가 액션은 history 에 스냅샷을 기록하고 undo/redo 로 되돌릴 수 있어야 한다", () => {
|
|
const actionNames = [
|
|
"addTextBlock",
|
|
"addButtonBlock",
|
|
"addImageBlock",
|
|
"addVideoBlock",
|
|
"addDividerBlock",
|
|
"addListBlock",
|
|
"addSectionBlock",
|
|
"addFormBlock",
|
|
"addFormInputBlock",
|
|
"addFormSelectBlock",
|
|
"addFormCheckboxBlock",
|
|
"addFormRadioBlock",
|
|
"addHeroTemplateSection",
|
|
"addFeaturesTemplateSection",
|
|
"addCtaTemplateSection",
|
|
"addFaqTemplateSection",
|
|
"addPricingTemplateSection",
|
|
"addTestimonialsTemplateSection",
|
|
"addBlogTemplateSection",
|
|
"addTeamTemplateSection",
|
|
"addFooterTemplateSection",
|
|
] as const;
|
|
|
|
actionNames.forEach((name) => {
|
|
const store = createEditorStore();
|
|
const stateAny = store.getState() as any;
|
|
|
|
expect(stateAny.blocks).toHaveLength(0);
|
|
expect(stateAny.history).toHaveLength(0);
|
|
|
|
// 각 액션을 한 번 호출하면 직전 blocks 스냅샷이 history 에 쌓여야 한다.
|
|
stateAny[name]();
|
|
|
|
const after = store.getState() as any;
|
|
|
|
// 최소 한 개 이상의 블록이 생성되어야 한다.
|
|
expect(after.blocks.length).toBeGreaterThan(0);
|
|
// 직전 상태 스냅샷이 history 에 1개 쌓여야 한다.
|
|
if (after.history.length !== 1) {
|
|
throw new Error(`history length mismatch for action ${name}: ${after.history.length}`);
|
|
}
|
|
|
|
const blocksAfterAdd = after.blocks;
|
|
const expectedLength = blocksAfterAdd.length;
|
|
|
|
stateAny.undo();
|
|
const afterUndo = store.getState() as any;
|
|
// 처음 상태가 빈 배열이었으므로 undo 후에는 다시 0개가 되어야 한다.
|
|
expect(afterUndo.blocks.length).toBe(0);
|
|
|
|
stateAny.redo();
|
|
const afterRedo = store.getState() as any;
|
|
expect(afterRedo.blocks.length).toBe(expectedLength);
|
|
// redo 이후 블록 타입 배열도 대략 동일해야 한다.
|
|
expect(afterRedo.blocks.map((b: any) => b.type)).toEqual(
|
|
blocksAfterAdd.map((b: any) => b.type),
|
|
);
|
|
});
|
|
});
|
|
|
|
it("updateBlock 으로 블록 속성을 변경한 뒤 undo 하면 이전 속성으로 되돌아가야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks, history } = store.getState();
|
|
expect(blocks).toHaveLength(1);
|
|
|
|
const blockId = blocks[0].id;
|
|
const initialText = (blocks[0].props as TextBlockProps).text;
|
|
expect(history.length).toBe(1);
|
|
|
|
store.getState().updateBlock(blockId, { text: "변경된 텍스트" } as any);
|
|
|
|
({ blocks, history } = store.getState());
|
|
expect((blocks[0].props as TextBlockProps).text).toBe("변경된 텍스트");
|
|
// updateBlock 이 호출되면서 history 스택이 1개 늘어나야 한다.
|
|
expect(history.length).toBe(2);
|
|
|
|
store.getState().undo();
|
|
|
|
({ blocks, history } = store.getState());
|
|
expect((blocks[0].props as TextBlockProps).text).toBe(initialText);
|
|
expect(history.length).toBe(1);
|
|
});
|
|
|
|
it("removeBlock 호출 후 undo 하면 삭제된 블록이 복원되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks, history } = store.getState();
|
|
expect(blocks).toHaveLength(2);
|
|
|
|
const firstId = blocks[0].id;
|
|
const secondId = blocks[1].id;
|
|
|
|
(store.getState() as any).removeBlock(secondId);
|
|
|
|
({ blocks, history } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual([firstId]);
|
|
// 텍스트 블록 2개 추가(2번) + removeBlock(1번) 이므로 history 스택 길이는 3이어야 한다.
|
|
expect(history.length).toBe(3);
|
|
|
|
(store.getState() as any).undo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual([firstId, secondId]);
|
|
});
|
|
|
|
it("duplicateBlock 호출 후 undo 하면 복제된 블록이 제거되어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
expect(blocks).toHaveLength(1);
|
|
|
|
const originalId = blocks[0].id;
|
|
|
|
(store.getState() as any).duplicateBlock(originalId);
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks).toHaveLength(2);
|
|
|
|
(store.getState() as any).undo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks).toHaveLength(1);
|
|
expect(blocks[0].id).toBe(originalId);
|
|
});
|
|
|
|
it("reorderBlocks 호출 후 undo/redo 로 블록 순서를 되돌릴 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
const [aId, bId, cId] = blocks.map((b) => b.id);
|
|
|
|
// B 를 맨 앞으로 이동시킨다.
|
|
store.getState().reorderBlocks(bId, aId);
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual([bId, aId, cId]);
|
|
|
|
store.getState().undo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual([aId, bId, cId]);
|
|
|
|
store.getState().redo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual([bId, aId, cId]);
|
|
});
|
|
|
|
it("moveBlock 호출 후 undo/redo 로 블록 위치(sectionId/columnId)를 되돌릴 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 섹션 블록과 텍스트 블록을 준비한다.
|
|
store.getState().addSectionBlock();
|
|
let { blocks } = store.getState();
|
|
const sectionBlock = blocks.find((b) => b.type === "section")!;
|
|
const sectionProps = sectionBlock.props as any;
|
|
|
|
// 섹션을 2컬럼 레이아웃으로 변경한다.
|
|
const updatedColumns = [
|
|
{ id: `${sectionBlock.id}_col_1`, span: 6 },
|
|
{ id: `${sectionBlock.id}_col_2`, span: 6 },
|
|
];
|
|
|
|
store.getState().updateBlock(sectionBlock.id, { columns: updatedColumns } as any);
|
|
|
|
store.getState().selectBlock(sectionBlock.id);
|
|
store.getState().addTextBlock();
|
|
|
|
({ blocks } = store.getState());
|
|
const textBlock = blocks.find((b) => b.type === "text") as any;
|
|
expect(textBlock.sectionId).toBe(sectionBlock.id);
|
|
expect(textBlock.columnId).toBe(updatedColumns[0].id ?? sectionProps.columns[0].id);
|
|
|
|
// 두 번째 컬럼으로 이동
|
|
store.getState().moveBlock(textBlock.id, sectionBlock.id, updatedColumns[1].id);
|
|
|
|
({ blocks } = store.getState());
|
|
let moved = blocks.find((b) => b.id === textBlock.id) as any;
|
|
expect(moved.columnId).toBe(updatedColumns[1].id);
|
|
|
|
store.getState().undo();
|
|
|
|
({ blocks } = store.getState());
|
|
moved = blocks.find((b) => b.id === textBlock.id) as any;
|
|
expect(moved.columnId).toBe(updatedColumns[0].id ?? sectionProps.columns[0].id);
|
|
|
|
store.getState().redo();
|
|
|
|
({ blocks } = store.getState());
|
|
moved = blocks.find((b) => b.id === textBlock.id) as any;
|
|
expect(moved.columnId).toBe(updatedColumns[1].id);
|
|
});
|
|
|
|
it("replaceBlocks 호출 후 undo/redo 로 이전 블록 배열을 복원할 수 있어야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks } = store.getState();
|
|
expect(blocks).toHaveLength(1);
|
|
|
|
const originalIds = blocks.map((b) => b.id);
|
|
|
|
const replacedBlocks = blocks.map((b) => ({
|
|
...b,
|
|
id: `${b.id}_replaced`,
|
|
}));
|
|
const replacedIds = replacedBlocks.map((b) => b.id);
|
|
|
|
(store.getState() as any).replaceBlocks(replacedBlocks as any);
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual(replacedIds);
|
|
|
|
(store.getState() as any).undo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual(originalIds);
|
|
|
|
(store.getState() as any).redo();
|
|
|
|
({ blocks } = store.getState());
|
|
expect(blocks.map((b) => b.id)).toEqual(replacedIds);
|
|
});
|
|
|
|
it("resetHistory 를 호출하면 history/future 가 비워지고 undo/redo 가 이전 스냅샷으로 돌아가지 않아야 한다", () => {
|
|
const store = createEditorStore();
|
|
|
|
// 블록을 여러 개 추가해 history 스택을 만든다.
|
|
store.getState().addTextBlock();
|
|
store.getState().addTextBlock();
|
|
|
|
let { blocks, history, future } = store.getState();
|
|
expect(blocks.length).toBe(2);
|
|
expect(history.length).toBeGreaterThan(0);
|
|
expect(future.length).toBe(0);
|
|
|
|
const snapshotAfterEdits = blocks;
|
|
|
|
// 히스토리 초기화
|
|
(store.getState() as any).resetHistory();
|
|
|
|
({ blocks, history, future } = store.getState());
|
|
expect(history).toHaveLength(0);
|
|
expect(future).toHaveLength(0);
|
|
|
|
// undo/redo 를 호출해도 더 이상 이전 스냅샷으로는 돌아가지 않아야 한다.
|
|
store.getState().undo();
|
|
({ blocks, history, future } = store.getState());
|
|
expect(blocks).toEqual(snapshotAfterEdits);
|
|
expect(history).toHaveLength(0);
|
|
expect(future).toHaveLength(0);
|
|
|
|
store.getState().redo();
|
|
({ blocks, history, future } = store.getState());
|
|
expect(blocks).toEqual(snapshotAfterEdits);
|
|
expect(history).toHaveLength(0);
|
|
expect(future).toHaveLength(0);
|
|
});
|
|
});
|