섹션 템플릿: Hero/Features/CTA 프리셋 추가

tests/unit/editorStore.spec.ts

@@ -174,4 +174,112 @@ describe("editorStore", () => {
     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);
+
+    const firstColumnId = columns[0].id;
+
+    textBlocks.forEach((tb: any) => {
+      expect(tb.sectionId).toBe(section.id);
+      expect(tb.columnId).toBe(firstColumnId);
+    });
+
+    buttonBlocks.forEach((bb: any) => {
+      expect(bb.sectionId).toBe(section.id);
+      expect(bb.columnId).toBe(firstColumnId);
+    });
+
+    // 마지막으로 생성된 블록(예: CTA 버튼)이 선택되어 있다고 가정한다.
+    expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
+  });
+
+  it("Features 템플릿 섹션을 추가하면 3컬럼 섹션과 각 컬럼의 제목/설명 텍스트가 생성되어야 한다", () => {
+    const store = createEditorStore();
+
+    // Features 템플릿 액션을 호출한다고 가정한다.
+    store.getState().addFeaturesTemplateSection();
+
+    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개의 feature 항목(제목/설명)을 가정하고, 각 컬럼에는 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("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 firstColumnId = columns[0].id;
+
+    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(tb.columnId).toBe(firstColumnId);
+    });
+
+    buttonBlocks.forEach((bb) => {
+      expect(bb.sectionId).toBe(section.id);
+      expect(bb.columnId).toBe(firstColumnId);
+    });
+
+    expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
+  });
 });