@mswjs/interceptors 0.32.1 → 0.33.0

package/src/interceptors/ClientRequest/utils/recordRawHeaders.ts

@@ -0,0 +1,170 @@
+type HeaderTuple = [string, string]
+type RawHeaders = Array<HeaderTuple>
+
+const kRawHeaders = Symbol('kRawHeaders')
+const kRestorePatches = Symbol('kRestorePatches')
+
+function recordRawHeader(headers: Headers, args: HeaderTuple) {
+  if (Reflect.get(headers, kRawHeaders) == null) {
+    Object.defineProperty(headers, kRawHeaders, {
+      value: [],
+      enumerable: false,
+    })
+  }
+  const rawHeaders = Reflect.get(headers, kRawHeaders) as RawHeaders
+  rawHeaders.push(args)
+}
+
+/**
+ * Patch the global `Headers` class to store raw headers.
+ * This is for compatibility with `IncomingMessage.prototype.rawHeaders`.
+ *
+ * @note Node.js has their own raw headers symbol but it
+ * only records the first header name in case of multi-value headers.
+ * Any other headers are normalized before comparing. This makes it
+ * incompatible with the `rawHeaders` format.
+ *
+ * let h = new Headers()
+ * h.append('X-Custom', 'one')
+ * h.append('x-custom', 'two')
+ * h[Symbol('headers map')] // Map { 'X-Custom' => 'one, two' }
+ */
+export function recordRawFetchHeaders() {
+  // Prevent patching the Headers prototype multiple times.
+  if (Reflect.get(Headers, kRestorePatches)) {
+    return Reflect.get(Headers, kRestorePatches)
+  }
+
+  const { Request: OriginalRequest, Response: OriginalResponse } = globalThis
+  const { set, append, delete: headersDeleteMethod } = Headers.prototype
+
+  Object.defineProperty(Headers, kRestorePatches, {
+    value: () => {
+      Headers.prototype.set = set
+      Headers.prototype.append = append
+      Headers.prototype.delete = headersDeleteMethod
+
+      globalThis.Request = OriginalRequest
+      globalThis.Response = OriginalResponse
+    },
+    enumerable: false,
+  })
+
+  Headers = new Proxy(Headers, {
+    construct(target, args, newTarget) {
+      const headers = Reflect.construct(target, args, newTarget)
+      const initialHeaders = args[0] || []
+      const initialRawHeaders = Array.isArray(initialHeaders)
+        ? initialHeaders
+        : Object.entries(initialHeaders)
+
+      // Request/Response constructors will set the symbol
+      // upon creating a new instance, using the raw developer
+      // input as the raw headers. Skip the symbol altogether
+      // in those cases because the input to Headers will be normalized.
+      if (!Reflect.has(headers, kRawHeaders)) {
+        Object.defineProperty(headers, kRawHeaders, {
+          value: initialRawHeaders,
+          enumerable: false,
+        })
+      }
+
+      return headers
+    },
+  })
+
+  Headers.prototype.set = new Proxy(Headers.prototype.set, {
+    apply(target, thisArg, args: HeaderTuple) {
+      recordRawHeader(thisArg, args)
+      return Reflect.apply(target, thisArg, args)
+    },
+  })
+
+  Headers.prototype.append = new Proxy(Headers.prototype.append, {
+    apply(target, thisArg, args: HeaderTuple) {
+      recordRawHeader(thisArg, args)
+      return Reflect.apply(target, thisArg, args)
+    },
+  })
+
+  Headers.prototype.delete = new Proxy(Headers.prototype.delete, {
+    apply(target, thisArg, args: [string]) {
+      const rawHeaders = Reflect.get(thisArg, kRawHeaders) as RawHeaders
+
+      if (rawHeaders) {
+        for (let index = rawHeaders.length - 1; index >= 0; index--) {
+          if (rawHeaders[index][0].toLowerCase() === args[0].toLowerCase()) {
+            rawHeaders.splice(index, 1)
+          }
+        }
+      }
+
+      return Reflect.apply(target, thisArg, args)
+    },
+  })
+
+  Request = new Proxy(Request, {
+    construct(target, args, newTarget) {
+      const request = Reflect.construct(target, args, newTarget)
+
+      if (
+        typeof args[1] === 'object' &&
+        args[1].headers != null &&
+        !request.headers[kRawHeaders]
+      ) {
+        request.headers[kRawHeaders] = inferRawHeaders(args[1].headers)
+      }
+
+      return request
+    },
+  })
+
+  Response = new Proxy(Response, {
+    construct(target, args, newTarget) {
+      const response = Reflect.construct(target, args, newTarget)
+
+      if (typeof args[1] === 'object' && args[1].headers != null) {
+        /**
+         * @note Pass the init argument directly because it gets
+         * transformed into a normalized Headers instance once it
+         * passes the Response constructor.
+         */
+        response.headers[kRawHeaders] = inferRawHeaders(args[1].headers)
+      }
+
+      return response
+    },
+  })
+}
+
+export function restoreHeadersPrototype() {
+  if (!Reflect.get(Headers, kRestorePatches)) {
+    return
+  }
+
+  Reflect.get(Headers, kRestorePatches)()
+}
+
+export function getRawFetchHeaders(headers: Headers): RawHeaders {
+  // Return the raw headers, if recorded (i.e. `.set()` or `.append()` was called).
+  // If no raw headers were recorded, return all the headers.
+  return Reflect.get(headers, kRawHeaders) || Array.from(headers.entries())
+}
+
+/**
+ * Infers the raw headers from the given `HeadersInit` provided
+ * to the Request/Response constructor.
+ *
+ * If the `init.headers` is a Headers instance, use it directly.
+ * That means the headers were created standalone and already have
+ * the raw headers stored.
+ * If the `init.headers` is a HeadersInit, create a new Headers
+ * instace out of it.
+ */
+function inferRawHeaders(headers: HeadersInit): RawHeaders {
+  if (headers instanceof Headers) {
+    return Reflect.get(headers, kRawHeaders)
+  }
+
+  return Reflect.get(new Headers(headers), kRawHeaders)
+}

package/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts

@@ -481,7 +481,7 @@ export class XMLHttpRequestController {
     return null
   }
 
-  public errorWith(error: Error): void {
+  public errorWith(error?: Error): void {
     this.logger.info('responding with an error')
 
     this.setReadyState(this.request.DONE)

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -1,13 +1,8 @@
-import { until } from '@open-draft/until'
 import type { Logger } from '@open-draft/logger'
 import { XMLHttpRequestEmitter } from '.'
-import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
-import { emitAsync } from '../../utils/emitAsync'
+import { RequestController } from '../../RequestController'
 import { XMLHttpRequestController } from './XMLHttpRequestController'
-import {
-  createServerErrorResponse,
-  isResponseError,
-} from '../../utils/responseUtils'
+import { handleRequest } from '../../utils/handleRequest'
 
 export interface XMLHttpRequestProxyOptions {
   emitter: XMLHttpRequestEmitter
@@ -57,116 +52,40 @@ export function createXMLHttpRequestProxy({
       )
 
       xhrRequestController.onRequest = async function ({ request, requestId }) {
-        const { interactiveRequest, requestController } =
-          toInteractiveRequest(request)
+        const controller = new RequestController(request)
 
         this.logger.info('awaiting mocked response...')
 
-        emitter.once('request', ({ requestId: pendingRequestId }) => {
-          if (pendingRequestId !== requestId) {
-            return
-          }
-
-          if (requestController.responsePromise.state === 'pending') {
-            requestController.respondWith(undefined)
-          }
-        })
-
-        const resolverResult = await until(async () => {
-          this.logger.info(
-            'emitting the "request" event for %s listener(s)...',
-            emitter.listenerCount('request')
-          )
-
-          await emitAsync(emitter, 'request', {
-            request: interactiveRequest,
-            requestId,
-          })
-
-          this.logger.info('all "request" listeners settled!')
-
-          const mockedResponse = await requestController.responsePromise
-
-          this.logger.info('event.respondWith called with:', mockedResponse)
-
-          return mockedResponse
-        })
-
-        if (resolverResult.error) {
-          this.logger.info(
-            'request listener threw an exception, aborting request...',
-            resolverResult.error
-          )
-
-          // Treat thrown Responses as mocked responses.
-          if (resolverResult.error instanceof Response) {
-            if (isResponseError(resolverResult.error)) {
-              xhrRequestController.errorWith(new TypeError('Network error'))
-            } else {
-              this.respondWith(resolverResult.error)
-            }
-
-            return
-          }
-
-          if (emitter.listenerCount('unhandledException') > 0) {
-            // Emit the "unhandledException" event so the client can opt-out
-            // from the default exception handling (producing 500 error responses).
-            await emitAsync(emitter, 'unhandledException', {
-              error: resolverResult.error,
-              request,
-              requestId,
-              controller: {
-                respondWith:
-                  xhrRequestController.respondWith.bind(xhrRequestController),
-                errorWith:
-                  xhrRequestController.errorWith.bind(xhrRequestController),
-              },
-            })
+        this.logger.info(
+          'emitting the "request" event for %s listener(s)...',
+          emitter.listenerCount('request')
+        )
 
-            // If any of the "unhandledException" listeners handled the request,
-            // do nothing. Note that mocked responses will dispatch
-            // HEADERS_RECEIVED (2), then LOADING (3), and DONE (4) can take
-            // time as the mocked response body finishes streaming.
-            if (originalRequest.readyState > XMLHttpRequest.OPENED) {
-              return
+        const isRequestHandled = await handleRequest({
+          request,
+          requestId,
+          controller,
+          emitter,
+          onResponse: (response) => {
+            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)
             }
-          }
-
-          // Unhandled exceptions in the request listeners are
-          // synonymous to unhandled exceptions on the server.
-          // Those are represented as 500 error responses.
-          xhrRequestController.respondWith(
-            createServerErrorResponse(resolverResult.error)
-          )
-
-          return
-        }
-
-        const mockedResponse = resolverResult.data
+          },
+        })
 
-        if (typeof mockedResponse !== 'undefined') {
+        if (!isRequestHandled) {
           this.logger.info(
-            'received mocked response: %d %s',
-            mockedResponse.status,
-            mockedResponse.statusText
+            'no mocked response received, performing request as-is...'
           )
-
-          if (isResponseError(mockedResponse)) {
-            this.logger.info(
-              'received a network error response, rejecting the request promise...'
-            )
-
-            xhrRequestController.errorWith(new TypeError('Network error'))
-            return
-          }
-
-          return xhrRequestController.respondWith(mockedResponse)
         }
-
-        this.logger.info(
-          'no mocked response received, performing request as-is...'
-        )
       }
 
       xhrRequestController.onResponse = async function ({

package/src/interceptors/XMLHttpRequest/index.ts

@@ -1,15 +1,9 @@
 import { invariant } from 'outvariant'
 import { Emitter } from 'strict-event-emitter'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
-import { InteractiveRequest } from '../../utils/toInteractiveRequest'
 import { Interceptor } from '../../Interceptor'
 import { createXMLHttpRequestProxy } from './XMLHttpRequestProxy'
 
-export type XMLHttpRequestEventListener = (args: {
-  request: InteractiveRequest
-  requestId: string
-}) => Promise<void> | void
-
 export type XMLHttpRequestEmitter = Emitter<HttpRequestEventMap>
 
 export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap> {

package/src/interceptors/fetch/index.ts

@@ -1,16 +1,12 @@
 import { invariant } from 'outvariant'
 import { DeferredPromise } from '@open-draft/deferred-promise'
-import { until } from '@open-draft/until'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
-import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
+import { RequestController } from '../../RequestController'
 import { emitAsync } from '../../utils/emitAsync'
+import { handleRequest } from '../../utils/handleRequest'
 import { canParseUrl } from '../../utils/canParseUrl'
 import { createRequestId } from '../../createRequestId'
-import {
-  createServerErrorResponse,
-  isResponseError,
-} from '../../utils/responseUtils'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -51,185 +47,72 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
           : input
 
       const request = new Request(resolvedInput, init)
+      const responsePromise = new DeferredPromise<Response>()
+      const controller = new RequestController(request)
 
       this.logger.info('[%s] %s', request.method, request.url)
-
-      const { interactiveRequest, requestController } =
-        toInteractiveRequest(request)
+      this.logger.info('awaiting for the mocked response...')
 
       this.logger.info(
-        'emitting the "request" event for %d listener(s)...',
+        'emitting the "request" event for %s listener(s)...',
         this.emitter.listenerCount('request')
       )
 
-      this.emitter.once('request', ({ requestId: pendingRequestId }) => {
-        if (pendingRequestId !== requestId) {
-          return
-        }
-
-        if (requestController.responsePromise.state === 'pending') {
-          requestController.responsePromise.resolve(undefined)
-        }
-      })
-
-      this.logger.info('awaiting for the mocked response...')
-
-      const signal = interactiveRequest.signal
-      const requestAborted = new DeferredPromise()
-
-      // Signal isn't always defined in react-native.
-      if (signal) {
-        signal.addEventListener(
-          'abort',
-          () => {
-            requestAborted.reject(signal.reason)
-          },
-          { once: true }
-        )
-      }
-
-      const responsePromise = new DeferredPromise<Response>()
-
-      const respondWith = (response: Response): void => {
-        this.logger.info('responding with a mock response:', response)
-
-        if (this.emitter.listenerCount('response') > 0) {
-          this.logger.info('emitting the "response" event...')
-
-          // Clone the mocked response for the "response" event listener.
-          // This way, the listener can read the response and not lock its body
-          // for the actual fetch consumer.
-          const responseClone = response.clone()
-
-          this.emitter.emit('response', {
-            response: responseClone,
-            isMockedResponse: true,
-            request: interactiveRequest,
-            requestId,
-          })
-        }
-
-        // Set the "response.url" property to equal the intercepted request URL.
-        Object.defineProperty(response, 'url', {
-          writable: false,
-          enumerable: true,
-          configurable: false,
-          value: request.url,
-        })
-
-        responsePromise.resolve(response)
-      }
-
-      const errorWith = (reason: unknown): void => {
-        responsePromise.reject(reason)
-      }
-
-      const resolverResult = await until<unknown, Response | undefined>(
-        async () => {
-          const listenersFinished = emitAsync(this.emitter, 'request', {
-            request: interactiveRequest,
-            requestId,
+      const isRequestHandled = await handleRequest({
+        request,
+        requestId,
+        emitter: this.emitter,
+        controller,
+        onResponse: async (response) => {
+          this.logger.info('received mocked response!', {
+            response,
           })
 
-          await Promise.race([
-            requestAborted,
-            // Put the listeners invocation Promise in the same race condition
-            // with the request abort Promise because otherwise awaiting the listeners
-            // would always yield some response (or undefined).
-            listenersFinished,
-            requestController.responsePromise,
-          ])
-
-          this.logger.info('all request listeners have been resolved!')
-
-          const mockedResponse = await requestController.responsePromise
-          this.logger.info('event.respondWith called with:', mockedResponse)
-
-          return mockedResponse
-        }
-      )
-
-      if (requestAborted.state === 'rejected') {
-        this.logger.info(
-          'request has been aborted:',
-          requestAborted.rejectionReason
-        )
-
-        responsePromise.reject(requestAborted.rejectionReason)
-        return responsePromise
-      }
-
-      if (resolverResult.error) {
-        this.logger.info(
-          'request listerner threw an error:',
-          resolverResult.error
-        )
-
-        // Treat thrown Responses as mocked responses.
-        if (resolverResult.error instanceof Response) {
-          // Treat thrown Response.error() as a request error.
-          if (isResponseError(resolverResult.error)) {
-            errorWith(createNetworkError(resolverResult.error))
-          } else {
-            // Treat the rest of thrown Responses as mocked responses.
-            respondWith(resolverResult.error)
+          if (this.emitter.listenerCount('response') > 0) {
+            this.logger.info('emitting the "response" event...')
+
+            // Await the response listeners to finish before resolving
+            // the response promise. This ensures all your logic finishes
+            // before the interceptor resolves the pending response.
+            await emitAsync(this.emitter, 'response', {
+              // Clone the mocked response for the "response" event listener.
+              // This way, the listener can read the response and not lock its body
+              // for the actual fetch consumer.
+              response: response.clone(),
+              isMockedResponse: true,
+              request,
+              requestId,
+            })
           }
-        }
 
-        // Emit the "unhandledException" interceptor event so the client
-        // can opt-out from exceptions translating to 500 error responses.
-
-        if (this.emitter.listenerCount('unhandledException') > 0) {
-          await emitAsync(this.emitter, 'unhandledException', {
-            error: resolverResult.error,
-            request,
-            requestId,
-            controller: {
-              respondWith,
-              errorWith,
-            },
+          // Set the "response.url" property to equal the intercepted request URL.
+          Object.defineProperty(response, 'url', {
+            writable: false,
+            enumerable: true,
+            configurable: false,
+            value: request.url,
           })
 
-          if (responsePromise.state !== 'pending') {
-            return responsePromise
-          }
-        }
-
-        // Unhandled exceptions in the request listeners are
-        // synonymous to unhandled exceptions on the server.
-        // Those are represented as 500 error responses.
-        respondWith(createServerErrorResponse(resolverResult.error))
-        return responsePromise
-      }
-
-      const mockedResponse = resolverResult.data
-
-      if (mockedResponse && !request.signal?.aborted) {
-        this.logger.info('received mocked response:', mockedResponse)
-
-        // Reject the request Promise on mocked "Response.error" responses.
-        if (isResponseError(mockedResponse)) {
-          this.logger.info(
-            'received a network error response, rejecting the request promise...'
-          )
-
-          /**
-           * Set the cause of the request promise rejection to the
-           * network error Response instance. This differs from Undici.
-           * Undici will forward the "response.error" custom property
-           * as the rejection reason but for "Response.error()" static method
-           * "response.error" will equal to undefined, making "cause" an empty Error.
-           * @see https://github.com/nodejs/undici/blob/83cb522ae0157a19d149d72c7d03d46e34510d0a/lib/fetch/response.js#L344
-           */
-          errorWith(createNetworkError(mockedResponse))
-        } else {
-          respondWith(mockedResponse)
-        }
+          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)
+        },
+      })
 
+      if (isRequestHandled) {
+        this.logger.info('request has been handled, returning mock promise...')
         return responsePromise
       }
 
-      this.logger.info('no mocked response received!')
+      this.logger.info(
+        'no mocked response received, performing request as-is...'
+      )
 
       return pureFetch(request).then((response) => {
         this.logger.info('original fetch performed', response)
@@ -242,7 +125,7 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
           this.emitter.emit('response', {
             response: responseClone,
             isMockedResponse: false,
-            request: interactiveRequest,
+            request,
             requestId,
           })
         }