b1e2e66305
Follow-ups from the code review of the test-quality batches: - Consolidate duplicated helpers into e2e/helpers/: seed.ts (seedUpload, seedComment, listComments, findFeedRow) and sse.ts (mintSseTicket, openStream, trackStreamOpens). Refactor authorization-deep, xss-injection, like-comment, sse-ticket-abuse, ddos, sse-realtime, multi-tab, and SseListener to use them — the upload/comment/ticket-flow contracts now live in one place each instead of being re-inlined across 3–7 specs. - xss-injection display-name loop: it navigated to /feed (which renders uploader names, not the viewer's) so "nothing fired" passed vacuously — the payload was never rendered. Now navigate to /account (the actual sink) and add a render guard asserting the payload reached the DOM as escaped text before checking __xssFired. - sse-realtime reconnect: snapshot the stream-open count AFTER backgrounding, so the "new connection" assertion is attributable to the foreground event and can't be satisfied by a spurious native/error reconnect before the toggle. - recover-page: correct the comment (auto-submit is the onPinInput handler, not an $effect). 44 affected specs verified green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
97 lines
4.2 KiB
TypeScript
97 lines
4.2 KiB
TypeScript
/**
|
|
* 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);
|
|
});
|
|
});
|