test: add editor E2E test specs

2026-08-03 07:46:42 +02:00 · 2026-05-07 09:29:01 +08:00
parent 4a96d4b217
commit e11e3660d9
10 changed files with 872 additions and 0 deletions
@@ -0,0 +1,143 @@
+import { createNewDocument, expect, test } from "./helpers";
+
+test.describe("Editor Layers Panel", () => {
+  test.beforeEach(async ({ editorPage: page }) => {
+    await createNewDocument(page);
+    // Ensure layers tab is active
+    await page.locator("[data-testid='tab-layers']").click();
+    await page.waitForTimeout(300);
+  });
+
+  test("layers panel shows default Layer 1", async ({ editorPage: page }) => {
+    const layersPanel = page.locator("[data-testid='layers-panel']");
+    await expect(layersPanel).toBeVisible();
+
+    // Should have at least one layer with "Layer 1" text
+    const layerRows = layersPanel.locator("[role='option']");
+    await expect(layerRows).toHaveCount(1);
+    await expect(layersPanel.getByText("Layer 1")).toBeVisible();
+  });
+
+  test("add layer button creates new layer", async ({ editorPage: page }) => {
+    const addBtn = page.locator("[data-testid='add-layer-btn']");
+    await expect(addBtn).toBeVisible();
+
+    await addBtn.click();
+    await page.waitForTimeout(300);
+
+    // Now there should be 2 layers
+    const layersPanel = page.locator("[data-testid='layers-panel']");
+    const layerRows = layersPanel.locator("[role='option']");
+    await expect(layerRows).toHaveCount(2);
+  });
+
+  test("cannot delete last layer", async ({ editorPage: page }) => {
+    const deleteBtn = page.locator("[data-testid='delete-layer-btn']");
+    await expect(deleteBtn).toBeVisible();
+
+    // With only one layer, delete button should be disabled
+    await expect(deleteBtn).toBeDisabled();
+  });
+
+  test("delete button enabled with multiple layers", async ({ editorPage: page }) => {
+    // Add a second layer
+    await page.locator("[data-testid='add-layer-btn']").click();
+    await page.waitForTimeout(300);
+
+    const deleteBtn = page.locator("[data-testid='delete-layer-btn']");
+    await expect(deleteBtn).toBeEnabled();
+  });
+
+  test("eye icon toggles visibility", async ({ editorPage: page }) => {
+    const layersPanel = page.locator("[data-testid='layers-panel']");
+    const layerRow = layersPanel.locator("[role='option']").first();
+
+    // Initially visible (Eye icon, aria-label "Hide layer")
+    const hideBtn = layerRow.locator("button[aria-label='Hide layer']");
+    await expect(hideBtn).toBeVisible();
+
+    // Click to hide
+    await hideBtn.click();
+    await page.waitForTimeout(300);
+
+    // Now should show "Show layer" button
+    const showBtn = layerRow.locator("button[aria-label='Show layer']");
+    await expect(showBtn).toBeVisible();
+
+    // Click again to show
+    await showBtn.click();
+    await page.waitForTimeout(300);
+
+    await expect(layerRow.locator("button[aria-label='Hide layer']")).toBeVisible();
+  });
+
+  test("lock icon toggles lock state", async ({ editorPage: page }) => {
+    const layersPanel = page.locator("[data-testid='layers-panel']");
+    const layerRow = layersPanel.locator("[role='option']").first();
+
+    // Initially unlocked
+    const lockBtn = layerRow.locator("button[aria-label='Lock layer']");
+    await expect(lockBtn).toBeVisible();
+
+    await lockBtn.click();
+    await page.waitForTimeout(300);
+
+    // Now should show "Unlock layer"
+    const unlockBtn = layerRow.locator("button[aria-label='Unlock layer']");
+    await expect(unlockBtn).toBeVisible();
+  });
+
+  test("blend mode dropdown shows modes", async ({ editorPage: page }) => {
+    const blendSelect = page.locator("[data-testid='blend-mode-select']");
+    await expect(blendSelect).toBeVisible();
+
+    // Check that it has the expected blend mode options
+    const options = blendSelect.locator("option");
+    const texts = await options.allTextContents();
+
+    expect(texts).toContain("Normal");
+    expect(texts).toContain("Multiply");
+    expect(texts).toContain("Screen");
+    expect(texts).toContain("Overlay");
+    expect(texts).toContain("Darken");
+    expect(texts).toContain("Lighten");
+  });
+
+  test("opacity slider works", async ({ editorPage: page }) => {
+    const slider = page.locator("[data-testid='layer-opacity-slider']");
+    await expect(slider).toBeVisible();
+
+    // Default opacity should be 100
+    await expect(slider).toHaveValue("100");
+
+    // Change opacity
+    await slider.fill("50");
+    await page.waitForTimeout(300);
+
+    await expect(slider).toHaveValue("50");
+  });
+
+  test("double-click layer name enters rename mode", async ({ editorPage: page }) => {
+    const layersPanel = page.locator("[data-testid='layers-panel']");
+
+    // Double-click the layer name button
+    const nameBtn = layersPanel
+      .locator("[role='option']")
+      .first()
+      .locator("button")
+      .filter({ hasText: "Layer 1" });
+    await nameBtn.dblclick();
+    await page.waitForTimeout(300);
+
+    // An input for renaming should appear
+    const renameInput = layersPanel.locator("input[type='text'][class*='bg-muted']");
+    await expect(renameInput).toBeVisible();
+  });
+
+  test("layer row highlights active layer", async ({ editorPage: page }) => {
+    const layersPanel = page.locator("[data-testid='layers-panel']");
+    const layerRow = layersPanel.locator("[role='option']").first();
+
+    await expect(layerRow).toHaveAttribute("aria-selected", "true");
+  });
+});