Add automatic responses or mocked sync service.

stevensJourney · stevensJourney · commit 28472e3d6ad9 · 2025-12-01T09:22:47.000+02:00
diff --git a/packages/web/src/worker/sync/MockSyncServiceTypes.ts b/packages/web/src/worker/sync/MockSyncServiceTypes.ts
@@ -9,6 +9,15 @@ export interface PendingRequest {
   body: any;
 }
 
+/**
+ * Automatic response configuration
+ */
+export interface AutomaticResponseConfig {
+  status: number;
+  headers: Record<string, string>;
+  bodyLines?: any[];
+}
+
 /**
  * Message types for communication via MessagePort
  */
@@ -22,13 +31,17 @@ export type MockSyncServiceMessage =
       headers: Record<string, string>;
     }
   | { type: 'pushBodyData'; requestId: string; pendingRequestId: string; data: string | ArrayBuffer | Uint8Array }
-  | { type: 'completeResponse'; requestId: string; pendingRequestId: string };
+  | { type: 'completeResponse'; requestId: string; pendingRequestId: string }
+  | { type: 'setAutomaticResponse'; requestId: string; config: AutomaticResponseConfig | null }
+  | { type: 'replyToAllPendingRequests'; requestId: string };
 
 export type MockSyncServiceResponse =
   | { type: 'getPendingRequests'; requestId: string; requests: PendingRequest[] }
   | { type: 'createResponse'; requestId: string; success: boolean }
   | { type: 'pushBodyData'; requestId: string; success: boolean }
   | { type: 'completeResponse'; requestId: string; success: boolean }
+  | { type: 'setAutomaticResponse'; requestId: string; success: boolean }
+  | { type: 'replyToAllPendingRequests'; requestId: string; success: boolean; count: number }
   | { type: 'error'; requestId?: string; error: string };
 
 /**
diff --git a/packages/web/src/worker/sync/MockSyncServiceWorker.ts b/packages/web/src/worker/sync/MockSyncServiceWorker.ts
@@ -1,5 +1,10 @@
 import type { MockSyncServiceMessage, MockSyncServiceResponse } from './MockSyncServiceTypes';
-import { ActiveResponse, PendingRequest, PendingRequestInternal } from './MockSyncServiceTypes';
+import {
+  ActiveResponse,
+  AutomaticResponseConfig,
+  PendingRequest,
+  PendingRequestInternal
+} from './MockSyncServiceTypes';
 
 /**
  * Mock sync service implementation for shared worker environments.
@@ -10,6 +15,7 @@ export class MockSyncService {
   private pendingRequests: Map<string, PendingRequestInternal> = new Map();
   private activeResponses: Map<string, ActiveResponse> = new Map();
   private nextId = 0;
+  private automaticResponse: AutomaticResponseConfig | null = null;
 
   /**
    * Register a new pending request (called by WebRemote when a sync stream is requested).
@@ -60,7 +66,34 @@ export class MockSyncService {
       }
     });
 
-    // Return the promise - it will resolve when createResponse is called
+    // If automatic response is configured, apply it immediately
+    if (this.automaticResponse) {
+      // Use setTimeout to ensure the response is created asynchronously
+      // This prevents issues if the response creation happens synchronously
+      setTimeout(() => {
+        try {
+          // Create response with automatic config
+          this.createResponse(id, this.automaticResponse!.status, this.automaticResponse!.headers);
+
+          // Push body lines if provided
+          if (this.automaticResponse!.bodyLines) {
+            for (const line of this.automaticResponse!.bodyLines) {
+              const lineStr = `${JSON.stringify(line)}\n`;
+              const encoder = new TextEncoder();
+              this.pushBodyData(id, encoder.encode(lineStr));
+            }
+          }
+
+          // Complete the response
+          this.completeResponse(id);
+        } catch (e) {
+          // If automatic response fails, reject the promise
+          rejectResponse!(e instanceof Error ? e : new Error(String(e)));
+        }
+      }, 0);
+    }
+
+    // Return the promise - it will resolve when createResponse is called (or immediately if auto-response is set)
     return responsePromise;
   }
 
@@ -172,6 +205,52 @@ export class MockSyncService {
       this.activeResponses.delete(pendingRequestId);
     }
   }
+
+  /**
+   * Set the automatic response configuration.
+   * When set, this will be used to automatically reply to all pending requests.
+   */
+  setAutomaticResponse(config: AutomaticResponseConfig | null): void {
+    this.automaticResponse = config;
+  }
+
+  /**
+   * Automatically reply to all pending requests using the automatic response configuration.
+   * Returns the number of requests that were replied to.
+   */
+  replyToAllPendingRequests(): number {
+    if (!this.automaticResponse) {
+      throw new Error('Automatic response not set. Call setAutomaticResponse first.');
+    }
+
+    const pendingRequestIds = Array.from(this.pendingRequests.keys());
+    let count = 0;
+
+    for (const requestId of pendingRequestIds) {
+      try {
+        // Create response with automatic config
+        this.createResponse(requestId, this.automaticResponse.status, this.automaticResponse.headers);
+
+        // Push body lines if provided
+        if (this.automaticResponse.bodyLines) {
+          for (const line of this.automaticResponse.bodyLines) {
+            const lineStr = `${JSON.stringify(line)}\n`;
+            const encoder = new TextEncoder();
+            this.pushBodyData(requestId, encoder.encode(lineStr));
+          }
+        }
+
+        // Complete the response
+        this.completeResponse(requestId);
+        count++;
+      } catch (e) {
+        // Skip requests that fail (might already be handled)
+        continue;
+      }
+    }
+
+    return count;
+  }
 }
 
 /**
@@ -281,6 +360,41 @@ export function setupMockServiceMessageHandler(port: MessagePort) {
           }
           break;
         }
+        case 'setAutomaticResponse': {
+          try {
+            service.setAutomaticResponse(message.config);
+            port.postMessage({
+              type: 'setAutomaticResponse',
+              requestId: message.requestId,
+              success: true
+            } satisfies MockSyncServiceResponse);
+          } catch (error) {
+            port.postMessage({
+              type: 'error',
+              requestId: message.requestId,
+              error: error instanceof Error ? error.message : String(error)
+            } satisfies MockSyncServiceResponse);
+          }
+          break;
+        }
+        case 'replyToAllPendingRequests': {
+          try {
+            const count = service.replyToAllPendingRequests();
+            port.postMessage({
+              type: 'replyToAllPendingRequests',
+              requestId: message.requestId,
+              success: true,
+              count
+            } satisfies MockSyncServiceResponse);
+          } catch (error) {
+            port.postMessage({
+              type: 'error',
+              requestId: message.requestId,
+              error: error instanceof Error ? error.message : String(error)
+            } satisfies MockSyncServiceResponse);
+          }
+          break;
+        }
         default: {
           const requestId =
             'requestId' in message && typeof message === 'object' && message !== null
diff --git a/packages/web/tests/multiple_tabs_iframe.test.ts b/packages/web/tests/multiple_tabs_iframe.test.ts
@@ -30,7 +30,8 @@ function createIframeWithPowerSyncClient(
   dbFilename: string,
   identifier: string,
   vfs?: WASQLiteVFS,
-  waitForConnection?: boolean
+  waitForConnection?: boolean,
+  configureMockResponses?: boolean
 ): IframeClientResult {
   const iframe = document.createElement('iframe');
   // Make iframe visible for debugging
@@ -88,7 +89,7 @@ function createIframeWithPowerSyncClient(
   </div>
   <script type="module">
     import { setupPowerSyncInIframe } from '${modulePath}';
-    setupPowerSyncInIframe('${dbFilename}', '${identifier}', ${vfs ? `'${vfs}'` : 'undefined'}, ${waitForConnection ? 'true' : 'false'});
+    setupPowerSyncInIframe('${dbFilename}', '${identifier}', ${vfs ? `'${vfs}'` : 'undefined'}, ${waitForConnection ? 'true' : 'false'}, ${configureMockResponses ? 'true' : 'false'});
   </script>
 </body>
 </html>`;
@@ -296,7 +297,7 @@ function createIframeWithPowerSyncClient(
  */
 function createMultipleTabsTest(vfs?: WASQLiteVFS) {
   const vfsName = vfs || 'IndexedDB';
-  describe(`Multiple Tabs with Iframes (${vfsName})`, { sequential: true, timeout: 60_000 }, () => {
+  describe(`Multiple Tabs with Iframes (${vfsName})`, { sequential: true, timeout: 30_000 }, () => {
     const dbFilename = `test-multi-tab-${uuid()}.db`;
 
     // Number of tabs to create
@@ -305,8 +306,20 @@ function createMultipleTabsTest(vfs?: WASQLiteVFS) {
     const MIDDLE_TAB_INDEX = 49;
 
     it('should handle opening and closing many tabs quickly', async () => {
+      // Step 0: Create an iframe to set up PowerSync and configure mock responses (401)
+      const setupIdentifier = `setup-${uuid()}`;
+      const setupIframe = createIframeWithPowerSyncClient(dbFilename, setupIdentifier, vfs, false, true);
+      onTestFinished(async () => {
+        try {
+          await setupIframe.cleanup();
+        } catch (e) {
+          // Ignore cleanup errors
+        }
+      });
+      // Wait for the setup iframe to be ready (this ensures PowerSync is initialized and mock responses are configured)
+      await setupIframe.ready;
       // Step 1: Open 100 tabs (don't wait for them to be ready)
-      const tabResults: IframeClientResult[] = [];
+      const tabResults: IframeClientResult[] = [setupIframe];
 
       for (let i = 0; i < NUM_TABS; i++) {
         const identifier = `tab-${i}`;
@@ -323,7 +336,8 @@ function createMultipleTabsTest(vfs?: WASQLiteVFS) {
         });
       }
 
-      expect(tabResults.length).toBe(NUM_TABS);
+      // Total iframes: 1 setup + NUM_TABS tabs
+      expect(tabResults.length).toBe(NUM_TABS + 1);
 
       // Verify all iframes are created (they're created immediately)
       for (const result of tabResults) {
@@ -333,32 +347,37 @@ function createMultipleTabsTest(vfs?: WASQLiteVFS) {
       // Step 2: Wait 1 second
       await new Promise((resolve) => setTimeout(resolve, 1000));
 
-      // Step 3: Close all tabs except the middle (50th) tab
+      // Step 3: Close all tabs except the setup iframe (index 0) and the middle (50th) tab
+      // The middle tab is at index 1 + MIDDLE_TAB_INDEX (since index 0 is the setup iframe)
+      const middleTabArrayIndex = 1 + MIDDLE_TAB_INDEX;
       const tabsToClose: IframeClientResult[] = [];
-      for (let i = 0; i < NUM_TABS; i++) {
-        if (i !== MIDDLE_TAB_INDEX) {
+      for (let i = 0; i < tabResults.length; i++) {
+        // Skip the setup iframe (index 0) and the middle tab
+        if (i !== 0 && i !== middleTabArrayIndex) {
           tabsToClose.push(tabResults[i]);
         }
       }
 
-      // Close all tabs except the middle one simultaneously (without waiting for ready)
+      // Close all tabs except the setup iframe and middle one simultaneously (without waiting for ready)
       const closePromises = tabsToClose.map((result) => result.cleanup());
       await Promise.all(closePromises);
 
       // Verify closed tabs are removed
-      for (let i = 0; i < NUM_TABS; i++) {
-        if (i !== MIDDLE_TAB_INDEX) {
+      for (let i = 0; i < tabResults.length; i++) {
+        if (i !== 0 && i !== middleTabArrayIndex) {
           expect(tabResults[i].iframe.isConnected).toBe(false);
           expect(document.body.contains(tabResults[i].iframe)).toBe(false);
         }
       }
 
-      // Verify the middle tab is still present
-      expect(tabResults[MIDDLE_TAB_INDEX].iframe.isConnected).toBe(true);
-      expect(document.body.contains(tabResults[MIDDLE_TAB_INDEX].iframe)).toBe(true);
+      // Verify the setup iframe and middle tab are still present
+      expect(tabResults[0].iframe.isConnected).toBe(true);
+      expect(document.body.contains(tabResults[0].iframe)).toBe(true);
+      expect(tabResults[middleTabArrayIndex].iframe.isConnected).toBe(true);
+      expect(document.body.contains(tabResults[middleTabArrayIndex].iframe)).toBe(true);
 
       // Step 4: Wait for the middle tab to be ready, then execute a test query to verify its DB is still functional
-      const middleTabClient = await tabResults[MIDDLE_TAB_INDEX].ready;
+      const middleTabClient = await tabResults[middleTabArrayIndex].ready;
       const queryResult = await middleTabClient.executeQuery('SELECT 1 as value');
 
       // Verify the query result
diff --git a/packages/web/tests/utils/MockSyncServiceClient.ts b/packages/web/tests/utils/MockSyncServiceClient.ts
@@ -1,5 +1,6 @@
 import { StreamingSyncLine } from '@powersync/common';
 import type {
+  AutomaticResponseConfig,
   MockSyncServiceMessage,
   MockSyncServiceResponse,
   PendingRequest
@@ -41,6 +42,18 @@ export interface MockSyncService {
    * The response must have been created first using createResponse.
    */
   completeResponse(pendingRequestId: string): Promise<void>;
+
+  /**
+   * Set the automatic response configuration.
+   * When set, this will be used to automatically reply to all pending requests.
+   */
+  setAutomaticResponse(config: AutomaticResponseConfig | null): Promise<void>;
+
+  /**
+   * Automatically reply to all pending requests using the automatic response configuration.
+   * Returns the number of requests that were replied to.
+   */
+  replyToAllPendingRequests(): Promise<number>;
 }
 
 /**
@@ -181,6 +194,35 @@ export async function getMockSyncServiceFromWorker(
         } satisfies MockSyncServiceMessage,
         'completeResponse'
       );
+    },
+
+    async setAutomaticResponse(config: AutomaticResponseConfig | null): Promise<void> {
+      const requestId = crypto.randomUUID();
+      await sendMessage(
+        {
+          type: 'setAutomaticResponse',
+          requestId,
+          config
+        } satisfies MockSyncServiceMessage,
+        'setAutomaticResponse'
+      );
+    },
+
+    async replyToAllPendingRequests(): Promise<number> {
+      const requestId = crypto.randomUUID();
+      const response = await sendMessage<{
+        type: 'replyToAllPendingRequests';
+        requestId: string;
+        success: boolean;
+        count: number;
+      }>(
+        {
+          type: 'replyToAllPendingRequests',
+          requestId
+        } satisfies MockSyncServiceMessage,
+        'replyToAllPendingRequests'
+      );
+      return response.count;
     }
   };
 }
diff --git a/packages/web/tests/utils/iframeInitializer.ts b/packages/web/tests/utils/iframeInitializer.ts
