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("New text"); 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>([ { 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("Button"); 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("Image description"); // 정렬/너비/모서리 기본값도 함께 검증한다. 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("New page"); 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); }); 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); }); it("addTextBlock 을 ko 로케일로 호출하면 기본 텍스트가 한국어여야 한다", () => { const store = createEditorStore(); const stateAny = store.getState() as any; stateAny.addTextBlock("ko"); const { blocks } = store.getState(); const textProps = blocks[0].props as TextBlockProps; expect(textProps.text).toBe("새 텍스트"); }); it("addListBlock 을 ko 로케일로 호출하면 기본 리스트 아이템 텍스트가 한국어여야 한다", () => { const store = createEditorStore(); const stateAny = store.getState() as any; stateAny.addListBlock("ko"); const { blocks } = store.getState(); const listProps = blocks[0].props as ListBlockProps & { itemsTree?: ListItemNode[] }; expect(listProps.items[0]).toBe("리스트 아이템 1"); expect(Array.isArray(listProps.itemsTree)).toBe(true); expect(listProps.itemsTree && listProps.itemsTree[0].text).toBe("리스트 아이템 1"); }); it("addFormInputBlock 을 ko 로케일로 호출하면 기본 label 이 한국어여야 한다", () => { const store = createEditorStore(); const stateAny = store.getState() as any; stateAny.addFormInputBlock("ko"); const { blocks } = store.getState(); const inputProps = blocks[0].props as any; expect(inputProps.label).toBe("입력 필드"); }); it("addFormSelectBlock 을 ko 로케일로 호출하면 기본 label 과 옵션 라벨이 한국어여야 한다", () => { const store = createEditorStore(); const stateAny = store.getState() as any; stateAny.addFormSelectBlock("ko"); const { blocks } = store.getState(); const selectProps = blocks[0].props as any; expect(selectProps.label).toBe("셀렉트 필드"); expect(selectProps.options[0].label).toBe("옵션 1"); expect(selectProps.options[1].label).toBe("옵션 2"); }); it("addFormCheckboxBlock 을 ko 로케일로 호출하면 기본 groupLabel 과 옵션 라벨이 한국어여야 한다", () => { const store = createEditorStore(); const stateAny = store.getState() as any; stateAny.addFormCheckboxBlock("ko"); const { blocks } = store.getState(); const checkboxProps = blocks[0].props as any; expect(checkboxProps.groupLabel).toBe("체크박스 그룹"); expect(checkboxProps.options[0].label).toBe("옵션 1"); expect(checkboxProps.options[1].label).toBe("옵션 2"); }); it("addFormRadioBlock 을 ko 로케일로 호출하면 기본 groupLabel 과 옵션 라벨이 한국어여야 한다", () => { const store = createEditorStore(); const stateAny = store.getState() as any; stateAny.addFormRadioBlock("ko"); const { blocks } = store.getState(); const radioProps = blocks[0].props as any; expect(radioProps.groupLabel).toBe("라디오 그룹"); expect(radioProps.options[0].label).toBe("옵션 A"); expect(radioProps.options[1].label).toBe("옵션 B"); }); });