@mswjs/interceptors 0.39.8 → 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/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, {

package/src/utils/handleRequest.ts

@@ -3,12 +3,11 @@ import { DeferredPromise } from '@open-draft/deferred-promise'
 import { until } from '@open-draft/until'
 import type { HttpRequestEventMap } from '../glossary'
 import { emitAsync } from './emitAsync'
-import { kResponsePromise, RequestController } from '../RequestController'
+import { RequestController } from '../RequestController'
 import {
   createServerErrorResponse,
   isResponseError,
   isResponseLike,
-  ResponseError,
 } from './responseUtils'
 import { InterceptorError } from '../InterceptorError'
 import { isNodeLikeError } from './isNodeLikeError'
@@ -19,43 +18,22 @@ interface HandleRequestOptions {
   request: Request
   emitter: Emitter<HttpRequestEventMap>
   controller: RequestController
-
-  /**
-   * Called when the request has been handled
-   * with the given `Response` instance.
-   */
-  onResponse: (response: Response) => void | Promise<void>
-
-  /**
-   * Called when the request has been handled
-   * with the given `Response.error()` instance.
-   */
-  onRequestError: (response: ResponseError) => void
-
-  /**
-   * Called when an unhandled error happens during the
-   * request handling. This is never a thrown error/response.
-   */
-  onError: (error: unknown) => void
 }
 
-/**
- * @returns {Promise<boolean>} Indicates whether the request has been handled.
- */
 export async function handleRequest(
   options: HandleRequestOptions
-): Promise<boolean> {
+): Promise<void> {
   const handleResponse = async (
     response: Response | Error | Record<string, any>
   ) => {
     if (response instanceof Error) {
-      options.onError(response)
+      await options.controller.errorWith(response)
       return true
     }
 
     // Handle "Response.error()" instances.
     if (isResponseError(response)) {
-      options.onRequestError(response)
+      await options.controller.respondWith(response)
       return true
     }
 
@@ -65,13 +43,13 @@ export async function handleRequest(
      * since Response instances are, in fact, objects.
      */
     if (isResponseLike(response)) {
-      await options.onResponse(response)
+      await options.controller.respondWith(response)
       return true
     }
 
     // Handle arbitrary objects provided to `.errorWith(reason)`.
     if (isObject(response)) {
-      options.onError(response)
+      await options.controller.errorWith(response)
       return true
     }
 
@@ -87,7 +65,7 @@ export async function handleRequest(
 
     // Support mocking Node.js-like errors.
     if (isNodeLikeError(error)) {
-      options.onError(error)
+      await options.controller.errorWith(error)
       return true
     }
 
@@ -102,15 +80,14 @@ export async function handleRequest(
   // Add the last "request" listener to check if the request
   // has been handled in any way. If it hasn't, resolve the
   // response promise with undefined.
-  options.emitter.once('request', ({ requestId: pendingRequestId }) => {
-    if (pendingRequestId !== options.requestId) {
-      return
-    }
-
-    if (options.controller[kResponsePromise].state === 'pending') {
-      options.controller[kResponsePromise].resolve(undefined)
-    }
-  })
+  // options.emitter.once('request', async ({ requestId: pendingRequestId }) => {
+  //   if (
+  //     pendingRequestId === options.requestId &&
+  //     options.controller.readyState === RequestController.PENDING
+  //   ) {
+  //     await options.controller.passthrough()
+  //   }
+  // })
 
   const requestAbortPromise = new DeferredPromise<void, unknown>()
 
@@ -119,16 +96,17 @@ export async function handleRequest(
    */
   if (options.request.signal) {
     if (options.request.signal.aborted) {
-      requestAbortPromise.reject(options.request.signal.reason)
-    } else {
-      options.request.signal.addEventListener(
-        'abort',
-        () => {
-          requestAbortPromise.reject(options.request.signal.reason)
-        },
-        { once: true }
-      )
+      await options.controller.errorWith(options.request.signal.reason)
+      return
     }
+
+    options.request.signal.addEventListener(
+      'abort',
+      () => {
+        requestAbortPromise.reject(options.request.signal.reason)
+      },
+      { once: true }
+    )
   }
 
   const result = await until(async () => {
@@ -146,25 +124,21 @@ export async function handleRequest(
       // Short-circuit the request handling promise if the request gets aborted.
       requestAbortPromise,
       requestListenersPromise,
-      options.controller[kResponsePromise],
+      options.controller.handled,
     ])
-
-    // The response promise will settle immediately once
-    // the developer calls either "respondWith" or "errorWith".
-    return await options.controller[kResponsePromise]
   })
 
   // Handle the request being aborted while waiting for the request listeners.
   if (requestAbortPromise.state === 'rejected') {
-    options.onError(requestAbortPromise.rejectionReason)
-    return true
+    await options.controller.errorWith(requestAbortPromise.rejectionReason)
+    return
   }
 
   if (result.error) {
     // Handle the error during the request listener execution.
     // These can be thrown responses or request errors.
     if (await handleResponseError(result.error)) {
-      return true
+      return
     }
 
     // If the developer has added "unhandledException" listeners,
@@ -175,7 +149,28 @@ export async function handleRequest(
       // This is needed because the original controller might have been already
       // interacted with (e.g. "respondWith" or "errorWith" called on it).
       const unhandledExceptionController = new RequestController(
-        options.request
+        options.request,
+        {
+          /**
+           * @note Intentionally empty passthrough handle.
+           * This controller is created within another controller and we only need
+           * to know if `unhandledException` listeners handled the request.
+           */
+          passthrough() {},
+          async respondWith(response) {
+            await handleResponse(response)
+          },
+          async errorWith(reason) {
+            /**
+             * @note Handle the result of the unhandled controller
+             * in the same way as the original request controller.
+             * The exception here is that thrown errors within the
+             * "unhandledException" event do NOT result in another
+             * emit of the same event. They are forwarded as-is.
+             */
+            await options.controller.errorWith(reason)
+          },
+        }
       )
 
       await emitAsync(options.emitter, 'unhandledException', {
@@ -183,53 +178,28 @@ export async function handleRequest(
         request: options.request,
         requestId: options.requestId,
         controller: unhandledExceptionController,
-      }).then(() => {
-        // If all the "unhandledException" listeners have finished
-        // but have not handled the response in any way, preemptively
-        // resolve the pending response promise from the new controller.
-        // This prevents it from hanging forever.
-        if (
-          unhandledExceptionController[kResponsePromise].state === 'pending'
-        ) {
-          unhandledExceptionController[kResponsePromise].resolve(undefined)
-        }
       })
 
-      const nextResult = await until(
-        () => unhandledExceptionController[kResponsePromise]
-      )
-
-      /**
-       * @note Handle the result of the unhandled controller
-       * in the same way as the original request controller.
-       * The exception here is that thrown errors within the
-       * "unhandledException" event do NOT result in another
-       * emit of the same event. They are forwarded as-is.
-       */
-      if (nextResult.error) {
-        return handleResponseError(nextResult.error)
-      }
-
-      if (nextResult.data) {
-        return handleResponse(nextResult.data)
+      // If all the "unhandledException" listeners have finished
+      // but have not handled the request in any way, passthrough.
+      if (
+        unhandledExceptionController.readyState !== RequestController.PENDING
+      ) {
+        return
       }
     }
 
     // Otherwise, coerce unhandled exceptions to a 500 Internal Server Error response.
-    options.onResponse(createServerErrorResponse(result.error))
-    return true
+    await options.controller.respondWith(
+      createServerErrorResponse(result.error)
+    )
+    return
   }
 
-  /**
-   * Handle a mocked Response instance.
-   * @note That this can also be an Error in case
-   * the developer called "errorWith". This differentiates
-   * unhandled exceptions from intended errors.
-   */
-  if (result.data) {
-    return handleResponse(result.data)
+  // If the request hasn't been handled by this point, passthrough.
+  if (options.controller.readyState === RequestController.PENDING) {
+    return await options.controller.passthrough()
   }
 
-  // In all other cases, consider the request unhandled.
-  return false
+  return options.controller.handled
 }