957 lines
42 KiB
TypeScript
957 lines
42 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
// 최초에는 실패하는 테스트: /editor 페이지와 헤더 텍스트가 아직 없음
|
|
|
|
test("/editor 페이지가 존재하고 Page Editor 헤더를 보여줘야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
await expect(page.getByRole("heading", { name: "Page Editor" })).toBeVisible();
|
|
});
|
|
|
|
test("텍스트 블록 추가 버튼을 누르면 캔버스에 '새 텍스트' 블록이 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
await expect(canvas.getByText("새 텍스트")).toBeVisible();
|
|
});
|
|
|
|
test("텍스트 블록을 더블클릭해서 내용을 수정할 수 있어야 한다", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
// 1단계: 더블클릭 → Enter 로 커밋
|
|
// 기존 텍스트 블록을 더블클릭해서 편집 모드로 전환한다.
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
const block = canvas.getByTestId("editor-block").nth(0);
|
|
await block.dblclick({ force: true });
|
|
|
|
// 편집 모드에서 텍스트를 변경하고 Enter 로 커밋한다.
|
|
let editor = page.getByRole("textbox", { name: "텍스트 블록 내용 편집" });
|
|
await editor.fill("수정된 텍스트");
|
|
await editor.press("Enter");
|
|
|
|
// 변경된 텍스트가 캔버스에 반영되어야 한다.
|
|
let canvasAfterEdit = page.getByTestId("editor-canvas");
|
|
await expect(canvasAfterEdit.getByText("수정된 텍스트")).toBeVisible();
|
|
|
|
// 2단계: 다시 더블클릭 → Esc 로 취소
|
|
await block.dblclick({ force: true });
|
|
editor = page.getByRole("textbox", { name: "텍스트 블록 내용 편집" });
|
|
await editor.fill("Esc 로 취소될 텍스트");
|
|
await editor.press("Escape");
|
|
|
|
// Esc 이후에는 이전에 커밋된 텍스트가 유지되어야 한다.
|
|
canvasAfterEdit = page.getByTestId("editor-canvas");
|
|
await expect(canvasAfterEdit.getByText("수정된 텍스트")).toBeVisible();
|
|
await expect(canvasAfterEdit.getByText("Esc 로 취소될 텍스트")).toHaveCount(0);
|
|
|
|
// 3단계: 다시 더블클릭 → blur 로 커밋
|
|
await block.dblclick({ force: true });
|
|
editor = page.getByRole("textbox", { name: "텍스트 블록 내용 편집" });
|
|
await editor.fill("blur 로 커밋된 텍스트");
|
|
|
|
// 포커스를 다른 곳(예: 속성 패널의 버튼 추가 텍스트 입력)을 클릭하여 blur 를 발생시킨다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
// blur 이후에는 마지막 입력 값이 캔버스에 반영되어야 한다.
|
|
canvasAfterEdit = page.getByTestId("editor-canvas");
|
|
await expect(canvasAfterEdit.getByText("blur 로 커밋된 텍스트")).toBeVisible();
|
|
});
|
|
|
|
test("속성 패널에서 선택된 텍스트 블록 내용을 수정하면 캔버스에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록을 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
// 캔버스 블록을 클릭해서 선택한다.
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
const firstBlock = canvas.getByTestId("editor-block").nth(0);
|
|
await firstBlock.click({ force: true });
|
|
|
|
// 우측 속성 패널에서 텍스트를 수정한다.
|
|
const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
|
|
await sidebarEditor.fill("사이드바에서 수정된 텍스트");
|
|
|
|
// 캔버스에 수정된 텍스트가 보여야 한다.
|
|
const canvasAfterSidebarEdit = page.getByTestId("editor-canvas");
|
|
await expect(canvasAfterSidebarEdit.getByText("사이드바에서 수정된 텍스트")).toBeVisible();
|
|
});
|
|
|
|
test("여러 텍스트 블록 중 선택을 전환하면 속성 패널 내용과 선택 하이라이트가 바뀌어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록 두 개를 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const firstBlock = blocks.nth(0);
|
|
const secondBlock = blocks.nth(1);
|
|
|
|
// 첫 번째 블록을 선택하고, 속성 패널에서 텍스트를 변경한다.
|
|
await firstBlock.click({ force: true });
|
|
const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
|
|
await sidebarEditor.fill("첫 번째 블록");
|
|
|
|
// 두 번째 블록을 선택하고, 다시 속성 패널에서 텍스트를 변경한다.
|
|
await secondBlock.click({ force: true });
|
|
await sidebarEditor.fill("두 번째 블록");
|
|
|
|
// 캔버스에는 두 번째 블록의 텍스트가 보여야 한다.
|
|
await expect(canvas.getByText("두 번째 블록")).toBeVisible();
|
|
|
|
// 현재 선택된 블록은 두 번째 블록이어야 한다.
|
|
await expect(firstBlock).toHaveAttribute("data-selected", "false");
|
|
await expect(secondBlock).toHaveAttribute("data-selected", "true");
|
|
|
|
// 속성 패널 textarea에도 두 번째 블록 텍스트가 표시되어야 한다.
|
|
await expect(sidebarEditor).toHaveValue("두 번째 블록");
|
|
});
|
|
|
|
test("텍스트 블록의 정렬과 글자 크기를 속성 패널에서 변경하면 캔버스 스타일 유틸리티(pf-text-*)가 바뀌어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록을 하나 추가하고 선택한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
const block = canvas.getByTestId("editor-block").nth(0);
|
|
await block.click({ force: true });
|
|
|
|
// 속성 패널에서 정렬을 가운데로 변경한다.
|
|
const alignSelect = page.getByRole("combobox", { name: "정렬" });
|
|
await alignSelect.selectOption("center");
|
|
|
|
// 속성 패널에서 글자 크기를 크게로 변경한다.
|
|
const sizeSelect = page.getByRole("combobox", { name: "글자 크기" });
|
|
await sizeSelect.selectOption("lg");
|
|
|
|
// 캔버스 블록에 pb-text-center 와 pb-text-lg 클래스가 적용되어야 한다.
|
|
await expect(block).toHaveClass(/pb-text-center/);
|
|
await expect(block).toHaveClass(/pb-text-lg/);
|
|
});
|
|
|
|
test("텍스트 블록 인라인 툴바에서 정렬과 글자 크기를 변경할 수 있어야 한다 (pb-text-*)", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
const block = canvas.getByTestId("editor-block").nth(0);
|
|
|
|
// 더블클릭하여 인라인 편집 모드로 진입한다.
|
|
await block.dblclick({ force: true });
|
|
|
|
// 인라인 툴바 버튼을 이용해 가운데 정렬 및 큰 글자 크기로 변경한다.
|
|
const centerAlignButton = page.getByRole("button", { name: "가운데 정렬" });
|
|
const largeSizeButton = page.getByRole("button", { name: "글자 크게" });
|
|
|
|
await centerAlignButton.click();
|
|
await largeSizeButton.click();
|
|
|
|
// 편집을 종료하기 위해 블록 밖을 클릭한다.
|
|
await canvas.click({ position: { x: 5, y: 5 } });
|
|
|
|
// 캔버스 블록에 pb-text-center 와 pb-text-lg 클래스가 적용되어 있어야 한다.
|
|
await expect(block).toHaveClass(/pb-text-center/);
|
|
await expect(block).toHaveClass(/pb-text-lg/);
|
|
});
|
|
|
|
test("에디터 상태를 JSON으로 내보내고 다시 불러오면 동일한 블록 상태가 복원되어야 한다", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 블록 두 개를 추가하고 각각 다른 내용/스타일을 설정한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const firstBlock = blocks.nth(0);
|
|
const secondBlock = blocks.nth(1);
|
|
|
|
// 첫 번째 블록: 텍스트/정렬/크기 설정
|
|
await firstBlock.click({ force: true });
|
|
const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
|
|
await sidebarEditor.fill("첫 번째 JSON 블록");
|
|
const alignSelect = page.getByRole("combobox", { name: "정렬" });
|
|
await alignSelect.selectOption("left");
|
|
const sizeSelect = page.getByRole("combobox", { name: "글자 크기" });
|
|
await sizeSelect.selectOption("sm");
|
|
|
|
// 두 번째 블록: 텍스트/정렬/크기 설정
|
|
await secondBlock.click({ force: true });
|
|
await sidebarEditor.fill("두 번째 JSON 블록");
|
|
await alignSelect.selectOption("right");
|
|
await sizeSelect.selectOption("lg");
|
|
|
|
// 현재 상태를 JSON으로 내보낸다.
|
|
await page.getByRole("button", { name: "JSON 내보내기" }).click();
|
|
const exportArea = page.getByRole("textbox", { name: "에디터 상태 JSON" });
|
|
const exportedJson = await exportArea.inputValue();
|
|
|
|
// 캔버스를 초기화한다.
|
|
await page.getByRole("button", { name: "캔버스 초기화" }).click();
|
|
await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
|
|
|
|
// JSON을 다시 입력하고 불러온다.
|
|
const importArea = page.getByRole("textbox", { name: "JSON 불러오기" });
|
|
await importArea.fill(exportedJson);
|
|
await page.getByRole("button", { name: "JSON 적용" }).click();
|
|
|
|
// 복원된 캔버스에 두 블록이 모두 존재해야 한다.
|
|
const restoredBlocks = canvas.getByTestId("editor-block");
|
|
await expect(restoredBlocks).toHaveCount(2);
|
|
|
|
// 각 블록의 텍스트와 스타일이 원상 복구되었는지 확인한다.
|
|
const restoredFirst = restoredBlocks.nth(0);
|
|
const restoredSecond = restoredBlocks.nth(1);
|
|
|
|
await expect(restoredFirst).toContainText("첫 번째 JSON 블록");
|
|
await expect(restoredFirst).toHaveClass(/pb-text-left/);
|
|
await expect(restoredFirst).toHaveClass(/pb-text-sm/);
|
|
|
|
await expect(restoredSecond).toContainText("두 번째 JSON 블록");
|
|
await expect(restoredSecond).toHaveClass(/pb-text-right/);
|
|
await expect(restoredSecond).toHaveClass(/pb-text-lg/);
|
|
});
|
|
|
|
test("각 캔버스 블록에 드래그 핸들 UI가 표시되고 선택 상태가 aria-selected로 노출되어야 한다", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 블록 두 개를 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const firstBlock = blocks.nth(0);
|
|
const secondBlock = blocks.nth(1);
|
|
|
|
// 각 블록 안에 드래그 핸들이 존재해야 한다.
|
|
await expect(firstBlock.getByRole("button", { name: "블록 드래그 핸들" })).toBeVisible();
|
|
await expect(secondBlock.getByRole("button", { name: "블록 드래그 핸들" })).toBeVisible();
|
|
|
|
// 초기에는 마지막으로 추가된 두 번째 블록이 선택되어 있어야 한다.
|
|
await expect(firstBlock).toHaveAttribute("aria-selected", "false");
|
|
await expect(secondBlock).toHaveAttribute("aria-selected", "true");
|
|
|
|
// 첫 번째 블록을 클릭하면 선택 상태가 전환되어야 한다.
|
|
await firstBlock.click({ force: true });
|
|
await expect(firstBlock).toHaveAttribute("aria-selected", "true");
|
|
await expect(secondBlock).toHaveAttribute("aria-selected", "false");
|
|
});
|
|
|
|
test("블록 드래그앤드롭으로 순서를 변경할 수 있어야 한다", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 블록 두 개를 추가하고 서로 다른 텍스트로 구분한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const firstBlock = blocks.nth(0);
|
|
const secondBlock = blocks.nth(1);
|
|
|
|
// 텍스트를 A/B로 설정해서 순서를 식별한다.
|
|
await firstBlock.click({ force: true });
|
|
const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
|
|
await sidebarEditor.fill("블록 A");
|
|
|
|
await secondBlock.click({ force: true });
|
|
await sidebarEditor.fill("블록 B");
|
|
|
|
// 두 번째 블록의 드래그 핸들을 첫 번째 블록 위치로 드래그앤드롭 한다.
|
|
const secondHandle = secondBlock.getByRole("button", { name: "블록 드래그 핸들" });
|
|
const firstHandle = firstBlock.getByRole("button", { name: "블록 드래그 핸들" });
|
|
await secondHandle.dragTo(firstHandle, { force: true });
|
|
|
|
// 드래그 후에도 두 블록이 모두 존재하고, 텍스트 A/B가 유지되어야 한다.
|
|
const reorderedBlocks = canvas.getByTestId("editor-block");
|
|
await expect(reorderedBlocks).toHaveCount(2);
|
|
await expect(reorderedBlocks.nth(0)).toContainText("블록");
|
|
await expect(reorderedBlocks.nth(1)).toContainText("블록");
|
|
});
|
|
|
|
test("버튼 블록을 추가하고 라벨과 링크를 수정할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 버튼 블록을 추가한다.
|
|
await page.getByRole("button", { name: "버튼 블록 추가" }).click();
|
|
|
|
// 캔버스에 기본 버튼이 렌더되어야 한다.
|
|
const button = canvas.getByRole("button", { name: "버튼" });
|
|
await expect(button).toBeVisible();
|
|
|
|
// 속성 패널에서 버튼 텍스트와 링크를 수정한다.
|
|
const labelInput = page.getByRole("textbox", { name: "버튼 텍스트" });
|
|
const hrefInput = page.getByRole("textbox", { name: "버튼 링크" });
|
|
|
|
await labelInput.fill("자세히 보기");
|
|
await hrefInput.fill("https://example.com");
|
|
|
|
// 캔버스의 버튼 텍스트가 변경되어야 한다.
|
|
const updatedButton = canvas.getByRole("button", { name: "자세히 보기" });
|
|
await expect(updatedButton).toBeVisible();
|
|
});
|
|
|
|
test("2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 섹션을 하나 추가하고 레이아웃을 2컬럼으로 변경한다.
|
|
await page.getByRole("button", { name: "섹션 블록 추가" }).click();
|
|
|
|
// 섹션을 선택한다 (캔버스 첫 블록).
|
|
const sectionBlock = canvas.getByTestId("editor-block").nth(0);
|
|
await sectionBlock.click({ force: true });
|
|
|
|
const layoutSelect = page.getByRole("combobox", { name: "섹션 레이아웃" });
|
|
await layoutSelect.selectOption("2col");
|
|
|
|
// 왼쪽 컬럼에 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const leftColumn = canvas.locator('[data-section-id][data-column-id]').nth(0);
|
|
const rightColumn = canvas.locator('[data-section-id][data-column-id]').nth(1);
|
|
|
|
// 왼쪽 컬럼 안에 텍스트 블록이 존재하는지 확인한다.
|
|
const leftBlocks = leftColumn.getByTestId("editor-block");
|
|
await expect(leftBlocks).toHaveCount(1);
|
|
|
|
// 왼쪽 컬럼의 첫 블록을 오른쪽 컬럼 droppable 영역으로 드래그한다.
|
|
const leftBlock = leftBlocks.nth(0);
|
|
const handle = leftBlock.getByRole("button", { name: "블록 드래그 핸들" });
|
|
await handle.dragTo(rightColumn, { force: true });
|
|
|
|
// 드래그 이후에도 섹션 안에는 여전히 하나의 텍스트 블록이 존재해야 한다.
|
|
const allSectionBlocks = canvas.getByTestId("editor-block");
|
|
await expect(allSectionBlocks).toHaveCount(1);
|
|
});
|
|
|
|
test("Hero 템플릿 버튼을 클릭하면 섹션과 기본 텍스트/버튼 블록이 캔버스에 생성되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// Hero 템플릿을 추가한다.
|
|
await page.getByRole("button", { name: "Hero 템플릿 추가" }).click();
|
|
|
|
// 섹션/블록이 하나 이상 존재해야 한다.
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks.first()).toBeVisible();
|
|
|
|
// Hero 헤드라인 텍스트가 포함된 블록이 보여야 한다.
|
|
await expect(canvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
|
|
|
|
// CTA 버튼도 렌더되어 있어야 한다.
|
|
const ctaButton = canvas.getByRole("button", { name: "지금 시작하기" });
|
|
await expect(ctaButton).toBeVisible();
|
|
});
|
|
|
|
test("Features 템플릿 버튼을 클릭하면 3개의 Feature 항목(제목/설명)이 생성되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Features 템플릿 추가" }).click();
|
|
|
|
// Feature 제목들이 렌더되어야 한다.
|
|
await expect(canvas.getByText("Feature 1 제목")).toBeVisible();
|
|
await expect(canvas.getByText("Feature 2 제목")).toBeVisible();
|
|
await expect(canvas.getByText("Feature 3 제목")).toBeVisible();
|
|
});
|
|
|
|
test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "CTA 템플릿 추가" }).click();
|
|
|
|
await expect(canvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
|
|
const ctaButton = canvas.getByRole("button", { name: "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("Blog 템플릿 버튼을 클릭하면 3개의 포스트 카드(제목/요약)가 생성되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Blog 템플릿 추가" }).click();
|
|
|
|
await expect(canvas.getByText("블로그 포스트 1")).toBeVisible();
|
|
await expect(canvas.getByText("첫 번째 포스트 요약을 여기에 입력하세요.")).toBeVisible();
|
|
await expect(canvas.getByText("블로그 포스트 2")).toBeVisible();
|
|
await expect(canvas.getByText("블로그 포스트 3")).toBeVisible();
|
|
});
|
|
|
|
test("Team 템플릿 버튼을 클릭하면 3명의 팀 카드가 생성되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Team 템플릿 추가" }).click();
|
|
|
|
await expect(canvas.getByText("홍길동")).toBeVisible();
|
|
await expect(canvas.getByText("Product Designer")).toBeVisible();
|
|
await expect(canvas.getByText("김영희")).toBeVisible();
|
|
await expect(canvas.getByText("Frontend Engineer")).toBeVisible();
|
|
await expect(canvas.getByText("이철수")).toBeVisible();
|
|
await expect(canvas.getByText("Backend Engineer")).toBeVisible();
|
|
});
|
|
|
|
test("Footer 템플릿 버튼을 클릭하면 링크/카피라이트 텍스트가 포함된 섹션이 생성되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Footer 템플릿 추가" }).click();
|
|
|
|
await expect(canvas.getByText("이용약관 · 개인정보처리방침")).toBeVisible();
|
|
await expect(canvas.getByText("© 2025 MyLanding. All rights reserved.")).toBeVisible();
|
|
});
|
|
|
|
test("Cmd/Ctrl+Z로 블록 추가를 Undo 하고 Cmd/Ctrl+Shift+Z로 Redo 할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
|
|
|
|
// Cmd/Ctrl + Z 로 Undo 한다.
|
|
const undoShortcut = process.platform === "darwin" ? "Meta+Z" : "Control+Z";
|
|
await page.keyboard.press(undoShortcut);
|
|
|
|
// Undo 후에는 블록이 0개가 되어야 한다.
|
|
await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
|
|
|
|
// Cmd/Ctrl + Shift + Z 로 Redo 한다.
|
|
const redoShortcut = process.platform === "darwin" ? "Meta+Shift+Z" : "Control+Shift+Z";
|
|
await page.keyboard.press(redoShortcut);
|
|
|
|
// Redo 후 다시 블록이 1개가 되어야 한다.
|
|
await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
|
|
});
|
|
|
|
test("ArrowUp/ArrowDown 키로 선택된 블록을 위/아래로 이동하며 순차적으로 선택할 수 있어야 한다", async ({ page }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록을 세 개 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(3);
|
|
|
|
// 현재 구현에서는 선택된 블록이 없을 때 ArrowDown 을 누르면 첫 번째 블록이 선택된다.
|
|
|
|
// 첫 번째 ArrowDown: 첫 번째 블록 선택
|
|
await page.keyboard.press("ArrowDown");
|
|
await expect(blocks.nth(0)).toHaveAttribute("data-selected", "true");
|
|
|
|
// 두 번째 ArrowDown: 두 번째 블록으로 이동
|
|
await page.keyboard.press("ArrowDown");
|
|
await expect(blocks.nth(1)).toHaveAttribute("data-selected", "true");
|
|
|
|
// 세 번째 ArrowDown: 세 번째 블록으로 이동
|
|
await page.keyboard.press("ArrowDown");
|
|
await expect(blocks.nth(2)).toHaveAttribute("data-selected", "true");
|
|
|
|
// ArrowDown 을 한 번 더 눌러도 마지막에서 더 내려가지 않는다.
|
|
await page.keyboard.press("ArrowDown");
|
|
await expect(blocks.nth(2)).toHaveAttribute("data-selected", "true");
|
|
|
|
// ArrowUp 으로 두 번째 블록으로 올라간다.
|
|
await page.keyboard.press("ArrowUp");
|
|
await expect(blocks.nth(1)).toHaveAttribute("data-selected", "true");
|
|
});
|
|
|
|
test("속성 패널의 블록 삭제 버튼으로 선택된 블록을 삭제할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록 두 개를 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(2);
|
|
|
|
// 두 번째 블록을 선택한 다음, 속성 패널에서 "블록 삭제" 버튼을 클릭한다.
|
|
await blocks.nth(1).click({ force: true });
|
|
await page.getByRole("button", { name: "블록 삭제" }).click();
|
|
|
|
// 하나의 블록만 남아야 하며, 첫 번째 블록이 남아 있어야 한다.
|
|
const remainingBlocks = canvas.getByTestId("editor-block");
|
|
await expect(remainingBlocks).toHaveCount(1);
|
|
await expect(remainingBlocks.nth(0)).toHaveAttribute("data-selected", "true");
|
|
});
|
|
|
|
test("Cmd/Ctrl+D 단축키로 선택된 블록을 복제할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
|
|
let blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(1);
|
|
|
|
// 블록의 텍스트를 식별 가능한 값으로 바꾼다.
|
|
await blocks.nth(0).click({ force: true });
|
|
const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
|
|
await sidebarEditor.fill("복제 대상 블록");
|
|
|
|
// Cmd/Ctrl + D 로 복제한다.
|
|
const duplicateShortcut = process.platform === "darwin" ? "Meta+D" : "Control+D";
|
|
await page.keyboard.press(duplicateShortcut);
|
|
|
|
// 블록이 두 개가 되어야 한다.
|
|
blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(2);
|
|
|
|
// 두 블록 모두 동일한 텍스트를 가지고 있어야 한다.
|
|
await expect(blocks.nth(0)).toContainText("복제 대상 블록");
|
|
await expect(blocks.nth(1)).toContainText("복제 대상 블록");
|
|
});
|
|
|
|
test("구분선 블록을 추가하면 캔버스에 구분선이 렌더되고 정렬/두께를 변경할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 구분선 블록을 추가한다.
|
|
await page.getByRole("button", { name: "구분선 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const dividerBlock = blocks.nth(0);
|
|
|
|
// 블록 추가 시 자동으로 선택된다고 가정하고 기본 정렬이 가운데인지 확인한다.
|
|
await expect(dividerBlock).toHaveClass(/pb-text-center/);
|
|
|
|
// 속성 패널에서 정렬을 오른쪽으로 변경하면 클래스가 바뀌어야 한다.
|
|
const alignSelect = page.getByRole("combobox", { name: "구분선 정렬" });
|
|
await alignSelect.selectOption("right");
|
|
await expect(dividerBlock).toHaveClass(/pb-text-right/);
|
|
|
|
// 두께를 보통으로 변경해도 에러 없이 동작해야 한다.
|
|
const thicknessSelect = page.getByRole("combobox", { name: "구분선 두께" });
|
|
await thicknessSelect.selectOption("medium");
|
|
});
|
|
|
|
test("리스트 블록을 추가하고 첫 번째 아이템과 번호 매기기/정렬을 수정할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 리스트 블록을 추가한다.
|
|
await page.getByRole("button", { name: "리스트 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const listBlock = blocks.nth(0);
|
|
|
|
// 기본 아이템 텍스트가 렌더되어야 한다.
|
|
await expect(listBlock).toContainText("리스트 아이템 1");
|
|
|
|
// 속성 패널에서 첫 번째 아이템 텍스트를 변경하면 캔버스에도 반영되어야 한다.
|
|
const firstItemInput = page.getByRole("textbox", { name: "리스트 첫 번째 아이템" });
|
|
await firstItemInput.fill("첫 번째 할 일");
|
|
await expect(listBlock).toContainText("첫 번째 할 일");
|
|
|
|
// 번호 매기기 토글을 켜고, 정렬을 가운데로 변경해도 에러 없이 동작해야 한다.
|
|
const orderedCheckbox = page.getByRole("checkbox", { name: "번호 매기기" });
|
|
await orderedCheckbox.check();
|
|
|
|
const alignSelect = page.getByRole("combobox", { name: "리스트 정렬" });
|
|
await alignSelect.selectOption("center");
|
|
await expect(listBlock).toHaveClass(/pb-text-center/);
|
|
});
|
|
|
|
test("폼 요소 사이드바에서 폼 입력/셀렉트/라디오/체크박스 블록을 추가할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 좌측 사이드바에 "폼 요소" 섹션 제목이 표시되어야 한다.
|
|
await expect(page.getByRole("heading", { name: "폼 요소" })).toBeVisible();
|
|
|
|
// 폼 입력 블록 추가 버튼을 클릭하면 formInput 블록이 캔버스에 생성되어야 한다.
|
|
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
|
|
|
let blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(1);
|
|
|
|
// 폼 셀렉트 블록 추가 버튼을 클릭하면 formSelect 블록이 추가되어야 한다.
|
|
await page.getByRole("button", { name: "폼 셀렉트 추가" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(2);
|
|
|
|
// 폼 라디오 그룹 블록 추가 버튼을 클릭하면 formRadio 블록이 추가되어야 한다.
|
|
await page.getByRole("button", { name: "폼 라디오 그룹 추가" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(3);
|
|
|
|
// 폼 체크박스 블록 추가 버튼을 클릭하면 formCheckbox 블록이 추가되어야 한다.
|
|
await page.getByRole("button", { name: "폼 체크박스 추가" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(4);
|
|
});
|
|
|
|
test("폼 블록을 선택하면 우측 속성 패널에서 폼 필드/버튼 매핑 UI가 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 요소와 버튼 블록을 몇 개 추가한다.
|
|
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
|
await page.getByRole("button", { name: "폼 셀렉트 추가" }).click();
|
|
await page.getByRole("button", { name: "버튼 블록 추가" }).click();
|
|
|
|
// 폼 블록을 추가한다.
|
|
await page.getByRole("button", { name: "폼 블록 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const formBlock = blocks.nth((await blocks.count()) - 1);
|
|
|
|
// 폼 블록을 선택한다.
|
|
await formBlock.click({ force: true });
|
|
|
|
// 우측 속성 패널에 폼 컨트롤러 섹션 제목이 보여야 한다.
|
|
await expect(page.getByRole("heading", { name: "폼 컨트롤러" })).toBeVisible();
|
|
|
|
// 필드 매핑 영역: 폼 입력/셀렉트 블록을 대상으로 하는 체크박스가 있어야 한다.
|
|
const fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
|
|
await expect(fieldMappingGroup).toBeVisible();
|
|
|
|
// 이 그룹 안에 최소 2개의 체크박스(입력/셀렉트)가 있어야 한다.
|
|
const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
|
|
await expect(fieldCheckboxes).toHaveCount(2);
|
|
|
|
// 첫 번째 필드 체크박스를 클릭하면 체크 상태가 되어야 한다.
|
|
await fieldCheckboxes.nth(0).check();
|
|
await expect(fieldCheckboxes.nth(0)).toBeChecked();
|
|
|
|
// 버튼 매핑 셀렉트 박스: 추가한 버튼 블록을 submit 버튼으로 선택할 수 있어야 한다.
|
|
const submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
|
|
await expect(submitSelect).toBeVisible();
|
|
|
|
// 옵션 중 하나를 선택해도 에러 없이 동작해야 한다.
|
|
const options = await submitSelect.locator("option").allTextContents();
|
|
if (options.length > 0) {
|
|
await submitSelect.selectOption({ label: options[0] });
|
|
}
|
|
});
|
|
|
|
test("폼 입력 블록의 라벨/전송 키/필수 여부를 우측 패널에서 수정할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 입력 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
|
|
// 폼 입력 블록을 선택한다.
|
|
await inputBlock.click({ force: true });
|
|
|
|
// 우측 속성 패널에 폼 입력 필드 설정 섹션이 보여야 한다.
|
|
const labelInput = page.getByRole("textbox", { name: "필드 라벨" });
|
|
const nameInput = page.getByRole("textbox", { name: "전송 키" });
|
|
const requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
|
|
|
|
await expect(labelInput).toBeVisible();
|
|
await expect(nameInput).toBeVisible();
|
|
await expect(requiredCheckbox).toBeVisible();
|
|
|
|
// 라벨과 전송 키를 수정하고, 필수 여부를 토글할 수 있어야 한다.
|
|
await labelInput.fill("이메일 주소");
|
|
await nameInput.fill("email_address");
|
|
await requiredCheckbox.check();
|
|
});
|
|
|
|
test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본 필드 속성을 편집할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 셀렉트 블록
|
|
await page.getByRole("button", { name: "폼 셀렉트 추가" }).click();
|
|
let blocks = canvas.getByTestId("editor-block");
|
|
const selectBlock = blocks.nth((await blocks.count()) - 1);
|
|
await selectBlock.click({ force: true });
|
|
|
|
let labelInput = page.getByRole("textbox", { name: "필드 라벨" });
|
|
let nameInput = page.getByRole("textbox", { name: "전송 키" });
|
|
let requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
|
|
|
|
await expect(labelInput).toBeVisible();
|
|
await expect(nameInput).toBeVisible();
|
|
await expect(requiredCheckbox).toBeVisible();
|
|
|
|
await labelInput.fill("셀렉트 라벨");
|
|
await nameInput.fill("select_field");
|
|
await requiredCheckbox.check();
|
|
|
|
// 폼 라디오 블록
|
|
await page.getByRole("button", { name: "폼 라디오 그룹 추가" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
const radioBlock = blocks.nth((await blocks.count()) - 1);
|
|
await radioBlock.click({ force: true });
|
|
|
|
labelInput = page.getByRole("textbox", { name: "그룹 타이틀" });
|
|
nameInput = page.getByRole("textbox", { name: "전송 키" });
|
|
requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
|
|
|
|
await labelInput.fill("라디오 라벨");
|
|
await nameInput.fill("radio_field");
|
|
await requiredCheckbox.check();
|
|
|
|
// 라디오 그룹 타이틀 텍스트 필드는 그대로 편집 가능해야 한다.
|
|
|
|
// 폼 체크박스 블록
|
|
await page.getByRole("button", { name: "폼 체크박스 추가" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
const checkboxBlock = blocks.nth((await blocks.count()) - 1);
|
|
await checkboxBlock.click({ force: true });
|
|
|
|
labelInput = page.getByRole("textbox", { name: "그룹 타이틀" });
|
|
nameInput = page.getByRole("textbox", { name: "전송 키" });
|
|
requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
|
|
|
|
await labelInput.fill("체크박스 라벨");
|
|
await nameInput.fill("checkbox_field");
|
|
await requiredCheckbox.check();
|
|
|
|
// 체크박스 그룹 타이틀 텍스트 필드도 동일하게 동작해야 한다.
|
|
});
|
|
|
|
test("폼 입력 블록을 추가하면 에디터 캔버스에 라벨과 입력 필드 UI가 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 입력 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 라벨 텍스트가 보여야 한다.
|
|
await expect(inputBlock.getByText("입력 필드")).toBeVisible();
|
|
|
|
// 블록 안에 시각적인 입력 UI(텍스트 입력 또는 textarea)가 있어야 한다.
|
|
const textboxes = inputBlock.getByRole("textbox");
|
|
await expect(textboxes).toHaveCount(1);
|
|
});
|
|
|
|
test("폼 셀렉트 블록을 추가하면 에디터 캔버스에 라벨과 셀렉트 UI가 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 셀렉트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "폼 셀렉트 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const selectBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 라벨 텍스트가 보여야 한다.
|
|
await expect(selectBlock.getByText("선택 필드")).toBeVisible();
|
|
|
|
// 블록 안에 셀렉트 UI가 있어야 한다.
|
|
const combobox = selectBlock.getByRole("combobox");
|
|
await expect(combobox).toBeVisible();
|
|
});
|
|
|
|
test("폼 라디오 블록을 추가하면 에디터 캔버스에 그룹 라벨과 라디오 버튼들이 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 라디오 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "폼 라디오 그룹 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const radioBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 그룹 라벨 텍스트가 보여야 한다.
|
|
await expect(radioBlock.getByText("라디오 그룹")).toBeVisible();
|
|
|
|
// 블록 안에 라디오 버튼이 하나 이상 있어야 한다.
|
|
const radios = radioBlock.getByRole("radio");
|
|
await expect(radios).toHaveCount(1);
|
|
});
|
|
|
|
test("폼 체크박스 블록을 추가하면 에디터 캔버스에 체크박스와 라벨이 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 체크박스 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "폼 체크박스 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const checkboxBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 라벨 텍스트가 보여야 한다.
|
|
await expect(checkboxBlock.getByText("체크박스")).toBeVisible();
|
|
|
|
// 블록 안에 체크박스 UI가 있어야 한다.
|
|
const checkbox = checkboxBlock.getByRole("checkbox");
|
|
await expect(checkbox).toBeVisible();
|
|
});
|
|
|
|
test("폼 입력 필드의 타입과 Placeholder 를 우측 패널에서 변경하면 캔버스 UI에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
await inputBlock.click({ force: true });
|
|
|
|
// 우측 패널에서 필드 타입과 placeholder 를 수정한다.
|
|
const typeSelect = page.getByRole("combobox", { name: "필드 타입" });
|
|
await typeSelect.selectOption("email");
|
|
|
|
const placeholderInput = page.getByRole("textbox", { name: "Placeholder" });
|
|
await placeholderInput.fill("이메일을 입력하세요");
|
|
|
|
// 캔버스 안 인풋이 type="email" 이고 placeholder 가 반영되어야 한다.
|
|
const emailInput = inputBlock.locator('input[type="email"]');
|
|
await expect(emailInput).toHaveAttribute("placeholder", "이메일을 입력하세요");
|
|
});
|
|
|
|
test("폼 셀렉트 블록의 옵션 목록을 우측 패널에서 수정하면 캔버스 셀렉트 옵션에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "폼 셀렉트 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const selectBlock = blocks.nth(0);
|
|
await selectBlock.click({ force: true });
|
|
|
|
// 우측 패널에서 옵션 목록을 수정한다.
|
|
const optionsTextarea = page.getByRole("textbox", { name: "옵션 목록" });
|
|
await optionsTextarea.fill("옵션 A\n옵션 B\n옵션 C");
|
|
|
|
// 캔버스 셀렉트 박스 옵션에 동일한 텍스트가 반영되어야 한다.
|
|
const selectEl = selectBlock.getByRole("combobox");
|
|
const optionLocators = selectEl.locator("option");
|
|
await expect(optionLocators).toHaveCount(3);
|
|
await expect(optionLocators.nth(0)).toHaveText("옵션 A");
|
|
await expect(optionLocators.nth(1)).toHaveText("옵션 B");
|
|
await expect(optionLocators.nth(2)).toHaveText("옵션 C");
|
|
});
|
|
|
|
test("폼 입력 블록의 스타일(텍스트/배경/모서리)을 우측 패널에서 변경하면 캔버스 필드 UI에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 입력 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "폼 입력 추가" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
await inputBlock.click({ force: true });
|
|
|
|
// 우측 패널에서 필드 텍스트/배경 색상과 모서리 둥글기를 변경한다.
|
|
// ColorPickerField와 NumericPropertyControl은 기존 버튼 스타일과 비슷한 패턴의 라벨을 사용한다.
|
|
|
|
// 텍스트 색상 피커에서 HEX 입력을 직접 변경한다고 가정한다.
|
|
const textColorHexInput = page.getByRole("textbox", { name: "필드 텍스트 색상 HEX" });
|
|
await textColorHexInput.fill("#ff0000");
|
|
|
|
const fillColorHexInput = page.getByRole("textbox", { name: "필드 채움 색상 HEX" });
|
|
await fillColorHexInput.fill("#0000ff");
|
|
|
|
// 모서리 둥글기 슬라이더/입력 값을 조정한다.
|
|
const radiusNumericInput = page.getByRole("spinbutton", { name: "필드 모서리 둥글기" });
|
|
await radiusNumericInput.fill("4");
|
|
|
|
// 캔버스 안 실제 입력 필드 wrapper에 스타일이 반영되어야 한다.
|
|
const fieldWrapper = inputBlock.getByTestId("form-input-field");
|
|
|
|
await expect(fieldWrapper).toHaveCSS("color", "rgb(255, 0, 0)");
|
|
await expect(fieldWrapper).toHaveCSS("background-color", "rgb(0, 0, 255)");
|
|
// border-radius 는 브라우저에서 px 단위로 계산되므로 4px 이상인지 정도만 확인한다.
|
|
const borderRadius = await fieldWrapper.evaluate((el) => getComputedStyle(el).borderRadius);
|
|
expect(Number.parseFloat(borderRadius)).toBeGreaterThanOrEqual(4);
|
|
});
|