EventSnap/e2e/specs/08-browser-chaos/multi-tab.spec.ts

/**
 * Phase 2 browser chaos — multi-tab and cross-user isolation in the same
 * browser process.
 */
import { test, expect } from '../../fixtures/test';
import { trackStreamOpens } from '../../helpers/sse';

test.describe('Browser chaos — multi-tab', () => {
  test('same user in two tabs — each tab establishes its own SSE stream', async ({
    page,
    context,
    guest,
    signIn,
  }) => {
    const g = await guest('Twin');

    // Count each tab's own EventSource open. Asserting *connection establishment* is
    // fast and reliable; asserting event *delivery* would depend on the reverse proxy's
    // ~30s SSE buffering and isn't worth the flake here.
    const opens1 = trackStreamOpens(page);
    await signIn(page, g); // → /feed, connectSse() on mount
    await expect.poll(opens1, { timeout: 10_000 }).toBeGreaterThanOrEqual(1);

    const tab2 = await context.newPage();
    const opens2 = trackStreamOpens(tab2);
    await signIn(tab2, g);
    await expect.poll(opens2, { timeout: 10_000 }).toBeGreaterThanOrEqual(1);

    // Both tabs mounted and each opened its own independent stream.
    await expect(page.getByRole('link', { name: 'Galerie' })).toBeVisible();
    await expect(tab2.getByRole('link', { name: 'Galerie' })).toBeVisible();
    await tab2.close();
  });

  test('two different users in separate browser contexts have isolated localStorage', async ({
    browser,
    guest,
  }) => {
    const a = await guest('IsoA');
    const b = await guest('IsoB');

    const ctxA = await browser.newContext();
    const ctxB = await browser.newContext();
    const pageA = await ctxA.newPage();
    const pageB = await ctxB.newPage();

    await pageA.goto('http://localhost:3101/');
    await pageA.evaluate(
      ({ jwt, pin, userId, name }) => {
        localStorage.setItem('eventsnap_jwt', jwt);
        localStorage.setItem('eventsnap_pin', pin);
        localStorage.setItem('eventsnap_user_id', userId);
        localStorage.setItem('eventsnap_display_name', name);
      },
      { jwt: a.jwt, pin: a.pin, userId: a.userId, name: a.displayName }
    );

    await pageB.goto('http://localhost:3101/');
    await pageB.evaluate(
      ({ jwt, pin, userId, name }) => {
        localStorage.setItem('eventsnap_jwt', jwt);
        localStorage.setItem('eventsnap_pin', pin);
        localStorage.setItem('eventsnap_user_id', userId);
        localStorage.setItem('eventsnap_display_name', name);
      },
      { jwt: b.jwt, pin: b.pin, userId: b.userId, name: b.displayName }
    );

    // Each context sees only its own user.
    const aUid = await pageA.evaluate(() => localStorage.getItem('eventsnap_user_id'));
    const bUid = await pageB.evaluate(() => localStorage.getItem('eventsnap_user_id'));
    expect(aUid).toBe(a.userId);
    expect(bUid).toBe(b.userId);
    expect(aUid).not.toBe(bUid);

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

  test('localStorage is shared across tabs of the same context (real browser behavior)', async ({
    context,
    guest,
    signIn,
  }) => {
    // Real browsers share localStorage across tabs of the same origin. Tab A's
    // removeItem is instantly visible in tab B's localStorage. The UX gap to
    // document is that tab B's React/Svelte state isn't *re-rendered* until the
    // next API call or storage-event subscription — which the app doesn't
    // currently listen for.
    const g = await guest('LogoutSync');
    const pageA = await context.newPage();
    const pageB = await context.newPage();

    await signIn(pageA, g);
    await signIn(pageB, g);

    await pageA.evaluate(() => {
      localStorage.removeItem('eventsnap_jwt');
      localStorage.removeItem('eventsnap_user_id');
    });

    // Both tabs' localStorage should now show the JWT removed (shared origin).
    const aGone = await pageA.evaluate(() => !localStorage.getItem('eventsnap_jwt'));
    const bGone = await pageB.evaluate(() => !localStorage.getItem('eventsnap_jwt'));
    expect(aGone).toBe(true);
    expect(bGone).toBe(true);

    // Tab B's URL: either stayed on /feed (no storage event listener) or has
    // already routed to /join (a route-guard reactive subscription noticed).
    // Both are valid; assert it's one or the other rather than coupling to
    // either specific behavior.
    expect(['/feed', '/join'].some((p) => pageB.url().includes(p))).toBe(true);
  });
});