@mswjs/interceptors 0.39.7 → 0.40.0

package/src/interceptors/ClientRequest/index.ts

@@ -153,30 +153,26 @@ export class ClientRequestInterceptor extends Interceptor<HttpRequestEventMap> {
     request,
     socket,
   }) => {
-    const requestId = Reflect.get(request, kRequestId)
-    const controller = new RequestController(request)
-
-    const isRequestHandled = await handleRequest({
-      request,
-      requestId,
-      controller,
-      emitter: this.emitter,
-      onResponse: (response) => {
-        socket.respondWith(response)
+    const controller = new RequestController(request, {
+      passthrough() {
+        socket.passthrough()
       },
-      onRequestError: (response) => {
-        socket.respondWith(response)
+      async respondWith(response) {
+        await socket.respondWith(response)
       },
-      onError: (error) => {
-        if (error instanceof Error) {
-          socket.errorWith(error)
+      errorWith(reason) {
+        if (reason instanceof Error) {
+          socket.errorWith(reason)
         }
       },
     })
 
-    if (!isRequestHandled) {
-      return socket.passthrough()
-    }
+    await handleRequest({
+      request,
+      requestId: Reflect.get(request, kRequestId),
+      controller,
+      emitter: this.emitter,
+    })
   }
 
   public onResponse: MockHttpSocketResponseCallback = async ({

package/src/interceptors/WebSocket/index.ts

@@ -17,6 +17,7 @@ import {
 } from './WebSocketOverride'
 import { bindEvent } from './utils/bindEvent'
 import { hasConfigurableGlobal } from '../../utils/hasConfigurableGlobal'
+import { emitAsync } from '../../utils/emitAsync'
 
 export { type WebSocketData, WebSocketTransport } from './WebSocketTransport'
 export {
@@ -102,7 +103,7 @@ export class WebSocketInterceptor extends Interceptor<WebSocketEventMap> {
         // Emit the "connection" event to the interceptor on the next tick
         // so the client can modify WebSocket options, like "binaryType"
         // while the connection is already pending.
-        queueMicrotask(() => {
+        queueMicrotask(async () => {
           try {
             const server = new WebSocketServerConnection(
               socket,
@@ -110,10 +111,13 @@ export class WebSocketInterceptor extends Interceptor<WebSocketEventMap> {
               createConnection
             )
 
+            const hasConnectionListeners =
+              this.emitter.listenerCount('connection') > 0
+
             // The "globalThis.WebSocket" class stands for
             // the client-side connection. Assume it's established
             // as soon as the WebSocket instance is constructed.
-            const hasConnectionListeners = this.emitter.emit('connection', {
+            await emitAsync(this.emitter, 'connection', {
               client: new WebSocketClientConnection(socket, transport),
               server,
               info: {

package/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts

@@ -57,7 +57,10 @@ export class XMLHttpRequestController {
     Array<Function>
   >
 
-  constructor(readonly initialRequest: XMLHttpRequest, public logger: Logger) {
+  constructor(
+    readonly initialRequest: XMLHttpRequest,
+    public logger: Logger
+  ) {
     this[kIsRequestHandled] = false
 
     this.events = new Map()
@@ -111,7 +114,7 @@ export class XMLHttpRequestController {
           case 'addEventListener': {
             const [eventName, listener] = args as [
               keyof XMLHttpRequestEventTargetEventMap,
-              Function
+              Function,
             ]
 
             this.registerEvent(eventName, listener)
@@ -131,7 +134,7 @@ export class XMLHttpRequestController {
 
           case 'send': {
             const [body] = args as [
-              body?: XMLHttpRequestBodyInit | Document | null
+              body?: XMLHttpRequestBodyInit | Document | null,
             ]
 
             this.request.addEventListener('load', () => {
@@ -166,38 +169,44 @@ export class XMLHttpRequestController {
             const fetchRequest = this.toFetchApiRequest(requestBody)
             this[kFetchRequest] = fetchRequest.clone()
 
-            const onceRequestSettled =
-              this.onRequest?.call(this, {
-                request: fetchRequest,
-                requestId: this.requestId!,
-              }) || Promise.resolve()
-
-            onceRequestSettled.finally(() => {
-              // If the consumer didn't handle the request (called `.respondWith()`) perform it as-is.
-              if (!this[kIsRequestHandled]) {
-                this.logger.info(
-                  'request callback settled but request has not been handled (readystate %d), performing as-is...',
-                  this.request.readyState
-                )
-
-                /**
-                 * @note Set the intercepted request ID on the original request in Node.js
-                 * so that if it triggers any other interceptors, they don't attempt
-                 * to process it once again.
-                 *
-                 * For instance, XMLHttpRequest is often implemented via "http.ClientRequest"
-                 * and we don't want for both XHR and ClientRequest interceptors to
-                 * handle the same request at the same time (e.g. emit the "response" event twice).
-                 */
-                if (IS_NODE) {
-                  this.request.setRequestHeader(
-                    INTERNAL_REQUEST_ID_HEADER_NAME,
-                    this.requestId!
+            /**
+             * @note Start request handling on the next tick so that the user
+             * could add event listeners for "loadend" before the interceptor fires it.
+             */
+            queueMicrotask(() => {
+              const onceRequestSettled =
+                this.onRequest?.call(this, {
+                  request: fetchRequest,
+                  requestId: this.requestId!,
+                }) || Promise.resolve()
+
+              onceRequestSettled.finally(() => {
+                // If the consumer didn't handle the request (called `.respondWith()`) perform it as-is.
+                if (!this[kIsRequestHandled]) {
+                  this.logger.info(
+                    'request callback settled but request has not been handled (readystate %d), performing as-is...',
+                    this.request.readyState
                   )
-                }
 
-                return invoke()
-              }
+                  /**
+                   * @note Set the intercepted request ID on the original request in Node.js
+                   * so that if it triggers any other interceptors, they don't attempt
+                   * to process it once again.
+                   *
+                   * For instance, XMLHttpRequest is often implemented via "http.ClientRequest"
+                   * and we don't want for both XHR and ClientRequest interceptors to
+                   * handle the same request at the same time (e.g. emit the "response" event twice).
+                   */
+                  if (IS_NODE) {
+                    this.request.setRequestHeader(
+                      INTERNAL_REQUEST_ID_HEADER_NAME,
+                      this.requestId!
+                    )
+                  }
+
+                  return invoke()
+                }
+              })
             })
 
             break
@@ -241,7 +250,7 @@ export class XMLHttpRequestController {
             case 'addEventListener': {
               const [eventName, listener] = args as [
                 keyof XMLHttpRequestEventTargetEventMap,
-                Function
+                Function,
               ]
               this.registerUploadEvent(eventName, listener)
               this.logger.info('upload.addEventListener', eventName, listener)
@@ -312,6 +321,7 @@ export class XMLHttpRequestController {
         loaded: totalRequestBodyLength,
         total: totalRequestBodyLength,
       })
+
       this.trigger('loadend', this.request.upload, {
         loaded: totalRequestBodyLength,
         total: totalRequestBodyLength,
@@ -614,7 +624,7 @@ export class XMLHttpRequestController {
   private trigger<
     EventName extends keyof (XMLHttpRequestEventTargetEventMap & {
       readystatechange: ProgressEvent<XMLHttpRequestEventTarget>
-    })
+    }),
   >(
     eventName: EventName,
     target: XMLHttpRequest | XMLHttpRequestUpload,

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -3,6 +3,7 @@ import { XMLHttpRequestEmitter } from '.'
 import { RequestController } from '../../RequestController'
 import { XMLHttpRequestController } from './XMLHttpRequestController'
 import { handleRequest } from '../../utils/handleRequest'
+import { isResponseError } from '../../utils/responseUtils'
 
 export interface XMLHttpRequestProxyOptions {
   emitter: XMLHttpRequestEmitter
@@ -52,7 +53,28 @@ export function createXMLHttpRequestProxy({
       )
 
       xhrRequestController.onRequest = async function ({ request, requestId }) {
-        const controller = new RequestController(request)
+        const controller = new RequestController(request, {
+          passthrough: () => {
+            this.logger.info(
+              'no mocked response received, performing request as-is...'
+            )
+          },
+          respondWith: async (response) => {
+            if (isResponseError(response)) {
+              this.errorWith(new TypeError('Network error'))
+              return
+            }
+
+            await this.respondWith(response)
+          },
+          errorWith: (reason) => {
+            this.logger.info('request errored!', { error: reason })
+
+            if (reason instanceof Error) {
+              this.errorWith(reason)
+            }
+          },
+        })
 
         this.logger.info('awaiting mocked response...')
 
@@ -61,31 +83,12 @@ export function createXMLHttpRequestProxy({
           emitter.listenerCount('request')
         )
 
-        const isRequestHandled = await handleRequest({
+        await handleRequest({
           request,
           requestId,
           controller,
           emitter,
-          onResponse: async (response) => {
-            await this.respondWith(response)
-          },
-          onRequestError: () => {
-            this.errorWith(new TypeError('Network error'))
-          },
-          onError: (error) => {
-            this.logger.info('request errored!', { error })
-
-            if (error instanceof Error) {
-              this.errorWith(error)
-            }
-          },
         })
-
-        if (!isRequestHandled) {
-          this.logger.info(
-            'no mocked response received, performing request as-is...'
-          )
-        }
       }
 
       xhrRequestController.onResponse = async function ({

package/src/interceptors/fetch/index.ts

@@ -1,4 +1,5 @@
 import { invariant } from 'outvariant'
+import { until } from '@open-draft/until'
 import { DeferredPromise } from '@open-draft/deferred-promise'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
@@ -13,6 +14,7 @@ import { decompressResponse } from './utils/decompression'
 import { hasConfigurableGlobal } from '../../utils/hasConfigurableGlobal'
 import { FetchResponse } from '../../utils/fetchUtils'
 import { setRawRequest } from '../../getRawRequest'
+import { isResponseError } from '../../utils/responseUtils'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -59,22 +61,54 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
       }
 
       const responsePromise = new DeferredPromise<Response>()
-      const controller = new RequestController(request)
 
-      this.logger.info('[%s] %s', request.method, request.url)
-      this.logger.info('awaiting for the mocked response...')
+      const controller = new RequestController(request, {
+        passthrough: async () => {
+          this.logger.info('request has not been handled, passthrough...')
 
-      this.logger.info(
-        'emitting the "request" event for %s listener(s)...',
-        this.emitter.listenerCount('request')
-      )
+          /**
+           * @note Clone the request instance right before performing it.
+           * This preserves any modifications made to the intercepted request
+           * in the "request" listener. This also allows the user to read the
+           * request body in the "response" listener (otherwise "unusable").
+           */
+          const requestCloneForResponseEvent = request.clone()
+
+          // Perform the intercepted request as-is.
+          const { error: responseError, data: originalResponse } = await until(
+            () => pureFetch(request)
+          )
+
+          if (responseError) {
+            return responsePromise.reject(responseError)
+          }
+
+          this.logger.info('original fetch performed', originalResponse)
+
+          if (this.emitter.listenerCount('response') > 0) {
+            this.logger.info('emitting the "response" event...')
+
+            const responseClone = originalResponse.clone()
+            await emitAsync(this.emitter, 'response', {
+              response: responseClone,
+              isMockedResponse: false,
+              request: requestCloneForResponseEvent,
+              requestId,
+            })
+          }
+
+          // Resolve the response promise with the original response
+          // since the `fetch()` return this internal promise.
+          responsePromise.resolve(originalResponse)
+        },
+        respondWith: async (rawResponse) => {
+          // Handle mocked `Response.error()` (i.e. request errors).
+          if (isResponseError(rawResponse)) {
+            this.logger.info('request has errored!', { response: rawResponse })
+            responsePromise.reject(createNetworkError(rawResponse))
+            return
+          }
 
-      const isRequestHandled = await handleRequest({
-        request,
-        requestId,
-        emitter: this.emitter,
-        controller,
-        onResponse: async (rawResponse) => {
           this.logger.info('received mocked response!', {
             rawResponse,
           })
@@ -134,51 +168,28 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
           responsePromise.resolve(response)
         },
-        onRequestError: (response) => {
-          this.logger.info('request has errored!', { response })
-          responsePromise.reject(createNetworkError(response))
-        },
-        onError: (error) => {
-          this.logger.info('request has been aborted!', { error })
-          responsePromise.reject(error)
+        errorWith: (reason) => {
+          this.logger.info('request has been aborted!', { reason })
+          responsePromise.reject(reason)
         },
       })
 
-      if (isRequestHandled) {
-        this.logger.info('request has been handled, returning mock promise...')
-        return responsePromise
-      }
+      this.logger.info('[%s] %s', request.method, request.url)
+      this.logger.info('awaiting for the mocked response...')
 
       this.logger.info(
-        'no mocked response received, performing request as-is...'
+        'emitting the "request" event for %s listener(s)...',
+        this.emitter.listenerCount('request')
       )
 
-      /**
-       * @note Clone the request instance right before performing it.
-       * This preserves any modifications made to the intercepted request
-       * in the "request" listener. This also allows the user to read the
-       * request body in the "response" listener (otherwise "unusable").
-       */
-      const requestCloneForResponseEvent = request.clone()
-
-      return pureFetch(request).then(async (response) => {
-        this.logger.info('original fetch performed', response)
-
-        if (this.emitter.listenerCount('response') > 0) {
-          this.logger.info('emitting the "response" event...')
-
-          const responseClone = response.clone()
-
-          await emitAsync(this.emitter, 'response', {
-            response: responseClone,
-            isMockedResponse: false,
-            request: requestCloneForResponseEvent,
-            requestId,
-          })
-        }
-
-        return response
+      await handleRequest({
+        request,
+        requestId,
+        emitter: this.emitter,
+        controller,
       })
+
+      return responsePromise
     }
 
     Object.defineProperty(globalThis.fetch, IS_PATCHED_MODULE, {