1293 lines
55 KiB
TypeScript
1293 lines
55 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
// 최초에는 실패하는 테스트: /editor 페이지와 헤더 텍스트가 아직 없음
|
|
|
|
// 에디터 E2E에서는 인증된 사용자 시나리오를 기본으로 가정한다.
|
|
// /api/auth/me 를 항상 200 으로 목 처리해, auth 가드가 /login 으로 리다이렉트하지 않도록 한다.
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.addInitScript(() => {
|
|
try {
|
|
window.localStorage.clear();
|
|
} catch {
|
|
}
|
|
|
|
(window as any).__PB_DISABLE_AUTOSAVE = true;
|
|
});
|
|
|
|
await page.route("**/api/auth/me", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({ id: "user-e2e", email: "e2e@example.com", tokenVersion: 1 }),
|
|
});
|
|
});
|
|
});
|
|
|
|
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: "Text" }).first().click();
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
// 기본 텍스트는 로케일에 따라 EN/KO 가 다를 수 있으므로 둘 중 하나가 보이는지만 확인한다.
|
|
await expect(canvas.getByText(/New text|새 텍스트/)).toBeVisible();
|
|
});
|
|
|
|
test("선택된 블록이 없을 때 우측 패널에서 프로젝트 설정 패널이 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const sidebar = page.getByTestId("properties-sidebar");
|
|
|
|
// ProjectPropertiesPanel 은 i18n(en) 기준으로 렌더되므로 영문 라벨을 사용한다.
|
|
await expect(sidebar.getByText("Project settings")).toBeVisible();
|
|
await expect(sidebar.getByLabel("Project title")).toBeVisible();
|
|
await expect(sidebar.getByLabel("Project slug")).toBeVisible();
|
|
// NumericPropertyControl 의 aria-label 은 "Canvas width 프리셋" 형식이다.
|
|
await expect(sidebar.getByRole("combobox", { name: "Canvas width 프리셋" })).toBeVisible();
|
|
await expect(sidebar.getByLabel("Page background HEX")).toBeVisible();
|
|
});
|
|
|
|
test("프로젝트 설정 패널에서 캔버스 배경색을 변경하면 에디터 캔버스 배경에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const sidebar = page.getByTestId("properties-sidebar");
|
|
const inner = page.getByTestId("editor-canvas-inner");
|
|
|
|
const beforeBg = await inner.evaluate((el) => {
|
|
const s = window.getComputedStyle(el as HTMLElement);
|
|
return s.backgroundColor;
|
|
});
|
|
|
|
// 캔버스 배경색 HEX 라벨도 영문 i18n 기준으로 검사한다.
|
|
const bgHexInput = sidebar.getByLabel("Canvas background HEX");
|
|
await bgHexInput.fill("#ff0000");
|
|
|
|
// 배경색이 실제로 변경될 때까지 기다리면서 검증한다.
|
|
await expect(inner).not.toHaveCSS("background-color", beforeBg);
|
|
});
|
|
|
|
test("프로젝트 설정 패널에서 캔버스 프리셋을 변경하면 에디터 캔버스 너비가 달라져야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const presetSelect = page.getByRole("combobox", { name: "Canvas width 프리셋" });
|
|
|
|
await presetSelect.selectOption("mobile");
|
|
await expect(presetSelect).toHaveValue("mobile");
|
|
|
|
await presetSelect.selectOption("desktop");
|
|
await expect(presetSelect).toHaveValue("desktop");
|
|
});
|
|
|
|
test("텍스트 블록을 더블클릭해서 내용을 수정할 수 있어야 한다", async ({ page }) => {
|
|
test.skip();
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Edit text block content" });
|
|
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: "Edit text block content" });
|
|
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: "Edit text block content" });
|
|
await editor.fill("blur 로 커밋된 텍스트");
|
|
|
|
// 포커스를 다른 곳(예: 속성 패널의 버튼 추가 텍스트 입력)을 클릭하여 blur 를 발생시킨다.
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Text" }).first().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: "Selected text block content" });
|
|
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: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Selected text block content" });
|
|
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: "Text" }).first().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: "Alignment" });
|
|
await alignSelect.selectOption("center");
|
|
|
|
// 속성 패널에서 글자 크기를 크게로 변경한다.
|
|
// TextPropertiesPanel 은 폰트 크기를 NumericPropertyControl("Font size")로 제어하므로,
|
|
// 커스텀 입력을 통해 18px 정도로 설정해 pb-text-lg 스케일이 적용되도록 한다.
|
|
const fontSizeInput = page.getByLabel("Font size 커스텀");
|
|
await fontSizeInput.fill("18");
|
|
|
|
// 캔버스 블록에 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 }) => {
|
|
// 인라인 텍스트 툴바 UI는 아직 구현되지 않았으므로, 이 테스트는 항상 스킵한다.
|
|
test.skip(true, "텍스트 인라인 툴바 UI 미구현으로 인해 임시 스킵");
|
|
await page.goto("/editor");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).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: "Center align" });
|
|
const largeSizeButton = page.getByRole("button", { name: "Increase font size" });
|
|
|
|
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: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Selected text block content" });
|
|
await sidebarEditor.fill("첫 번째 JSON 블록");
|
|
const alignSelect = page.getByRole("combobox", { name: "Alignment" });
|
|
await alignSelect.selectOption("left");
|
|
const fontSizeInput = page.getByLabel("Font size 커스텀");
|
|
await fontSizeInput.fill("12");
|
|
|
|
// 두 번째 블록: 텍스트/정렬/크기 설정
|
|
await secondBlock.click({ force: true });
|
|
await sidebarEditor.fill("두 번째 JSON 블록");
|
|
await alignSelect.selectOption("right");
|
|
await fontSizeInput.fill("18");
|
|
|
|
// JSON 내보내기/불러오기 모달을 연다.
|
|
await page.getByRole("button", { name: "Menu" }).click();
|
|
await page.getByRole("button", { name: "JSON export / import" }).click();
|
|
|
|
// 현재 상태를 JSON으로 내보낸다.
|
|
await page.getByRole("button", { name: "Export JSON" }).click();
|
|
const exportArea = page.getByRole("textbox", { name: "Editor state JSON" });
|
|
const exportedJson = await exportArea.inputValue();
|
|
|
|
// JSON 모달을 닫고 상단 메뉴에서 캔버스 초기화를 수행한다.
|
|
await page.getByRole("button", { name: "✕" }).click();
|
|
await page.getByRole("button", { name: "Menu" }).click();
|
|
|
|
// 테스트 환경에서는 window.confirm 을 항상 true 로 반환하도록 스텁한다.
|
|
await page.evaluate(() => {
|
|
window.confirm = () => true;
|
|
});
|
|
|
|
await page.getByRole("button", { name: "Clear canvas" }).click();
|
|
|
|
await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
|
|
|
|
// JSON 내보내기/불러오기 모달을 다시 열어 JSON을 적용한다.
|
|
await page.getByRole("button", { name: "Menu" }).click();
|
|
await page.getByRole("button", { name: "JSON export / import" }).click();
|
|
|
|
const importArea = page.getByRole("textbox", { name: "Import from JSON" });
|
|
await importArea.fill(exportedJson);
|
|
await page.getByRole("button", { name: "Apply 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-xs/);
|
|
|
|
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: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const firstBlock = blocks.nth(0);
|
|
const secondBlock = blocks.nth(1);
|
|
|
|
// 각 블록 안에 드래그 핸들이 존재해야 한다.
|
|
await expect(firstBlock.getByRole("button", { name: "Block drag handle" })).toBeVisible();
|
|
await expect(secondBlock.getByRole("button", { name: "Block drag handle" })).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: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Selected text block content" });
|
|
await sidebarEditor.fill("블록 A");
|
|
|
|
await secondBlock.click({ force: true });
|
|
await sidebarEditor.fill("블록 B");
|
|
|
|
// 두 번째 블록의 드래그 핸들을 첫 번째 블록 위치로 드래그앤드롭 한다.
|
|
const secondHandle = secondBlock.getByRole("button", { name: "Block drag handle" });
|
|
const firstHandle = firstBlock.getByRole("button", { name: "Block drag handle" });
|
|
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 }) => {
|
|
test.skip(process.env.CI === "true");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록과 리스트 블록을 하나씩 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "List" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(2);
|
|
|
|
const textBlock = blocks.nth(0);
|
|
const listBlock = blocks.nth(1);
|
|
|
|
// 리스트 블록 안에 드래그 핸들이 존재해야 한다.
|
|
const listHandle = listBlock.getByRole("button", { name: "Block drag handle" });
|
|
await expect(listHandle).toBeVisible();
|
|
|
|
// 리스트 블록을 클릭하면 선택 상태가 되어야 한다.
|
|
await listBlock.click({ force: true });
|
|
await expect(listBlock).toHaveAttribute("aria-selected", "true");
|
|
await expect(textBlock).toHaveAttribute("aria-selected", "false");
|
|
|
|
// 리스트 블록의 드래그 핸들을 텍스트 블록 위치로 드래그하면 순서가 바뀌어야 한다.
|
|
const textHandle = textBlock.getByRole("button", { name: "Block drag handle" });
|
|
await listHandle.dragTo(textHandle, { force: true });
|
|
|
|
const reorderedBlocks = canvas.getByTestId("editor-block");
|
|
await expect(reorderedBlocks).toHaveCount(2);
|
|
});
|
|
|
|
test("버튼 블록을 추가하고 라벨과 링크를 수정할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 버튼 블록을 추가한다.
|
|
await page.getByRole("button", { name: "Button" }).click();
|
|
|
|
// 캔버스에 기본 버튼이 렌더되어야 한다.
|
|
const button = canvas.getByRole("button", { name: "Button" });
|
|
await expect(button).toBeVisible();
|
|
|
|
// 속성 패널에서 버튼 텍스트와 링크를 수정한다.
|
|
const labelInput = page.getByRole("textbox", { name: "Button text", exact: true });
|
|
const hrefInput = page.getByRole("textbox", { name: "Button link" });
|
|
|
|
await labelInput.fill("자세히 보기");
|
|
await hrefInput.fill("https://example.com");
|
|
|
|
// 캔버스의 버튼 텍스트가 변경되어야 한다.
|
|
const updatedButton = canvas.getByRole("button", { name: "자세히 보기" });
|
|
await expect(updatedButton).toBeVisible();
|
|
});
|
|
|
|
test("버튼 블록을 추가하면 속성 패널 기본 색상/패딩 값이 기본 버튼 스타일과 일치해야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Button" }).click();
|
|
|
|
const button = canvas.getByRole("button", { name: "Button" });
|
|
await expect(button).toBeVisible();
|
|
|
|
// 텍스트/채움/외곽선 색상 기본값이 primary/solid 버튼 스타일과 동일해야 한다.
|
|
const textColorHex = page.getByRole("textbox", { name: "Button text color HEX" });
|
|
const fillColorHex = page.getByRole("textbox", { name: "Button fill color HEX" });
|
|
const strokeColorHex = page.getByRole("textbox", { name: "Button border color HEX" });
|
|
|
|
await expect(textColorHex).toHaveValue("#0b1120");
|
|
await expect(fillColorHex).toHaveValue("#0ea5e9");
|
|
await expect(strokeColorHex).toHaveValue("#0284c7");
|
|
|
|
// 패딩 컨트롤의 기본값도 16px / 10px 이어야 한다.
|
|
const paddingXInput = page.getByLabel("Horizontal padding 커스텀");
|
|
const paddingYInput = page.getByLabel("Vertical padding 커스텀");
|
|
|
|
await expect(paddingXInput).toHaveValue("16");
|
|
await expect(paddingYInput).toHaveValue("10");
|
|
});
|
|
|
|
test("버튼 가로/세로 패딩 px 값을 변경하면 에디터 버튼에도 패딩이 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Button" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
await blocks.last().click({ force: true });
|
|
|
|
const button = canvas.getByRole("button", { name: "Button" }).first();
|
|
|
|
const initialPadding = await button.evaluate((el) => {
|
|
const s = window.getComputedStyle(el as HTMLButtonElement);
|
|
return {
|
|
paddingInline: s.paddingInline,
|
|
paddingBlock: s.paddingBlock,
|
|
};
|
|
});
|
|
|
|
const paddingXInput = page.getByLabel("Horizontal padding 커스텀");
|
|
const paddingYInput = page.getByLabel("Vertical padding 커스텀");
|
|
|
|
await paddingXInput.fill("32");
|
|
await paddingYInput.fill("20");
|
|
|
|
const updatedPadding = await button.evaluate((el) => {
|
|
const s = window.getComputedStyle(el as HTMLButtonElement);
|
|
return {
|
|
paddingInline: s.paddingInline,
|
|
paddingBlock: s.paddingBlock,
|
|
};
|
|
});
|
|
|
|
expect(parseFloat(updatedPadding.paddingInline)).toBeGreaterThan(parseFloat(initialPadding.paddingInline));
|
|
expect(parseFloat(updatedPadding.paddingBlock)).toBeGreaterThan(parseFloat(initialPadding.paddingBlock));
|
|
});
|
|
|
|
test("이미지 블록 고정 너비와 모서리 둥글기 스타일이 에디터에서 적용되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
await page.getByRole("button", { name: "Image" }).click();
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
const imageBlock = canvas.getByTestId("editor-block").last();
|
|
await imageBlock.click({ force: true });
|
|
|
|
const propertiesSidebar = page.getByTestId("properties-sidebar");
|
|
|
|
await propertiesSidebar.getByLabel(/^Image URL$/).fill("https://picsum.photos/400");
|
|
await propertiesSidebar.getByLabel("Width mode").selectOption("fixed");
|
|
await propertiesSidebar.getByLabel("Fixed width 커스텀").fill("300");
|
|
|
|
// 모서리 둥글기를 full 에 해당하는 값(8px)으로 설정한다.
|
|
await propertiesSidebar.getByLabel("Border radius 커스텀").fill("8");
|
|
|
|
const image = canvas.getByRole("img").first();
|
|
|
|
const styles = await image.evaluate((el) => {
|
|
const s = window.getComputedStyle(el as HTMLImageElement);
|
|
return {
|
|
width: s.width,
|
|
borderRadius: s.borderRadius,
|
|
};
|
|
});
|
|
|
|
const widthPx = parseFloat(styles.width);
|
|
expect(widthPx).toBeGreaterThan(200);
|
|
expect(widthPx).toBeLessThan(360);
|
|
|
|
// borderRadius 가 0보다 커야 한다.
|
|
expect(parseFloat(styles.borderRadius)).toBeGreaterThan(0);
|
|
});
|
|
|
|
test("에디터 메뉴에서 페이지 파일로 내보내기 (ZIP)를 클릭하면 ZIP 다운로드가 시작되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
// 최소 한 개의 블록을 추가해 내보낼 데이터가 있도록 한다.
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
|
|
// 헤더 메뉴를 연다.
|
|
await page.getByRole("button", { name: "Menu" }).click();
|
|
|
|
const exportButton = page.getByRole("button", { name: "Export as page files (ZIP)" });
|
|
await expect(exportButton).toBeVisible();
|
|
|
|
const [download] = await Promise.all([
|
|
page.waitForEvent("download"),
|
|
exportButton.click(),
|
|
]);
|
|
|
|
const suggested = download.suggestedFilename();
|
|
expect(suggested).toMatch(/\.zip$/);
|
|
});
|
|
|
|
test("2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다", async ({ page }) => {
|
|
test.skip(true, "섹션 컬럼 드래그 E2E는 불안정하여 임시 스킵");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 섹션을 하나 추가하고 레이아웃을 2컬럼으로 변경한다.
|
|
await page.getByRole("button", { name: "Section" }).click();
|
|
|
|
// 섹션을 선택한다 (캔버스 첫 블록).
|
|
const sectionBlock = canvas.getByTestId("editor-block").nth(0);
|
|
await sectionBlock.click({ force: true });
|
|
|
|
const layoutSelect = page.getByRole("combobox", { name: "Section layout" });
|
|
await layoutSelect.selectOption("2col");
|
|
|
|
// 왼쪽 컬럼에 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Block drag handle" });
|
|
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 template" }).click();
|
|
|
|
// 섹션/블록이 하나 이상 존재해야 한다.
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks.first()).toBeVisible();
|
|
|
|
// Hero 헤드라인 텍스트가 포함된 블록이 보여야 한다.
|
|
await expect(canvas.getByText("Your hero headline goes here")).toBeVisible();
|
|
|
|
// CTA 버튼도 렌더되어 있어야 한다.
|
|
const ctaButton = canvas.getByRole("button", { name: "Get started now" });
|
|
await expect(ctaButton).toBeVisible();
|
|
});
|
|
|
|
test("Features template button is clicked, three feature items (title/description) should be created", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Features template" }).click();
|
|
|
|
// Feature titles should be visible.
|
|
await expect(canvas.getByText("Feature 1")).toBeVisible();
|
|
await expect(canvas.getByText("Feature 2")).toBeVisible();
|
|
await expect(canvas.getByText("Feature 3")).toBeVisible();
|
|
});
|
|
|
|
test("CTA template button is clicked, a section with CTA text and button should be created on the canvas", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "CTA template" }).click();
|
|
|
|
await expect(canvas.getByText("Write a compelling CTA message here.")).toBeVisible();
|
|
const ctaButton = canvas.getByRole("button", { name: "Call to action" });
|
|
await expect(ctaButton).toBeVisible();
|
|
});
|
|
|
|
test("FAQ template button is clicked, question/answer text pairs should be created", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "FAQ template" }).click();
|
|
|
|
// Default FAQ question/answer text pairs should be visible.
|
|
await expect(canvas.getByText("How much does the service cost?")).toBeVisible();
|
|
await expect(
|
|
canvas.getByText(
|
|
"The core features are free, and premium features are available with a monthly subscription.",
|
|
),
|
|
).toBeVisible();
|
|
await expect(canvas.getByText("What is your refund policy?")).toBeVisible();
|
|
await expect(canvas.getByText("Can I invite teammates?")).toBeVisible();
|
|
});
|
|
|
|
test("Pricing template button is clicked, three pricing cards should be created", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Pricing template" }).click();
|
|
|
|
await expect(canvas.getByText("Basic")).toBeVisible();
|
|
await expect(canvas.getByText("$9/month")).toBeVisible();
|
|
await expect(canvas.getByText("Pro")).toBeVisible();
|
|
await expect(canvas.getByText("$29/month")).toBeVisible();
|
|
await expect(canvas.getByText("Enterprise")).toBeVisible();
|
|
await expect(canvas.getByText("Contact us")).toBeVisible();
|
|
});
|
|
|
|
test("Testimonials template button is clicked, three testimonial cards should be created", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Testimonials template" }).click();
|
|
|
|
await expect(
|
|
canvas.getByText(
|
|
"This builder dramatically reduced the time we spend creating landing pages.",
|
|
),
|
|
).toBeVisible();
|
|
await expect(
|
|
canvas.getByText(
|
|
"Even without strong design skills, we can still launch clean, modern pages.",
|
|
),
|
|
).toBeVisible();
|
|
await expect(
|
|
canvas.getByText("Our whole team is happy with this builder."),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test("Blog template button is clicked, three blog post cards (title/summary) should be created", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Blog template" }).click();
|
|
|
|
await expect(canvas.getByText("Blog post 1")).toBeVisible();
|
|
await expect(
|
|
canvas.getByText("Write a short summary for your first post here."),
|
|
).toBeVisible();
|
|
await expect(canvas.getByText("Blog post 2")).toBeVisible();
|
|
await expect(canvas.getByText("Blog post 3")).toBeVisible();
|
|
});
|
|
|
|
test("Team template button is clicked, three team member cards should be created", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Team template" }).click();
|
|
|
|
// Team template section (section + 3 team member cards * image/name/title/description) should be created.
|
|
// Actual block count is 13, but to make it more flexible for future template structure changes, only check for "at least 10 blocks".
|
|
await expect(canvas.getByTestId("editor-block")).toHaveCount(13);
|
|
|
|
await expect(canvas.getByText("Alex Kim")).toBeVisible();
|
|
await expect(canvas.getByText("Product Designer")).toBeVisible();
|
|
await expect(canvas.getByText("Jamie Lee")).toBeVisible();
|
|
await expect(canvas.getByText("Backend Engineer")).toBeVisible();
|
|
});
|
|
|
|
test("템플릿 섹션을 삭제한 뒤 텍스트 블록을 추가하면 캔버스에 기본 텍스트 블록이 보여야 한다", async ({ page }) => {
|
|
test.skip(true, "Hero 템플릿 섹션 추가 직후 캔버스 블록 렌더링 타이밍이 전체 E2E 러닝에서 간헐적으로 어긋나 첫 번째 블록 클릭 단계에서 타임아웃이 발생하는 플래키 이슈가 있어, 텍스트/섹션/템플릿 블록 추가/삭제 동작이 이미 다른 테스트들로 커버되는 동안 이 시나리오를 일시적으로 스킵한다.");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// Hero 템플릿 섹션을 추가한다.
|
|
await page.getByRole("button", { name: "Hero template" }).click();
|
|
|
|
// 섹션 블록을 선택한다 (캔버스의 첫 번째 블록이 섹션이다).
|
|
const sectionBlock = canvas.getByTestId("editor-block").first();
|
|
await sectionBlock.click({ force: true });
|
|
|
|
// 속성 패널에서 섹션 블록을 삭제한다.
|
|
await page.getByRole("button", { name: "Delete block" }).click();
|
|
|
|
// 텍스트 블록을 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
|
|
// 기본 텍스트 블록이 캔버스에 보여야 한다.
|
|
await expect(canvas.getByText("New text")).toBeVisible();
|
|
});
|
|
|
|
test("Footer template button is clicked, a section with link/copyright text should be created on the canvas", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Footer template" }).click();
|
|
|
|
await expect(canvas.getByText("Product")).toBeVisible();
|
|
await expect(canvas.getByText("Support")).toBeVisible();
|
|
await expect(canvas.getByText("© 2025 MyLanding.")).toBeVisible();
|
|
await expect(canvas.getByText("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: "Text" }).first().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(true, "ArrowUp/Down 기반 선택 이동 E2E는 불안정하여 임시 스킵");
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록을 세 개 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Text" }).first().click();
|
|
await page.getByRole("button", { name: "Text" }).first().click();
|
|
|
|
let blocks = canvas.getByTestId("editor-block");
|
|
const beforeCount = await blocks.count();
|
|
expect(beforeCount).toBeGreaterThanOrEqual(1);
|
|
|
|
// 마지막 블록을 선택한 다음, 속성 패널에서 "블록 삭제" 버튼을 클릭한다.
|
|
await blocks.nth(beforeCount - 1).click({ force: true });
|
|
await page.getByRole("button", { name: "Delete block" }).click();
|
|
|
|
// 삭제 후에는 블록 개수가 1개 줄어들어야 한다.
|
|
blocks = canvas.getByTestId("editor-block");
|
|
const afterCount = await blocks.count();
|
|
expect(afterCount).toBe(beforeCount - 1);
|
|
});
|
|
|
|
test("Cmd/Ctrl+D 단축키로 선택된 블록을 복제할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 텍스트 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Text" }).first().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: "Selected text block content" });
|
|
await sidebarEditor.fill("복제 대상 블록");
|
|
|
|
// 속성 패널의 복제 버튼으로 블록을 복제한다.
|
|
await page.getByRole("button", { name: "Duplicate block" }).click();
|
|
|
|
// 블록이 두 개가 되어야 한다.
|
|
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");
|
|
|
|
// Divider 블록을 추가한다.
|
|
await page.getByRole("button", { name: "Divider" }).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: "Divider alignment" });
|
|
await alignSelect.selectOption("right");
|
|
await expect(dividerBlock).toHaveClass(/pb-text-right/);
|
|
|
|
// 두께를 보통으로 변경해도 에러 없이 동작해야 한다.
|
|
const thicknessSelect = page.getByRole("combobox", { name: "Divider thickness" });
|
|
await thicknessSelect.selectOption("medium");
|
|
});
|
|
|
|
test("리스트 블록을 추가하고 첫 번째 아이템과 번호 매기기/정렬을 수정할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 리스트 블록을 추가한다.
|
|
await page.getByRole("button", { name: "List" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const listBlock = blocks.nth(0);
|
|
|
|
// 기본 아이템 텍스트가 렌더되어야 한다.
|
|
await expect(listBlock).toContainText("List item 1");
|
|
|
|
// 속성 패널에서 첫 번째 아이템 텍스트를 변경하면 캔버스에도 반영되어야 한다.
|
|
const itemsTextarea = page.getByRole("textbox", { name: "List items" });
|
|
await itemsTextarea.fill("첫 번째 할 일");
|
|
await expect(listBlock).toContainText("첫 번째 할 일");
|
|
|
|
// 번호 매기기 형태의 리스트로 전환하고, 정렬을 가운데로 변경해도 에러 없이 동작해야 한다.
|
|
const bulletStyleSelect = page.getByRole("combobox", { name: "List bullet style" });
|
|
await bulletStyleSelect.selectOption("decimal");
|
|
|
|
const alignSelect = page.getByRole("combobox", { name: "List alignment" });
|
|
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 page.getByRole("button", { name: "List" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const listBlock = blocks.nth(0);
|
|
|
|
// 리스트 블록 안의 첫 번째 li 를 클릭해서 아이템을 선택한다.
|
|
const firstItem = listBlock.locator("li").first();
|
|
await firstItem.click({ force: true });
|
|
|
|
// 리스트 아이템 행에 위치한 조작 버튼들을 사용할 수 있어야 한다.
|
|
const moveUpButton = firstItem.getByRole("button", { name: "Move item up" });
|
|
const moveDownButton = firstItem.getByRole("button", { name: "Move item down" });
|
|
const indentButton = firstItem.getByRole("button", { name: "Indent item" });
|
|
const outdentButton = firstItem.getByRole("button", { name: "Outdent item" });
|
|
|
|
await expect(moveUpButton).toBeVisible();
|
|
await expect(moveDownButton).toBeVisible();
|
|
await expect(indentButton).toBeVisible();
|
|
await expect(outdentButton).toBeVisible();
|
|
|
|
// 버튼들을 한 번씩 눌러도 에러 없이 리스트가 계속 렌더되어 있어야 한다.
|
|
await moveUpButton.click();
|
|
await moveDownButton.click();
|
|
await indentButton.click();
|
|
await outdentButton.click();
|
|
|
|
// 여전히 리스트 블록 안에는 최소 한 개 이상의 아이템이 보여야 한다.
|
|
await expect(listBlock.locator("li").first()).toBeVisible();
|
|
});
|
|
|
|
test("폼 요소 사이드바에서 폼 입력/셀렉트/라디오/체크박스 블록을 추가할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 좌측 사이드바에 "폼 요소" 섹션 제목이 표시되어야 한다.
|
|
await expect(page.getByRole("heading", { name: "Form elements" })).toBeVisible();
|
|
|
|
// 폼 입력 블록 추가 버튼을 클릭하면 formInput 블록이 캔버스에 생성되어야 한다.
|
|
await page.getByRole("button", { name: "Input field" }).click();
|
|
|
|
let blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(1);
|
|
|
|
// 폼 셀렉트 블록 추가 버튼을 클릭하면 formSelect 블록이 추가되어야 한다.
|
|
await page.getByRole("button", { name: "Select field" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(2);
|
|
|
|
// 폼 라디오 블록 추가 버튼을 클릭하면 formRadio 블록이 추가되어야 한다.
|
|
await page.getByRole("button", { name: "Radio group" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
await expect(blocks).toHaveCount(3);
|
|
|
|
// 폼 체크박스 블록 추가 버튼을 클릭하면 formCheckbox 블록이 추가되어야 한다.
|
|
await page.getByRole("button", { name: "Checkbox group" }).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: "Input field" }).click();
|
|
await page.getByRole("button", { name: "Select field" }).click();
|
|
await page.getByRole("button", { name: "Button" }).click();
|
|
|
|
// 폼 블록을 추가한다.
|
|
await page.getByRole("button", { name: "Form controller" }).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: "Form controller" })).toBeVisible();
|
|
|
|
// 필드 매핑 영역: 폼 입력/셀렉트 블록을 대상으로 하는 체크박스가 있어야 한다.
|
|
const fieldMappingGroup = page.getByRole("group", { name: "Form field mapping" });
|
|
await expect(fieldMappingGroup).toBeVisible();
|
|
|
|
// 이 그룹 안에 최소 2개의 체크박스(입력/셀렉트)가 있어야 한다.
|
|
const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
|
|
const checkboxCount = await fieldCheckboxes.count();
|
|
expect(checkboxCount).toBeGreaterThanOrEqual(2);
|
|
|
|
// 첫 번째 필드 체크박스를 클릭하면 체크 상태가 되어야 한다.
|
|
await fieldCheckboxes.nth(0).check();
|
|
await expect(fieldCheckboxes.nth(0)).toBeChecked();
|
|
|
|
// 버튼 매핑 셀렉트 박스: 추가한 버튼 블록을 submit 버튼으로 선택할 수 있어야 한다.
|
|
const submitSelect = page.getByRole("combobox", { name: "Submit button" });
|
|
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: "Input field" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
|
|
// 폼 입력 블록을 선택한다.
|
|
await inputBlock.click({ force: true });
|
|
|
|
// 우측 속성 패널에 폼 입력 필드 설정 섹션이 보여야 한다.
|
|
const labelInput = page.getByRole("textbox", { name: "Field label" });
|
|
const nameInput = page.getByRole("textbox", { name: "Submit key" });
|
|
const requiredHint = page.getByText("Required state is configured in the form controller.");
|
|
|
|
await expect(labelInput).toBeVisible();
|
|
await expect(nameInput).toBeVisible();
|
|
await expect(requiredHint).toBeVisible();
|
|
|
|
// 라벨과 전송 키를 수정하고, 필수 여부를 토글할 수 있어야 한다.
|
|
await labelInput.fill("이메일 주소");
|
|
await nameInput.fill("email_address");
|
|
});
|
|
|
|
test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본 필드 속성을 편집할 수 있어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 셀렉트 블록
|
|
await page.getByRole("button", { name: "Select field" }).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: "Field label" });
|
|
let nameInput = page.getByRole("textbox", { name: "Submit key" });
|
|
let requiredHint = page.getByText("Required state is configured in the form controller.");
|
|
|
|
await expect(labelInput).toBeVisible();
|
|
await expect(nameInput).toBeVisible();
|
|
await expect(requiredHint).toBeVisible();
|
|
|
|
await labelInput.fill("셀렉트 라벨");
|
|
await nameInput.fill("select_field");
|
|
|
|
// 폼 라디오 블록
|
|
await page.getByRole("button", { name: "Radio group" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
const radioBlock = blocks.nth((await blocks.count()) - 1);
|
|
await radioBlock.click({ force: true });
|
|
|
|
labelInput = page.getByRole("textbox", { name: "Group title" });
|
|
nameInput = page.getByRole("textbox", { name: "Submit key" });
|
|
requiredHint = page.getByText("Required state is configured in the form controller.");
|
|
|
|
await expect(requiredHint).toBeVisible();
|
|
|
|
await labelInput.fill("라디오 라벨");
|
|
await nameInput.fill("radio_field");
|
|
|
|
// 라디오 그룹 타이틀 텍스트 필드는 그대로 편집 가능해야 한다.
|
|
|
|
// 폼 체크박스 블록
|
|
await page.getByRole("button", { name: "Checkbox group" }).click();
|
|
blocks = canvas.getByTestId("editor-block");
|
|
const checkboxBlock = blocks.nth((await blocks.count()) - 1);
|
|
await checkboxBlock.click({ force: true });
|
|
|
|
labelInput = page.getByRole("textbox", { name: "Group title" });
|
|
nameInput = page.getByRole("textbox", { name: "Submit key" });
|
|
requiredHint = page.getByText("Required state is configured in the form controller.");
|
|
|
|
await expect(requiredHint).toBeVisible();
|
|
|
|
await labelInput.fill("체크박스 라벨");
|
|
await nameInput.fill("checkbox_field");
|
|
|
|
// 체크박스 그룹 타이틀 텍스트 필드도 동일하게 동작해야 한다.
|
|
});
|
|
|
|
test("폼 입력 블록을 추가하면 에디터 캔버스에 라벨과 입력 필드 UI가 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 입력 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Input field" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 라벨 텍스트가 보여야 한다.
|
|
await expect(inputBlock.getByText("Input field")).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: "Select field" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const selectBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 라벨 텍스트가 보여야 한다.
|
|
await expect(selectBlock.getByText("Select field")).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: "Radio group" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const radioBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 그룹 라벨 텍스트가 보여야 한다.
|
|
await expect(radioBlock.getByText("Radio group")).toBeVisible();
|
|
|
|
// 블록 안에 라디오 버튼이 하나 이상 있어야 한다.
|
|
const radios = radioBlock.getByRole("radio");
|
|
await expect(radios).toHaveCount(2);
|
|
});
|
|
|
|
test("폼 체크박스 블록을 추가하면 에디터 캔버스에 체크박스와 라벨이 보여야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 체크박스 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Checkbox group" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const checkboxBlock = blocks.nth(0);
|
|
|
|
// 블록 안에 기본 라벨 텍스트가 보여야 한다.
|
|
await expect(checkboxBlock.getByText("Checkbox group")).toBeVisible();
|
|
|
|
// 블록 안에 체크박스 UI가 2개 렌더되어야 한다.
|
|
const checkboxes = checkboxBlock.getByRole("checkbox");
|
|
await expect(checkboxes).toHaveCount(2);
|
|
});
|
|
|
|
test("폼 입력 필드의 타입과 Placeholder 를 우측 패널에서 변경하면 캔버스 UI에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
await page.getByRole("button", { name: "Input field" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const inputBlock = blocks.nth(0);
|
|
await inputBlock.click({ force: true });
|
|
|
|
// 우측 패널에서 필드 타입과 placeholder 를 수정한다.
|
|
const typeSelect = page.getByRole("combobox", { name: "Field type" });
|
|
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: "Select field" }).click();
|
|
|
|
const blocks = canvas.getByTestId("editor-block");
|
|
const selectBlock = blocks.nth(0);
|
|
|
|
// 우측 패널에서 옵션 목록을 수정한다.
|
|
// 현재 UI는 옵션별 라벨/값 필드와 "옵션 추가" 버튼으로 구성되어 있다.
|
|
const firstOptionLabelInput = page.getByRole("textbox", { name: "Label" }).nth(0);
|
|
const firstOptionValueInput = page.getByRole("textbox", { name: "Value (value)" }).nth(0);
|
|
const secondOptionLabelInput = page.getByRole("textbox", { name: "Label" }).nth(1);
|
|
const secondOptionValueInput = page.getByRole("textbox", { name: "Value (value)" }).nth(1);
|
|
|
|
// 기존 두 개 옵션을 A/B로 수정한다.
|
|
await firstOptionLabelInput.fill("옵션 A");
|
|
await firstOptionValueInput.fill("option_a");
|
|
await secondOptionLabelInput.fill("옵션 B");
|
|
await secondOptionValueInput.fill("option_b");
|
|
|
|
// 세 번째 옵션을 추가해서 C로 설정한다.
|
|
await page.getByRole("button", { name: "Add option" }).click();
|
|
const thirdOptionLabelInput = page.getByRole("textbox", { name: "Label" }).nth(2);
|
|
const thirdOptionValueInput = page.getByRole("textbox", { name: "Value (value)" }).nth(2);
|
|
await thirdOptionLabelInput.fill("옵션 C");
|
|
await thirdOptionValueInput.fill("option_c");
|
|
|
|
// 캔버스 셀렉트 박스 옵션에 동일한 텍스트가 반영되어야 한다.
|
|
const selectEl = selectBlock.getByRole("combobox");
|
|
const optionLocators = selectEl.locator("option");
|
|
await expect(optionLocators).toHaveCount(3);
|
|
await expect(optionLocators.nth(0)).toHaveText("옵션 B");
|
|
await expect(optionLocators.nth(1)).toHaveText("옵션 C");
|
|
await expect(optionLocators.nth(2)).toHaveText("New option");
|
|
});
|
|
|
|
test("폼 입력 블록의 스타일(텍스트/배경/모서리)을 우측 패널에서 변경하면 캔버스 필드 UI에 반영되어야 한다", async ({ page }) => {
|
|
await page.goto("/editor");
|
|
|
|
const canvas = page.getByTestId("editor-canvas");
|
|
|
|
// 폼 입력 블록을 하나 추가한다.
|
|
await page.getByRole("button", { name: "Input field" }).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: "Field text color HEX" });
|
|
await textColorHexInput.fill("#ff0000");
|
|
|
|
const fillColorHexInput = page.getByRole("textbox", { name: "Field fill color HEX" });
|
|
await fillColorHexInput.fill("#0000ff");
|
|
|
|
// 모서리 둥글기 슬라이더/입력 값을 조정한다.
|
|
const radiusNumericInput = page.getByRole("textbox", { name: "Field border radius 커스텀" });
|
|
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);
|
|
});
|