1
import { test, expect, createTestPage, waitForCanvasSceneCount } from "../fixtures/bland-test";
2
 
3
test.describe("canvas page - basic", () => {
4
  test("sidebar dropdown creates a canvas page and Excalidraw mounts", async ({
5
    authenticatedPage: { page },
6
    e2eWorkspace,
7
  }) => {
8
    await page.goto(`/${e2eWorkspace.workspaceSlug}`);
9
 
10
    const newPageChevron = page.getByRole("button", { name: "New page options" });
11
    await newPageChevron.waitFor({ timeout: 15_000 });
12
    await newPageChevron.click();
13
 
14
    const newCanvasOption = page.getByRole("button", { name: "New canvas" });
15
    await newCanvasOption.waitFor({ timeout: 5_000 });
16
    await newCanvasOption.click();
17
 
18
    // Excalidraw's root container has a predictable class; wait for it to mount.
19
    await page.locator(".excalidraw").waitFor({ state: "attached", timeout: 30_000 });
20
 
21
    // URL should match /$workspaceSlug/$pageId
22
    await expect(page).toHaveURL(/\/[^/]+\/[A-Z0-9]+$/);
23
 
24
    // No Tiptap editor should render on a canvas page.
25
    await expect(page.locator(".tiptap[contenteditable='true']")).toHaveCount(0);
26
  });
27
 
28
  test("API-created canvas page mounts Excalidraw (not the editor)", async ({
29
    authenticatedPage: { page, accessToken },
30
    e2eWorkspace,
31
  }) => {
32
    await page.setViewportSize({ width: 1440, height: 900 });
33
    const testPage = await createTestPage(page, accessToken, "Canvas via API", e2eWorkspace, "canvas");
34
 
35
    await page.goto(`/${testPage.workspaceSlug}/${testPage.pageId}`);
36
 
37
    await page.locator(".excalidraw").waitFor({ state: "attached", timeout: 30_000 });
38
    await expect(page.locator(".tiptap[contenteditable='true']")).toHaveCount(0);
39
    await expect(page.locator("aside[aria-label='Document outline']")).toHaveCount(0);
40
  });
41
 
42
  test("canvas page persists drawn elements across reload", async ({
43
    authenticatedPage: { page, accessToken },
44
    e2eWorkspace,
45
  }) => {
46
    const testPage = await createTestPage(page, accessToken, "Canvas Persistence", e2eWorkspace, "canvas");
47
 
48
    await page.goto(`/${testPage.workspaceSlug}/${testPage.pageId}`);
49
    await page.locator(".excalidraw").waitFor({ state: "attached", timeout: 30_000 });
50
 
51
    // Select the rectangle tool (Excalidraw exposes shortcut `R`) and drag-draw.
52
    await page.locator(".excalidraw").click();
53
    await page.keyboard.press("r");
54
 
55
    const canvas = page.locator("canvas.excalidraw__canvas.interactive").first();
56
    await canvas.waitFor({ timeout: 10_000 });
57
    const box = await canvas.boundingBox();
58
    if (!box) throw new Error("canvas has no bounding box");
59
 
60
    const startX = box.x + box.width * 0.3;
61
    const startY = box.y + box.height * 0.3;
62
    const endX = box.x + box.width * 0.6;
63
    const endY = box.y + box.height * 0.6;
64
 
65
    await page.mouse.move(startX, startY);
66
    await page.mouse.down();
67
    await page.mouse.move(endX, endY, { steps: 10 });
68
    await page.mouse.up();
69
 
70
    await waitForCanvasSceneCount(page, 1);
71
 
72
    // Reload; the rectangle should still be present in the scene.
73
    await page.reload();
74
    await page.locator(".excalidraw").waitFor({ state: "attached", timeout: 30_000 });
75
 
76
    await waitForCanvasSceneCount(page, 1);
77
  });
78
});