collab-two-tab.spec.ts

collab-two-tab.spec.tstests/e2e/specs/collab-two-tab.spec.tsraw ← specs8,968 B← Back to the app
1/**
2 * TASK-0092 (b) — 2-tab concurrent-edit + offline-converge E2E (slice 6c).
3 *
4 * The (b) decision (R6 conflict, phase-07-collaboration.md): the web keeps
5 * the Phase-4 per-block editor + the remote event overlay; a remote tab's
6 * flush publishes `page.updated` → the realtime server fans a `block:changed`
7 * REFETCH hint over the control socket → each tab's overlay re-reads the
8 * source of truth at rest. Convergence is EVENTUALLY CONSISTENT via the
9 * refetch hint (not per-keystroke CRDT merge — that is the un-migrated R6
10 * provider path, a follow-up task). This spec proves the (b) mechanic in
11 * TWO BROWSER TABS (the acceptance criterion, re-scoped to (b)): two tabs
12 * editing the same page converge to the union of both tabs' edits.
13 *
14 * ── RUNNER GATE (Docker) — NOT RUNNABLE LOCALLY ────────────────────────
15 * This spec requires the full stack (Postgres + Redis + API :4000 +
16 * realtime :4001 + web :3000, the seeded demo user) — a Docker daemon,
17 * which is unavailable in this environment (permission denied; recorded,
18 * never faked). It is CI-ready under the same contract as every other spec
19 * in this package (`pnpm docker:up && pnpm dev`, then the suite). It is
20 * committed so the (b) acceptance mechanic is pinned for CI; it is not a
21 * local-green test here.
22 *
23 * Two tabs = two browser contexts, each with its OWN demo-user session
24 * (S10: fresh login per tab — the refresh cookie ROTATES on every
25 * /auth/refresh, so two tabs sharing one cookie would trip reuse-detection
26 * and revoke the session family mid-test). Both tabs belong to the demo
27 * user; the control fan-out is per-page, so one user's two tabs is the
28 * exact production scenario the overlay is built for.
29 *
30 * (b) offline mechanic (the honest one, verified against the code): the
31 * offline tab's edits land in the LOCAL save queue (never blocked —
32 * the local-first invariant). The queue retries a failed flush on the NEXT
33 * change or on unmount (batch-queue.ts) — NOT automatically on reconnect —
34 * so the test recovers the network and then makes one more change to
35 * trigger the flush that carries the offline edits. Convergence is
36 * asserted within the acceptance window.
37 */
38import { test, expect, DEMO_EMAIL, DEMO_PASSWORD } from "../fixtures";
39import type { APIRequestContext, Browser, Page } from "@playwright/test";
40 
41const CONVERGE_MS = 3_000; // the acceptance window ("within 3 s")
42 
43// --- fixtures the spec needs (a second authed tab, page + blocks) ----------
44 
45/** A demo-user tab with its OWN session (fresh login — see the S10 note in
46 *  the header; a shared refresh cookie would rotate + trip reuse-detection).
47 *  The cookie jar authenticates the web client, which silent-refreshes into
48 *  a memory access token on load. */
49async function authedTab(browser: Browser): Promise<{ page: Page; close: () => Promise<void> }> {
50  const plain = await browser.newContext();
51  const res = await plain.request.post("/api/v1/auth/login", {
52    data: { email: DEMO_EMAIL, password: DEMO_PASSWORD },
53  });
54  if (res.status() !== 200) {
55    throw new Error(`authedTab: login failed (${res.status()}): ${await res.text()}`);
56  }
57  const jar = await plain.cookies();
58  await plain.close();
59  const context = await browser.newContext({
60    storageState: {
61      cookies: jar.map((c) => ({
62        name: c.name,
63        value: c.value,
64        domain: c.domain,
65        path: c.path,
66        expires: c.expires,
67        httpOnly: c.httpOnly,
68        secure: c.secure,
69        sameSite: c.sameSite,
70      })),
71      origins: [],
72    },
73  });
74  const page = await context.newPage();
75  return { page, close: () => context.close() };
76}
77 
78/** Create a workspace + page with 3 seeded paragraph blocks (positions 1/2/3). */
79async function seedPage(api: APIRequestContext) {
80  const wsRes = await api.post("/api/v1/workspaces", { data: { name: `Collab 2tab ${Date.now()}` } });
81  expect(wsRes.status()).toBe(201);
82  const { workspace } = (await wsRes.json()) as { workspace: { id: string } };
83  const pgRes = await api.post(`/api/v1/workspaces/${workspace.id}/pages`, {
84    data: { title: "Two-tab convergence" },
85  });
86  expect(pgRes.status()).toBe(201);
87  const { page: pg } = (await pgRes.json()) as { page: { id: string } };
88  for (const [i, text] of ["alpha", "beta", "gamma"].entries()) {
89    const r = await api.post("/api/v1/blocks", {
90      data: { pageId: pg.id, type: "paragraph", content: { text }, position: `${i + 1}.0` },
91    });
92    expect([201, 202]).toContain(r.status());
93  }
94  return { wsId: workspace.id, pageId: pg.id };
95}
96 
97// --- helpers ------------------------------------------------------------------
98 
99/** The rendered text of the `nth` block (0-based, position-ordered). */
100async function blockText(page: Page, nth: number): Promise<string> {
101  return (await page.locator('[data-testid^="block-"]').nth(nth).innerText()).trim();
102}
103 
104/** Click into the `nth` block, move to the end, and type. */
105async function typeInto(page: Page, nth: number, text: string): Promise<void> {
106  const block = page.locator('[data-testid^="block-"]').nth(nth);
107  await block.click();
108  await page.keyboard.press("End");
109  await page.keyboard.type(text);
110}
111 
112/** Deterministic "network off": abort the realtime socket + block writes +
113 *  block reads. `restore()` returns network. (Route-level — precise, unlike
114 *  the flaky `setOffline`.) */
115async function cutNetwork(page: Page) {
116  await page.context().route(/\/realtime|\/api\/v1\/blocks/, (route) => route.abort());
117  return () => page.context().unroute(/\/realtime|\/api\/v1\/blocks/);
118}
119 
120// --- the mechanic -------------------------------------------------------------
121 
122test.describe("TASK-0092 (b) — two-tab convergence (the refetch-hint overlay)", () => {
123  test("edits in BOTH tabs converge to the union", async ({ browser, api }) => {
124    const { wsId, pageId } = await seedPage(api);
125    const url = `/w/${wsId}/page/${pageId}`;
126    const A = await authedTab(browser);
127    const B = await authedTab(browser);
128    try {
129      await A.page.goto(url);
130      await B.page.goto(url);
131      await expect(A.page.locator('[data-testid^="block-"]').first()).toContainText("alpha");
132      await expect(B.page.locator('[data-testid^="block-"]').first()).toContainText("alpha");
133 
134      // Interleaved edits: A → block 1, B → block 2 (two tabs, same page).
135      await typeInto(A.page, 0, " AA");
136      await typeInto(B.page, 1, " BB");
137 
138      // (b) convergence: each tab's overlay receives the other tab's flush's
139      // block:changed hint and refetches — both tabs end up showing BOTH
140      // edits (the union, eventually consistent).
141      await expect.poll(() => blockText(A.page, 0), { timeout: CONVERGE_MS * 4 }).toContain("AA");
142      await expect.poll(() => blockText(A.page, 1), { timeout: CONVERGE_MS * 4 }).toContain("BB");
143      await expect.poll(() => blockText(B.page, 0), { timeout: CONVERGE_MS * 4 }).toContain("AA");
144      await expect.poll(() => blockText(B.page, 1), { timeout: CONVERGE_MS * 4 }).toContain("BB");
145    } finally {
146      await A.close();
147      await B.close();
148    }
149  });
150 
151  test("offline tab: the local edit survives the outage + converges after the network returns", async ({ browser, api }) => {
152    const { wsId, pageId } = await seedPage(api);
153    const url = `/w/${wsId}/page/${pageId}`;
154    const A = await authedTab(browser);
155    const B = await authedTab(browser);
156    try {
157      await A.page.goto(url);
158      await B.page.goto(url);
159      await expect(B.page.locator('[data-testid^="block-"]').first()).toContainText("alpha");
160 
161      const restore = await cutNetwork(B.page);
162 
163      // B types while OFFLINE: the edit lands in the LOCAL editor + save
164      // queue (never blocked — local-first). A types ONLINE (persists).
165      await typeInto(B.page, 0, " OFF");
166      await typeInto(A.page, 0, " ON");
167      // A's online edit is visible to A immediately (local editor + save).
168      await expect.poll(() => blockText(A.page, 0), { timeout: CONVERGE_MS }).toContain("ON");
169 
170      // Network returns. The queue does NOT auto-flush on reconnect
171      // (batch-queue.ts: a failed flush retries on the next change / unmount)
172      // — so one more change triggers the flush that carries the offline
173      // " OFF" edit to the API.
174      await restore();
175      await typeInto(B.page, 0, "X"); // the flush trigger (carries " OFF" + "X")
176 
177      // Both tabs converge to the union of block 1 within the window.
178      await expect.poll(() => blockText(A.page, 0), { timeout: CONVERGE_MS }).toContain("OFF");
179      await expect.poll(() => blockText(A.page, 0), { timeout: CONVERGE_MS }).toContain("ON");
180      await expect.poll(() => blockText(B.page, 0), { timeout: CONVERGE_MS }).toContain("OFF");
181      await expect.poll(() => blockText(B.page, 0), { timeout: CONVERGE_MS }).toContain("ON");
182    } finally {
183      await A.close();
184      await B.close();
185    }
186  });
187});
188