editor-table-toc.spec.ts

editor-table-toc.spec.tstests/e2e/specs/editor-table-toc.spec.tsraw ← specs10,207 B← Back to the app
1/**
2 * T-146/T-147 — editor table + table-of-contents E2E (dev-stack, Playwright).
3 *
4 * Verifies the two T-146/T-147 block surfaces end to end through the real
5 * browser against the live web (:3000) + API (:4000):
6 *
7 *   Table (T-146)
8 *     - "/table" in the slash menu opens the insert dialog's Table tab
9 *       (the command is `special` — a bare table block has no columns/rows
10 *       and the renderer draws nothing, so the dialog is the only usable
11 *       entry; the same pattern the "image" command uses)
12 *     - the dialog pre-creates the chosen rows × cols grid
13 *     - "+ Add row" appends a row; a cell edit persists
14 *     - the round-trip: GET /pages/:id/blocks carries the table's
15 *       properties.columns / properties.rows (the web's canonical storage —
16 *       see the rule-29 note in FEATURE_TRACKER T-146: the API DOC
17 *       (docs/api/blocks.md) prescribes content.rows of {text,marks} cells,
18 *       the shared Zod schema prescribes content.rows of strings, and the
19 *       live web stores properties.rows/columns of strings)
20 *
21 *   Table of contents (T-147)
22 *     - a toc block lists the page's H1–H3 headings by title (the entries
23 *       are derived from the page's blocks at render time)
24 *     - clicking an entry deep-links to the heading block (URL
25 *       /w/<ws>/page/<id>/<blockId> + smooth scroll)
26 *     - headings authored via the API (content = the canonical `{ text }`
27 *       shape) show their real title, NOT "Untitled" — regression guard for
28 *       the extractTitle bug that only handled HTML-string content
29 *
30 * URL pattern: /w/{workspaceSlug}/page/{pageId} (the sidebar's own link
31 * format). Workspace param accepts id or slug; we pass the slug.
32 */
33import { test, expect } from "../fixtures";
34 
35interface BlockRow {
36  id: string;
37  type: string;
38  content: unknown;
39  properties: Record<string, unknown>;
40}
41 
42interface BlocksResponse {
43  data: BlockRow[];
44}
45 
46async function createPage(api: import("@playwright/test").APIRequestContext, wsId: string, title: string): Promise<string> {
47  const res = await api.post(`/api/v1/workspaces/${wsId}/pages`, { data: { title } });
48  expect(res.status(), await res.text()).toBe(201);
49  return ((await res.json()) as { id: string }).id;
50}
51 
52async function createBlock(
53  api: import("@playwright/test").APIRequestContext,
54  pageId: string,
55  type: string,
56  text: string,
57): Promise<string> {
58  const res = await api.post(`/api/v1/pages/${pageId}/blocks`, {
59    data: { type, content: { text }, parentId: null },
60  });
61  expect(res.status(), await res.text()).toBe(201);
62  return ((await res.json()) as { id: string }).id;
63}
64 
65/**
66 * Focus a fresh EMPTY block in the main content column so the next "/" opens
67 * the slash menu (the trigger only fires in a block whose text STARTS with
68 * "/", so the caret must be in an empty block — never at the end of a
69 * heading/paragraph).
70 *
71 * Clicking the trailing `new-block` area creates (or reuses) the empty
72 * paragraph and focuses it — but that is an async client-side round-trip
73 * (create → re-render → focus), so focus is NOT set when `click()` resolves.
74 * Poll with waitForFunction for it to settle. Only click ONCE: once a block
75 * exists, re-clicking the trailing area moves focus onto an internal button
76 * (verified by probe), so a click-retry loop is harmful, not helpful. The
77 * fallback nudges the empty contenteditable directly via the DOM.
78 */
79async function focusFreshBlock(page: import("@playwright/test").Page) {
80  const area = page.locator("#workspace-main").getByTestId("new-block");
81  await area.click();
82  const settled = () =>
83    page.waitForFunction(
84      () => {
85        const ae = document.activeElement;
86        return (
87          ae instanceof HTMLElement &&
88          ae.isContentEditable &&
89          (ae.textContent ?? "").trim() === ""
90        );
91      },
92      undefined,
93      { timeout: 3000 },
94    );
95  try {
96    await settled();
97  } catch {
98    // Focus race lost on the first pass — click the empty contenteditable
99    // directly (native focus, no React handler involved) and re-poll.
100    await page.evaluate(() => {
101      const eds = Array.from(
102        document.querySelectorAll<HTMLElement>("#workspace-main [contenteditable='true']"),
103      );
104      const empty = [...eds].reverse().find((el) => (el.textContent ?? "").trim() === "");
105      empty?.click();
106    });
107    await settled();
108  }
109}
110 
111test.describe("Editor table + TOC — T-146/T-147", () => {
112  test("/table → insert dialog → pre-created grid; add row + edit cell persist to the API", async ({
113    authPage,
114    api,
115    freshWorkspace,
116  }) => {
117    const ws = await freshWorkspace("Table Space");
118    const pageId = await createPage(api, ws.id, "Table page");
119    await authPage.goto(`/w/${ws.slug}/page/${pageId}`);
120    await expect(authPage.getByTestId("editor-root")).toBeVisible({ timeout: 20_000 });
121 
122    // Focus a fresh block in the main content column, then open the slash
123    // menu with "/".
124    await focusFreshBlock(authPage);
125    await authPage.keyboard.type("/", { delay: 30 });
126    const menu = authPage.getByTestId("slash-menu");
127    await expect(menu).toBeVisible({ timeout: 10_000 });
128 
129    // Filter to the table command and pick it — this must OPEN THE INSERT
130    // DIALOG'S TABLE TAB (a bare table block renders nothing; the grid has
131    // to be pre-created).
132    await authPage.keyboard.type("table", { delay: 30 });
133    await menu.getByTestId("slash-menu-item-table").click();
134    const dialog = authPage.getByTestId("insert-dialog");
135    await expect(dialog).toBeVisible({ timeout: 10_000 });
136    await expect(dialog.getByRole("tab", { name: "Table" })).toHaveAttribute("aria-selected", "true");
137 
138    // A 2×2 grid.
139    await dialog.locator("#tbl-rows").fill("2");
140    await dialog.locator("#tbl-cols").fill("2");
141    await dialog.getByRole("button", { name: "Insert table" }).click();
142    await expect(dialog).toHaveCount(0);
143 
144    // The grid renders: two labeled columns + the add-column action, and
145    // 2×2 editable cells.
146    const table = authPage.locator("table").first();
147    await expect(table).toBeVisible({ timeout: 10_000 });
148    await expect(table.locator("thead th").filter({ hasText: "Column 1" })).toBeVisible();
149    await expect(table.locator("thead th").filter({ hasText: "Column 2" })).toBeVisible();
150    await expect(table.locator("tbody input")).toHaveCount(4);
151 
152    // "+ Add row" appends a third row (2×2 → 3×2). NOTE: the button is a
153    // SIBLING of the <table> element (in the outer .group/table wrapper), not
154    // a descendant — so it is addressed page-level, not via `table`.
155    await authPage.getByRole("button", { name: "+ Add row" }).click();
156    await expect(table.locator("tbody tr")).toHaveCount(3, { timeout: 10_000 });
157 
158    // Edit the first cell and blur (the blur save is the final persistence).
159    const firstCell = table.locator("tbody input").first();
160    await firstCell.fill("HELLO");
161    await firstCell.blur();
162 
163    // Round-trip: the server must carry columns (2) + rows (3) with the
164    // edited cell. The web stores the grid in `properties` (columns/rows),
165    // NOT content — see the rule-29 storage-shape note for T-146.
166    await expect
167      .poll(
168        async () => {
169          const res = await api.get(`/api/v1/pages/${pageId}/blocks`);
170          const body = (await res.json()) as BlocksResponse;
171          const t = body.data.find((b) => b.type === "TABLE");
172          if (!t) return false;
173          const rows = t.properties.rows as string[][];
174          const cols = t.properties.columns as unknown[];
175          return (
176            Array.isArray(rows) &&
177            rows.length === 3 &&
178            Array.isArray(cols) &&
179            cols.length === 2 &&
180            rows[0][0] === "HELLO"
181          );
182        },
183        { timeout: 15_000 },
184      )
185      .toBe(true);
186  });
187 
188  test("/toc → table of contents lists the headings and deep-links to them", async ({
189    authPage,
190    api,
191    freshWorkspace,
192  }) => {
193    const ws = await freshWorkspace("TOC Space");
194    const pageId = await createPage(api, ws.id, "TOC page");
195    // Seed two headings through the API with the CANONICAL content shape
196    // ({ text }) — the shape the old extractTitle mishandled as "Untitled".
197    const h1Id = await createBlock(api, pageId, "heading_1", "Alpha");
198    const h2Id = await createBlock(api, pageId, "heading_2", "Beta");
199 
200    await authPage.goto(`/w/${ws.slug}/page/${pageId}`);
201    await expect(authPage.getByTestId("editor-root")).toBeVisible({ timeout: 20_000 });
202 
203    await focusFreshBlock(authPage);
204    await authPage.keyboard.type("/", { delay: 30 });
205    const menu = authPage.getByTestId("slash-menu");
206    await expect(menu).toBeVisible({ timeout: 10_000 });
207    await authPage.keyboard.type("toc", { delay: 30 });
208    await menu.getByTestId("slash-menu-item-toc").click();
209 
210    // The TOC block renders its entries from the page's headings.
211    const toc = authPage.getByRole("navigation", { name: "Table of contents" });
212    await expect(toc).toBeVisible({ timeout: 10_000 });
213    const entries = toc.locator("a");
214    await expect(entries.first()).toHaveText("Alpha");
215    await expect(entries.nth(1)).toHaveText("Beta");
216    // Regression guard: no "Untitled" fallback entries (the { text } shape
217    // must resolve to the heading title).
218    await expect(toc.getByText("Untitled")).toHaveCount(0);
219 
220    // Deep-link: clicking "Alpha" pushes the heading block's anchor into the
221    // URL and the heading block is on screen. (Assert on the path suffix so
222    // the spec is origin-agnostic — the canonical run pins the domain.)
223    await toc.getByRole("link", { name: "Alpha" }).click();
224    await expect
225      .poll(() => authPage.url(), { timeout: 10_000 })
226      .toBe(new URL(`/w/${ws.slug}/page/${pageId}/${h1Id}`, authPage.url()).toString());
227    await expect(authPage.getByTestId(`block-${h1Id}`)).toContainText("Alpha");
228    // The H2 anchor is also reachable.
229    await toc.getByRole("link", { name: "Beta" }).click();
230    await expect
231      .poll(() => authPage.url(), { timeout: 10_000 })
232      .toBe(new URL(`/w/${ws.slug}/page/${pageId}/${h2Id}`, authPage.url()).toString());
233  });
234});
235