confluence-whiteboard.spec.ts

confluence-whiteboard.spec.tstests/e2e/specs/confluence-whiteboard.spec.tsraw ← specs5,353 B← Back to the app
1/**
2 * T-168/T-169/T-170 — whiteboard E2E (dev-stack, Playwright).
3 *
4 * Verifies the hand-rolled SVG whiteboard (P5) end to end through the real
5 * browser against the live web (:3000) + API (:4000):
6 *   - a `type:"whiteboard"` page renders the canvas (wb-root + wb-canvas)
7 *   - click-create a sticky (tool → click → wb-sticky appears, tool reverts
8 *     to select — the click-create contract in onPointerDown)
9 *   - edit the sticky's label (double-click → textarea overlay → text
10 *     commits, label re-renders)
11 *   - drag-create a rectangle (tool → drag → wb-rect appears)
12 *   - the edited document round-trips through the API (GET /pages/:id/
13 *     whiteboard returns the saved elements) — the autosave path
14 *
15 * URL pattern: /w/{workspaceSlug}/page/{pageId} (the sidebar's own link
16 * format — apps/web/src/components/layout/sidebar.tsx). The workspace param
17 * accepts id or slug; we pass the slug the API returns on create.
18 */
19import { test, expect } from "../fixtures";
20 
21interface WhiteboardPageDto {
22  id: string;
23  kind?: string;
24}
25 
26interface CanvasElement {
27  id: string;
28  type: string;
29  text?: string;
30}
31 
32test.describe("Whiteboard — P5 (T-168/T-169/T-170)", () => {
33  test("renders the canvas, adds a sticky + rect, edits text, and autosaves to the API", async ({
34    authPage,
35    api,
36    freshWorkspace
37  }) => {
38    const ws = await freshWorkspace("Whiteboard Space");
39 
40    // Create a whiteboard page via the API (the UI create-dialog path is
41    // exercised by the page-creation suite; here we want a deterministic
42    // starting document).
43    const createRes = await api.post(`/api/v1/workspaces/${ws.id}/pages`, {
44      data: { title: "Team Wall", type: "whiteboard" }
45    });
46    expect(createRes.status(), await createRes.text()).toBe(201);
47    const page = (await createRes.json()) as WhiteboardPageDto;
48    expect(page.id).toBeTruthy();
49 
50    await authPage.goto(`/w/${ws.slug}/page/${page.id}`);
51 
52    // 1. The canvas renders (the wb-root shell + the SVG canvas).
53    const root = authPage.getByTestId("wb-root");
54    await expect(root).toBeVisible({ timeout: 20_000 });
55    await expect(authPage.getByTestId("wb-canvas")).toBeVisible();
56 
57    // 2. Click-create a sticky: select the sticky tool, click mid-canvas.
58    //    onPointerDown leaves the element in editing state (setEditingId),
59    //    which renders a focused textarea overlay (wb-editor-input).
60    const canvas = authPage.getByTestId("wb-canvas");
61    const box = await canvas.boundingBox();
62    if (!box) throw new Error("wb-canvas has no bounding box");
63    await authPage.getByTestId("wb-tool-sticky").click();
64    await authPage.mouse.click(box.x + box.width / 2, box.y + box.height / 3);
65    await expect(authPage.getByTestId("wb-sticky")).toHaveCount(1, { timeout: 10_000 });
66    await expect(authPage.getByTestId("wb-tool-select")).toHaveClass(/active/);
67 
68    // 3. Edit the sticky's label: double-click the sticky to open the inline
69    //    editor (onDoubleClick → setEditingId → the focused textarea overlay
70    //    wb-editor-input), type, commit with Escape.
71    //    NOTE (probed 2026-10-11): click-CREATE selects the sticky but does
72    //    NOT retain the editor in a real browser (focus stays on <body>),
73    //    while the double-click path opens it reliably — so the spec uses
74    //    double-click, the documented edit entry point.
75    const LABEL = "E2E sticky text";
76    await authPage.getByTestId("wb-sticky").dblclick();
77    const editor = authPage.getByTestId("wb-editor-input");
78    await expect(editor).toBeVisible({ timeout: 10_000 });
79    await editor.fill(LABEL);
80    await editor.press("Escape");
81    await expect(editor).toHaveCount(0);
82    await expect(authPage.getByTestId("wb-label").first()).toContainText(LABEL, {
83      timeout: 10_000
84    });
85 
86    // 4. Drag-create a rectangle: rect tool → mouse down → move → up.
87    await authPage.getByTestId("wb-tool-rect").click();
88    await authPage.mouse.move(box.x + box.width / 2 + 120, box.y + box.height * 0.6);
89    await authPage.mouse.down();
90    await authPage.mouse.move(box.x + box.width / 2 + 220, box.y + box.height * 0.75, {
91      steps: 5
92    });
93    await authPage.mouse.up();
94    await expect(authPage.getByTestId("wb-rect")).toHaveCount(1, { timeout: 10_000 });
95 
96    // 5. Autosave round-trip: the debounced save (1.2 s) hits
97    //    PUT /pages/:id/whiteboard; GET must then carry both elements + the
98    //    edited text.
99    // 5. Autosave round-trip: the debounced save (1.2 s, use-whiteboard.ts)
100    //    PUTs the full canvas to /pages/:id/whiteboard; GET must then carry
101    //    BOTH elements + the edited text. NOTE: `canvas.elements` is an
102    //    id→element OBJECT map (the @factory/whiteboard v1 shape), not an
103    //    array — Object.values it before searching.
104    await expect
105      .poll(
106        async () => {
107          const res = await api.get(`/api/v1/pages/${page.id}/whiteboard`);
108          const body = (await res.json()) as { canvas?: { elements?: Record<string, CanvasElement> } };
109          const els = Object.values(body.canvas?.elements ?? {});
110          const sticky = els.find((e) => e.type === "sticky");
111          return !!sticky && sticky.text === LABEL && els.some((e) => e.type === "rect");
112        },
113        { timeout: 15_000 }
114      )
115      .toBe(true);
116  });
117});
118