jaybe/page-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

에디터 UX: Undo/Redo 및 키보드 선택 이동 추가

Browse Source
This commit is contained in:
Jaybe
2025-11-18 13:43:25 +09:00
parent adee5c0891
commit e2201f528e
4 changed files with 197 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/editor.spec.ts
+57 -1
View File
@@ -325,7 +325,7 @@ test("Features 템플릿 버튼을 클릭하면 3개의 Feature 항목(제목/
await expect(canvas.getByText("Feature 3 제목")).toBeVisible();
});
test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 생성되어야 한다", async ({ page }) => {
test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => {
await page.goto("/editor");
const canvas = page.getByTestId("editor-canvas");
@@ -336,3 +336,59 @@ test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 생성되
const ctaButton = canvas.getByRole("button", { name: "CTA 버튼" });
await expect(ctaButton).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 한다.
await page.keyboard.press("Meta+Z");
// Undo 후에는 블록이 0개가 되어야 한다.
await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
// Cmd/Ctrl + Shift + Z 로 Redo 한다.
await page.keyboard.press("Meta+Shift+Z");
// Redo 후 다시 블록이 1개가 되어야 한다.
await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
});
test("ArrowUp/ArrowDown 키로 선택된 블록을 위/아래로 이동하며 순차적으로 선택할 수 있어야 한다", 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();
const blocks = canvas.getByTestId("editor-block");
await expect(blocks).toHaveCount(3);
// 첫 번째 블록을 클릭해 선택한다.
await blocks.nth(0).click();
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");
});