page-builder/tests/unit/editorStore.spec.ts

import { describe, it, expect } from "vitest";
import {
  createEditorStore,
  type TextBlockProps,
  type ButtonBlockProps,
  type ImageBlockProps,
  type DividerBlockProps,
  type ListBlockProps,
} 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("구분선 블록을 추가하면 기본 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("이미지 설명");

    // 루트에서 추가한 경우에는 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);

    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("Blog 템플릿 섹션을 추가하면 3개의 포스트 카드(제목/요약)가 생성되어야 한다", () => {
    const store = createEditorStore();

    store.getState().addBlogTemplateSection();

    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("Team 템플릿 섹션을 추가하면 3명의 팀 카드(이름/역할/소개)가 생성되어야 한다", () => {
    const store = createEditorStore();

    store.getState().addTeamTemplateSection();

    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명의 팀원 카드에 대해 각 컬럼에 최소 3개 텍스트(이름/역할/소개)를 가정한다.
    expect(textBlocks.length).toBeGreaterThanOrEqual(9);

    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("Footer 템플릿 섹션을 추가하면 링크/카피라이트 텍스트가 포함된 섹션이 생성되어야 한다", () => {
    const store = createEditorStore();

    store.getState().addFooterTemplateSection();

    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[];
    expect(textBlocks.length).toBeGreaterThanOrEqual(2);

    textBlocks.forEach((tb) => {
      expect(tb.sectionId).toBe(section.id);
      expect(tb.columnId).toBe(firstColumnId);
    });

    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);
  });

  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 firstColumnId = columns[0].id;

    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(tb.columnId).toBe(firstColumnId);
    });

    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);
    expect(t2.columnId).toBe(t1.columnId);
  });
});