typescript-e2e-realtime-sync-test

Answer

The core defect was test infrastructure, not app code: the realtime-sync E2E test used shared browser state and fixed sleeps, so it never proved the SSE+Yjs path. The fix is four artifacts.

1. Integration config — worker-owned stack on alternate ports + retry: 1 (playwright.integration.config.ts)

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/integration',
  timeout: 60_000,
  expect: { timeout: 10_000 },
  fullyParallel: true,
  workers: 4,
  reporter: [['list'], ['html', { open: 'never' }]],
  use: {
    baseURL: 'http://<ip-address>:5173',
    trace: 'retain-on-failure',
  },
  projects: [
    {
      name: 'realtime-sync',
      testMatch: /realtime-sync.*\.spec\.ts/,
      retries: 1, // suite contention can exceed the sync timeout on attempt #1
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  webServer: [
    {
      // (4) OWN daemon on the alternate port — never attach to a human :8091 session
      command: 'canopyd --port 8092 --host <ip-address>',
      url: 'http://<ip-address>:8092/healthz',
      reuseExistingServer: false,
      timeout: 30_000,
    },
    {
      // Vite dev server; its proxy injects the dev JWT and forwards to :8092
      command: 'npm run dev',
      url: 'http://<ip-address>:5173',
      reuseExistingServer: false,
      timeout: 60_000,
      env: { VITE_API_URL: 'http://<ip-address>:8092', ...process.env },
    },
  ],
});

2. Test — two independent contexts, unique tree, expect.poll propagation (tests/integration/realtime-sync.spec.ts)

import { expect, test } from '@playwright/test';
import { randomUUID } from 'node:crypto';
import { createUniqueTree } from './helpers/api';

test.describe('realtime sync (SSE + Yjs)', () => {
  test('node created in context A propagates to context B', async ({ browser }) => {
    // (1) ONE newContext() per client: independent storage + EventSource connections.
    //     Two pages in one context share a storage partition and connection bookkeeping
    //     => false-pass (shared in-context store) or false-fail (second page steals
    //     the first's EventSource slot).
    const ctxA = await browser.newContext();
    const ctxB = await browser.newContext();
    const pageA = await ctxA.newPage();
    const pageB = await ctxB.newPage();

    // (2) Fresh uniquely-named tree through page.request (Vite origin) so the
    //     injected dev JWT authenticates; a raw :8092 call would 401.
    const tree = await createUniqueTree(pageA);
    const nodeLabel = `sync-node-${randomUUID().slice(0, 8)}`;

    await pageA.goto(`/tree/${tree.id}`);
    await pageB.goto(`/tree/${tree.id}`);
    await expect(pageA.locator('.react-flow')).toBeVisible();
    await expect(pageB.locator('.react-flow')).toBeVisible();

    // Create a node in context A via the UI (dblclick canvas -> name -> Enter)
    await pageA.locator('.react-flow__pane').dblclick({ position: { x: 120, y: 120 } });
    await pageA.locator('.node-create-input').fill(nodeLabel);
    await pageA.keyboard.press('Enter');

    // (3) Deterministic: poll, never sleep. 20s budget covers suite contention.
    await expect
      .poll(
        async () => pageB.locator('.react-flow__node', { hasText: nodeLabel }).count(),
        { timeout: 20_000, intervals: [250, 500, 1_000, 2_000] },
      )
      .toBeGreaterThan(0);

    // Exact label, not stale/partial text
    await expect(pageB.locator('.react-flow__node', { hasText: nodeLabel })).toContainText(nodeLabel);

    await ctxB.close();
    await ctxA.close();
  });
});

3. Helper — authenticated tree creation through the Vite proxy (tests/integration/helpers/api.ts)

export async function createUniqueTree(page: Page, prefix = 'sync-e2e') {
  const name = `${prefix}-${Date.now()}-${randomUUID().slice(0, 8)}`;
  const res = await page.request.post('/api/trees', { data: { name } });
  if (!res.ok()) throw new Error(`createUniqueTree failed: ${res.status()} ${await res.text()}`);
  const { tree } = await res.json();
  if (!tree?.id) throw new Error(`no tree id: ${JSON.stringify(await res.json())}`);
  return tree;
}

Why this satisfies each lesson: