fix: await pushed frames

Author: kettanaito

src/browser/service-worker-source.ts

@@ -177,7 +177,7 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
     return registartion
   }
 
-  #onRequest(event: RequestEvent): void {
+  async #onRequest(event: RequestEvent): Promise<void> {
     // Passthrough any requests performed after the interception was stopped.
     if (this.#stoppedAt && event.data.interceptedAt > this.#stoppedAt) {
       return event.postMessage('PASSTHROUGH')
@@ -197,7 +197,7 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
     })
     this.#framesMap.set(event.data.id, frame)
 
-    this.push(frame)
+    await this.push(frame)
   }
 
   async #onResponse(event: ResponseEvent) {

src/browser/setup-worker.ts

@@ -10,7 +10,7 @@ import {
   UnhandledFrameStrategy,
 } from '~/core/new/on-unhandled-frame'
 import { UnhandledRequestCallback } from '~/core/utils/request/onUnhandledRequest'
-import { NetworkSource } from '~/core/new/sources'
+import { NetworkSource } from '~/core/new/sources/index'
 import { ServiceWorkerSource } from './service-worker-source'
 import { SetupWorkerFallbackSource } from './setup-worker-fallback-source'
 import { supportsServiceWorker } from './utils/supports'

src/core/new/resolve-network-frame.ts

@@ -47,9 +47,9 @@ async function resolveHttpNetworkFrame(
   frame: HttpNetworkFrame,
   handlers: Array<AnyHandler>,
 ): Promise<boolean> {
-  const { request } = frame.data
-  const requestId = createRequestId()
+  const request = frame.data.request.clone()
   const requestCloneForLogs = request.clone()
+  const requestId = createRequestId()
 
   frame.events.emit('request:start', { request, requestId })
 
@@ -117,6 +117,11 @@ async function resolveHttpNetworkFrame(
 
   frame.events.emit('request:end', { request, requestId })
 
+  /**
+   * @fixme This doesn't belong here. Different network APIs might choose
+   * to handle logging differently (e.g. `setupServer` doesn't log at all).
+   * This likely belongs in an abstract method on `defineNetwork()` or something.
+   */
   // Log mocked responses. Use the Network tab to observe the original network.
   handler.log({
     request: requestCloneForLogs,

src/core/new/sources/index.ts

@@ -27,15 +27,22 @@ export abstract class NetworkSource {
   }
 
   /**
-   * Enables this network source.
-   * Once enabled, it will start emitting network frame events.
+   * Enable this source and start the network interception.
    */
   public abstract enable(): Promise<unknown>
 
-  public push(frame: NetworkFrame): void {
-    this.#emitter.emit(new TypedEvent('frame', { data: frame }))
+  /**
+   * Push a new network frame to the underlying handlers.
+   * @returns {Promise<void>} A Promise that resolves when the handlers
+   * are done handling this frame.
+   */
+  public async push(frame: NetworkFrame): Promise<void> {
+    await this.#emitter.emitAsPromise(new TypedEvent('frame', { data: frame }))
   }
 
+  /**
+   * Disable this source and stop the network interception.
+   */
   public async disable(): Promise<void> {
     this.#emitter.removeAllListeners()
   }
@@ -56,10 +63,8 @@ class BatchNetworkSource extends NetworkSource {
     await Promise.all(this.sources.map((source) => source.enable()))
   }
 
-  public push(frame: NetworkFrame): void {
-    for (const source of this.sources) {
-      source.push(frame)
-    }
+  public async push(frame: NetworkFrame): Promise<void> {
+    await Promise.all(this.sources.map((source) => source.push(frame)))
   }
 
   public async disable(): Promise<void> {

src/core/new/sources/interceptor-source.ts

@@ -53,27 +53,21 @@ export class InterceptorSource extends NetworkSource {
     this.#interceptor.dispose()
   }
 
-  #onRequest({ request, controller }: HttpRequestEventMap['request'][0]): void {
+  async #onRequest({ request, controller }: HttpRequestEventMap['request'][0]) {
     const httpFrame = new InterceptorHttpNetworkFrame({
       request,
       controller,
     })
 
-    /**
-     * @todo Check if this will be okay with the async-based nature
-     * of the interceptor's `emitAsPromise()`. Since we emit frames
-     * into the air, interceptors won't know that a certain handler
-     * now should be awaited before proceeding to the next handler.
-     */
-    this.push(httpFrame)
+    await this.push(httpFrame)
   }
 
-  #onWebSocketConnection(connection: WebSocketEventMap['connection'][0]) {
+  async #onWebSocketConnection(connection: WebSocketEventMap['connection'][0]) {
     const webSocketFrame = new InterceptorWebSocketNetworkFrame({
       connection,
     })
 
-    this.push(webSocketFrame)
+    await this.push(webSocketFrame)
   }
 }
 

src/node/remote-process-source.ts

@@ -1,7 +1,7 @@
 import * as http from 'node:http'
 import { DeferredPromise } from '@open-draft/deferred-promise'
 import { Socket, Server as WebSocketServer } from 'socket.io'
-import { NetworkSource } from '~/core/new/sources'
+import { NetworkSource } from '~/core/new/sources/index'
 import { HttpNetworkFrame } from '~/core/new/frames/http-frame'
 import {
   deserializeHttpRequest,
@@ -22,14 +22,14 @@ export class RemoteProcessSource extends NetworkSource {
     this.#server.attach(this.#httpServer)
 
     this.#server.on('connection', (client) => {
-      client.on('request', (serializedRequest) => {
+      client.on('request', async (serializedRequest) => {
         const request = deserializeHttpRequest(serializedRequest, client)
         const httpFrame = new RemoteProcessHttpNetworkFrame({
           request,
           socket: client,
         })
 
-        this.push(httpFrame)
+        await this.push(httpFrame)
       })
 
       client.on('websocket', () => {

src/node/setup-server-common.ts

@@ -31,14 +31,17 @@ export class SetupServerCommonApi implements SetupServerCommon {
       handlersController,
     })
 
-    this.events = this.network.use
+    this.events = this.network.use as any
     this.use = this.network.use.bind(this.network)
     this.resetHandlers = this.network.resetHandlers.bind(this.network)
     this.restoreHandlers = this.network.restoreHandlers.bind(this.network)
     this.listHandlers = this.network.listHandlers.bind(this.network)
   }
 
-  public listen(...args: Array<any>): void {
+  public listen(
+    // eslint-disable-next-line
+    ...args: Array<any>
+  ): void {
     this.network.enable()
   }
 

src/node/setup-server.ts

@@ -49,10 +49,10 @@ export class SetupServerApi
     this.handlersController = handlersController
   }
 
-  public listen(options: Partial<ListenOptions>): void {
+  public listen(options?: Partial<ListenOptions>): void {
     super.listen()
 
-    if (options.remote?.enabled) {
+    if (options?.remote?.enabled) {
       const remoteRequestHandler = new RemoteRequestHandler({
         port: options.remote.port,
       })

test/node/rest-api/request/body/body-text.node.test.ts

@@ -1,6 +1,4 @@
-/**
- * @vitest-environment node
- */
+// @vitest-environment node
 import { HttpResponse, http } from 'msw'
 import { setupServer } from 'msw/node'
 import { encodeBuffer } from '@mswjs/interceptors'
@@ -20,61 +18,56 @@ afterAll(() => {
 })
 
 test('reads plain text request body as text', async () => {
-  const res = await fetch('http://localhost/resource', {
+  const response = await fetch('http://localhost/resource', {
     method: 'POST',
     headers: {
       'Content-Type': 'text/plain',
     },
     body: 'hello-world',
   })
-  const body = await res.text()
 
-  expect(res.status).toBe(200)
-  expect(body).toBe('hello-world')
+  expect.soft(response.status).toBe(200)
+  await expect.soft(response.text()).resolves.toBe('hello-world')
 })
 
 test('reads json request body as text', async () => {
-  const res = await fetch('http://localhost/resource', {
+  const response = await fetch('http://localhost/resource', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ firstName: 'John' }),
   })
-  const body = await res.text()
 
-  expect(res.status).toBe(200)
-  expect(body).toBe(`{"firstName":"John"}`)
+  expect.soft(response.status).toBe(200)
+  await expect.soft(response.text()).resolves.toBe(`{"firstName":"John"}`)
 })
 
 test('reads array buffer request body as text', async () => {
-  const res = await fetch('http://localhost/resource', {
+  const response = await fetch('http://localhost/resource', {
     method: 'POST',
     body: encodeBuffer('hello-world'),
   })
-  const body = await res.text()
 
-  expect(res.status).toBe(200)
-  expect(body).toBe('hello-world')
+  expect.soft(response.status).toBe(200)
+  await expect.soft(response.text()).resolves.toBe('hello-world')
 })
 
 test('reads null request body as empty text', async () => {
-  const res = await fetch('http://localhost/resource', {
+  const response = await fetch('http://localhost/resource', {
     method: 'POST',
     body: null as any,
   })
-  const body = await res.text()
 
-  expect(res.status).toBe(200)
-  expect(body).toBe('')
+  expect.soft(response.status).toBe(200)
+  await expect.soft(response.text()).resolves.toBe('')
 })
 
 test('reads undefined request body as empty text', async () => {
-  const res = await fetch('http://localhost/resource', {
+  const response = await fetch('http://localhost/resource', {
     method: 'POST',
   })
-  const body = await res.text()
 
-  expect(res.status).toBe(200)
-  expect(body).toBe('')
+  expect.soft(response.status).toBe(200)
+  await expect.soft(response.text()).resolves.toBe('')
 })