템플릿 확장: FAQ/Pricing/Testimonials 섹션 추가

2025-11-18 17:14:02 +09:00
parent 8494bd64bc
commit efa8d34fe2
4 changed files with 381 additions and 0 deletions
@@ -337,6 +337,47 @@ test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된
  await expect(ctaButton).toBeVisible();
 });

+test("FAQ 템플릿 버튼을 클릭하면 질문/답변 텍스트가 세 쌍 이상 생성되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  await page.getByRole("button", { name: "FAQ 템플릿 추가" }).click();
+
+  // 기본 FAQ 질문/답변 텍스트들이 렌더되어야 한다.
+  await expect(canvas.getByText("자주 묻는 질문 1")).toBeVisible();
+  await expect(canvas.getByText("첫 번째 질문에 대한 답변을 여기에 입력하세요.")).toBeVisible();
+  await expect(canvas.getByText("자주 묻는 질문 2")).toBeVisible();
+  await expect(canvas.getByText("자주 묻는 질문 3")).toBeVisible();
+});
+
+test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생성되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  await page.getByRole("button", { name: "Pricing 템플릿 추가" }).click();
+
+  await expect(canvas.getByText("Basic")).toBeVisible();
+  await expect(canvas.getByText("₩9,900/월")).toBeVisible();
+  await expect(canvas.getByText("Pro")).toBeVisible();
+  await expect(canvas.getByText("₩29,900/월")).toBeVisible();
+  await expect(canvas.getByText("Enterprise")).toBeVisible();
+  await expect(canvas.getByText("문의")).toBeVisible();
+});
+
+test("Testimonials 템플릿 버튼을 클릭하면 3개의 후기 카드가 생성되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  await page.getByRole("button", { name: "Testimonials 템플릿 추가" }).click();
+
+  await expect(canvas.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
+  await expect(canvas.getByText("디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.")).toBeVisible();
+  await expect(canvas.getByText("팀 전체가 만족하는 빌더입니다.")).toBeVisible();
+});
+
 test("Cmd/Ctrl+Z로 블록 추가를 Undo 하고 Cmd/Ctrl+Shift+Z로 Redo 할 수 있어야 한다", async ({ page }) => {
  await page.goto("/editor");

@@ -283,6 +283,92 @@ describe("editorStore", () => {
    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();