test(mosaic): give each feature test its own fake FAPI host

.changeset/isolate-mosaic-fake-fapi.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/docs/testing.md

@@ -165,9 +165,11 @@ in [Test placement](#test-placement).
   `navigate` is the router Clerk was loaded with, called with the path.
 
 The setup file (`vitest.setup.browser.mts`) starts the worker and focuses the
-window. After each test it cleans up, resets the handlers and the shared query
-cache, and **fails the test on any FAPI request without a handler**, or on a
-`holdRequests` hold never released or failed. When a
+window. Before each test it moves FAPI to a new host, so a request a previous
+test's Clerk sends late fails with a network error instead of reaching this
+test's handlers. After each test it cleans up, resets the handlers and the
+shared query cache, and **fails the test on any FAPI request without a
+handler**, or on a `holdRequests` hold never released or failed. When a
 feature needs a new endpoint, add a handler to `serveFapi` that mirrors what
 FAPI returns.
 

packages/mosaic/src/__tests__/feature/fake-fapi-isolation.feature.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+
+import { holdRequests, serveFapi } from './fake-fapi';
+import { fapiClient, fapiSession, fapiUser } from './fapi';
+import { renderWithClerk } from './render';
+
+describe('fake FAPI isolation between tests', () => {
+  it('leaves a request in flight when the test ends', async () => {
+    const user = fapiUser({ id: 'user_1' });
+    serveFapi({ client: fapiClient([fapiSession({ id: 'sess_1', user })]) });
+    const { clerk } = await renderWithClerk(<div />);
+    void clerk.user?.getOrganizationMemberships().catch(() => undefined);
+  });
+
+  it('does not hand the previous test’s request to this test’s handlers', async () => {
+    serveFapi();
+    const memberships = holdRequests('get', '/v1/me/organization_memberships');
+    await new Promise(resolve => setTimeout(resolve, 200));
+    expect(memberships.requests).toHaveLength(0);
+    memberships.release();
+  });
+
+  it('starts a request after the test ends', async () => {
+    const user = fapiUser({ id: 'user_1' });
+    serveFapi({ client: fapiClient([fapiSession({ id: 'sess_1', user })]) });
+    const { clerk } = await renderWithClerk(<div />);
+    setTimeout(() => void clerk.user?.getOrganizationMemberships().catch(() => undefined), 50);
+  });
+
+  it('does not let the previous test’s Clerk reach this test’s handlers', async () => {
+    serveFapi();
+    const memberships = holdRequests('get', '/v1/me/organization_memberships');
+    await new Promise(resolve => setTimeout(resolve, 200));
+    expect(memberships.requests).toHaveLength(0);
+    memberships.release();
+  });
+});

packages/mosaic/src/__tests__/feature/fake-fapi.ts

@@ -48,10 +48,18 @@ import {
   fapiWeb3Wallet,
 } from './fapi';
 
-export const PUBLISHABLE_KEY = 'pk_live_Y2xlcmsuYWJjZWYuMTIzNDUucHJvZC5sY2xjbGVyay5jb20k';
-const FAPI = 'https://clerk.abcef.12345.prod.lclclerk.com';
+const FAPI_DOMAIN = '12345.prod.lclclerk.com';
+let fapiRun = 0;
+let fapiHost = `clerk.run${fapiRun}.${FAPI_DOMAIN}`;
 
-export const fapiUrl = (path: string) => `${FAPI}${path}`;
+export function switchFapiHost() {
+  fapiRun += 1;
+  fapiHost = `clerk.run${fapiRun}.${FAPI_DOMAIN}`;
+}
+
+export const publishableKey = () => `pk_live_${btoa(`${fapiHost}$`)}`;
+
+export const fapiUrl = (path: string) => `https://${fapiHost}${path}`;
 
 export interface FakeFapiState {
   environment: FapiEnvironment;
@@ -92,13 +100,17 @@ export type FakeFapiSeed = Partial<Omit<FakeFapiState, 'verification' | 'enterpr
 
 const unhandled: string[] = [];
 
-export const worker = setupWorker();
+export const worker = setupWorker(
+  http.all(`https://*.${FAPI_DOMAIN}/*`, ({ request }) =>
+    new URL(request.url).host === fapiHost ? undefined : HttpResponse.error(),
+  ),
+);
 
 export function startWorker() {
   return worker.start({
     quiet: true,
     onUnhandledRequest: request => {
-      if (new URL(request.url).origin === FAPI) {
+      if (new URL(request.url).host === fapiHost) {
         unhandled.push(`${request.method} ${request.url}`);
       }
     },

packages/mosaic/src/__tests__/feature/render.tsx

@@ -6,14 +6,14 @@ import { vi } from 'vitest';
 
 import type { MosaicLocalization } from '../../localization';
 import { MosaicProvider } from '../../mosaic-provider';
-import { PUBLISHABLE_KEY } from './fake-fapi';
+import { publishableKey } from './fake-fapi';
 
 export async function renderWithClerk(
   ui: ReactElement,
   options?: Parameters<Clerk['load']>[0],
   localization?: MosaicLocalization,
 ) {
-  const clerk = new Clerk(PUBLISHABLE_KEY);
+  const clerk = new Clerk(publishableKey());
   const navigate = vi.fn((_to: string) => Promise.resolve());
 
   const wrap = (element: ReactElement) => (

packages/mosaic/vitest.setup.browser.mts

@@ -3,7 +3,13 @@ import * as matchers from '@testing-library/jest-dom/matchers';
 import { cleanup, configure } from '@testing-library/react';
 import { afterAll, afterEach, beforeAll, beforeEach, expect } from 'vitest';
 
-import { startWorker, takeUnhandledRequests, takeUnsettledHolds, worker } from './src/__tests__/feature/fake-fapi';
+import {
+  startWorker,
+  takeUnhandledRequests,
+  takeUnsettledHolds,
+  switchFapiHost,
+  worker,
+} from './src/__tests__/feature/fake-fapi';
 
 expect.extend(matchers);
 
@@ -51,6 +57,7 @@ beforeAll(async () => {
 });
 
 beforeEach(() => {
+  switchFapiHost();
   window.focus();
 });