@mswjs/interceptors 0.34.1 → 0.34.3

package/lib/node/presets/node.mjs

@@ -1,15 +1,15 @@
 import {
   ClientRequestInterceptor
-} from "../chunk-DCMEIPZN.mjs";
+} from "../chunk-KA2KMHFU.mjs";
 import {
   XMLHttpRequestInterceptor
-} from "../chunk-RJGP7FQP.mjs";
+} from "../chunk-WGBCEHTV.mjs";
 import "../chunk-6HYIRFX2.mjs";
 import {
   FetchInterceptor
-} from "../chunk-RTGLFNO3.mjs";
+} from "../chunk-GILG336Y.mjs";
 import "../chunk-BZ3Y7YV5.mjs";
-import "../chunk-KY3RJ2M3.mjs";
+import "../chunk-XSXCGXEY.mjs";
 import "../chunk-BUCULLYM.mjs";
 
 // src/presets/node.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mswjs/interceptors",
   "description": "Low-level HTTP/HTTPS/XHR/fetch request interception library.",
-  "version": "0.34.1",
+  "version": "0.34.3",
   "main": "./lib/node/index.js",
   "module": "./lib/node/index.mjs",
   "types": "./lib/node/index.d.ts",
@@ -117,6 +117,7 @@
     "@playwright/test": "^1.37.1",
     "@types/cors": "^2.8.12",
     "@types/express": "^4.17.13",
+    "@types/express-fileupload": "^1.5.0",
     "@types/express-rate-limit": "^6.0.0",
     "@types/follow-redirects": "^1.14.1",
     "@types/jest": "^27.0.3",
@@ -132,6 +133,7 @@
     "cz-conventional-changelog": "3.3.0",
     "engine.io-parser": "^5.2.1",
     "express": "^4.17.3",
+    "express-fileupload": "^1.5.1",
     "express-rate-limit": "^6.3.0",
     "follow-redirects": "^1.15.1",
     "got": "^11.8.3",

package/src/interceptors/ClientRequest/utils/normalizeClientRequestArgs.test.ts

@@ -186,7 +186,9 @@ it('handles [URL, RequestOptions, callback] input', () => {
   expect(url.href).toEqual('https://mswjs.io/resource')
 
   // Options must be preserved.
-  expect(options).toEqual<RequestOptions>({
+  // `urlToHttpOptions` from `node:url` generates additional
+  // ClientRequest options, some of which are not legally allowed.
+  expect(options).toMatchObject<RequestOptions>({
     agent: false,
     _defaultAgent: httpsGlobalAgent,
     protocol: url.protocol,
@@ -194,8 +196,6 @@ it('handles [URL, RequestOptions, callback] input', () => {
     headers: {
       'Content-Type': 'text/plain',
     },
-
-    host: url.host,
     hostname: url.hostname,
     path: url.pathname,
   })
@@ -214,7 +214,7 @@ it('handles [URL, RequestOptions] where options have custom "hostname"', () => {
   ])
   expect(url.href).toBe('http://host-from-options.com/path-from-url')
   expect(options).toMatchObject({
-    host: 'host-from-options.com',
+    hostname: 'host-from-options.com',
     path: '/path-from-url',
   })
 })
@@ -230,8 +230,8 @@ it('handles [URL, RequestOptions] where options contain "host" and "path" and "p
   ])
   // Must remove the query string since it's not specified in "options.path"
   expect(url.href).toBe('http://host-from-options.com:1234/path-from-options')
-  expect(options).toMatchObject({
-    host: 'host-from-options.com:1234',
+  expect(options).toMatchObject<RequestOptions>({
+    hostname: 'host-from-options.com',
     path: '/path-from-options',
     port: 1234,
   })
@@ -245,8 +245,8 @@ it('handles [URL, RequestOptions] where options contain "path" with query string
     },
   ])
   expect(url.href).toBe('http://example.com/path-from-options?foo=bar&baz=xyz')
-  expect(options).toMatchObject({
-    host: 'example.com',
+  expect(options).toMatchObject<RequestOptions>({
+    hostname: 'example.com',
     path: '/path-from-options?foo=bar&baz=xyz',
   })
 })
@@ -399,7 +399,6 @@ it('merges URL-based RequestOptions with the custom RequestOptions', () => {
 
   // Other options must be inferred from the URL.
   expect(options.protocol).toEqual(url.protocol)
-  expect(options.host).toEqual(url.host)
   expect(options.hostname).toEqual(url.hostname)
   expect(options.path).toEqual(url.pathname)
 })
@@ -414,7 +413,6 @@ it('respects custom "options.path" over URL path', () => {
 
   expect(url.href).toBe('http://example.com/path-from-options')
   expect(options.protocol).toBe('http:')
-  expect(options.host).toBe('example.com')
   expect(options.hostname).toBe('example.com')
   expect(options.path).toBe('/path-from-options')
 })
@@ -430,20 +428,20 @@ it('respects custom "options.path" over URL path with query string', () => {
   // Must replace both the path and the query string.
   expect(url.href).toBe('http://example.com/path-from-options')
   expect(options.protocol).toBe('http:')
-  expect(options.host).toBe('example.com')
   expect(options.hostname).toBe('example.com')
   expect(options.path).toBe('/path-from-options')
 })
 
 it('preserves URL query string', () => {
   const [url, options] = normalizeClientRequestArgs('http:', [
-    new URL('http://example.com/resource?a=b&c=d'),
+    new URL('http://example.com:8080/resource?a=b&c=d'),
   ])
 
-  expect(url.href).toBe('http://example.com/resource?a=b&c=d')
+  expect(url.href).toBe('http://example.com:8080/resource?a=b&c=d')
   expect(options.protocol).toBe('http:')
-  expect(options.host).toBe('example.com')
+  // expect(options.host).toBe('example.com:8080')
   expect(options.hostname).toBe('example.com')
   // Query string is a part of the options path.
   expect(options.path).toBe('/resource?a=b&c=d')
+  expect(options.port).toBe(8080)
 })

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

@@ -1,3 +1,4 @@
+import { urlToHttpOptions } from 'node:url'
 import {
   Agent as HttpAgent,
   globalAgent as httpGlobalAgent,
@@ -20,7 +21,6 @@ import {
   parse as parseUrl,
 } from 'node:url'
 import { Logger } from '@open-draft/logger'
-import { getRequestOptionsByUrl } from '../../../utils/getRequestOptionsByUrl'
 import {
   ResolvedRequestOptions,
   getUrlByRequestOptions,
@@ -47,12 +47,12 @@ function resolveRequestOptions(
   // without any `RequestOptions` or callback.
   if (typeof args[1] === 'undefined' || typeof args[1] === 'function') {
     logger.info('request options not provided, deriving from the url', url)
-    return getRequestOptionsByUrl(url)
+    return urlToHttpOptions(url)
   }
 
   if (args[1]) {
     logger.info('has custom RequestOptions!', args[1])
-    const requestOptionsFromUrl = getRequestOptionsByUrl(url)
+    const requestOptionsFromUrl = urlToHttpOptions(url)
 
     logger.info('derived RequestOptions from the URL:', requestOptionsFromUrl)
 
@@ -103,7 +103,7 @@ function resolveCallback(
 export type NormalizedClientRequestArgs = [
   url: URL,
   options: ResolvedRequestOptions,
-  callback?: HttpRequestCallback,
+  callback?: HttpRequestCallback
 ]
 
 /**
@@ -137,7 +137,7 @@ export function normalizeClientRequestArgs(
     url = new URL(args[0])
     logger.info('created a url:', url)
 
-    const requestOptionsFromUrl = getRequestOptionsByUrl(url)
+    const requestOptionsFromUrl = urlToHttpOptions(url)
     logger.info('request options from url:', requestOptionsFromUrl)
 
     options = resolveRequestOptions(args, url)
@@ -200,17 +200,17 @@ export function normalizeClientRequestArgs(
     return args[1] === undefined
       ? normalizeClientRequestArgs(defaultProtocol, [resolvedUrl])
       : typeof args[1] === 'function'
-        ? normalizeClientRequestArgs(defaultProtocol, [resolvedUrl, args[1]])
-        : normalizeClientRequestArgs(defaultProtocol, [
-            resolvedUrl,
-            args[1],
-            args[2],
-          ])
+      ? normalizeClientRequestArgs(defaultProtocol, [resolvedUrl, args[1]])
+      : normalizeClientRequestArgs(defaultProtocol, [
+          resolvedUrl,
+          args[1],
+          args[2],
+        ])
   }
   // Handle a given "RequestOptions" object as-is
   // and derive the URL instance from it.
   else if (isObject(args[0])) {
-    options = { ... args[0] as any }
+    options = { ...(args[0] as any) }
     logger.info('first argument is RequestOptions:', options)
 
     // When handling a "RequestOptions" object without an explicit "protocol",

package/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts

@@ -14,9 +14,11 @@ import { parseJson } from '../../utils/parseJson'
 import { createResponse } from './utils/createResponse'
 import { INTERNAL_REQUEST_ID_HEADER_NAME } from '../../Interceptor'
 import { createRequestId } from '../../createRequestId'
+import { getBodyByteLength } from './utils/getBodyByteLength'
 
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const kIsRequestHandled = Symbol('kIsRequestHandled')
 const IS_NODE = isNodeProcess()
+const kFetchRequest = Symbol('kFetchRequest')
 
 /**
  * An `XMLHttpRequest` instance controller that allows us
@@ -40,17 +42,25 @@ export class XMLHttpRequestController {
       request: Request
       requestId: string
     }
-  ) => void
+  ) => void;
 
+  [kIsRequestHandled]: boolean;
+  [kFetchRequest]?: Request
   private method: string = 'GET'
   private url: URL = null as any
   private requestHeaders: Headers
-  private requestBody?: XMLHttpRequestBodyInit | Document | null
   private responseBuffer: Uint8Array
   private events: Map<keyof XMLHttpRequestEventTargetEventMap, Array<Function>>
+  private uploadEvents: Map<
+    keyof XMLHttpRequestEventTargetEventMap,
+    Array<Function>
+  >
 
   constructor(readonly initialRequest: XMLHttpRequest, public logger: Logger) {
+    this[kIsRequestHandled] = false
+
     this.events = new Map()
+    this.uploadEvents = new Map()
     this.requestId = createRequestId()
     this.requestHeaders = new Headers()
     this.responseBuffer = new Uint8Array()
@@ -123,11 +133,6 @@ export class XMLHttpRequestController {
               body?: XMLHttpRequestBodyInit | Document | null
             ]
 
-            if (body != null) {
-              this.requestBody =
-                typeof body === 'string' ? encodeBuffer(body) : body
-            }
-
             this.request.addEventListener('load', () => {
               if (typeof this.onResponse !== 'undefined') {
                 // Create a Fetch API Response representation of whichever
@@ -146,15 +151,20 @@ export class XMLHttpRequestController {
                 // Notify the consumer about the response.
                 this.onResponse.call(this, {
                   response: fetchResponse,
-                  isMockedResponse: IS_MOCKED_RESPONSE in this.request,
+                  isMockedResponse: this[kIsRequestHandled],
                   request: fetchRequest,
                   requestId: this.requestId!,
                 })
               }
             })
 
+            const requestBody =
+              typeof body === 'string' ? encodeBuffer(body) : body
+
             // Delegate request handling to the consumer.
-            const fetchRequest = this.toFetchApiRequest()
+            const fetchRequest = this.toFetchApiRequest(requestBody)
+            this[kFetchRequest] = fetchRequest
+
             const onceRequestSettled =
               this.onRequest?.call(this, {
                 request: fetchRequest,
@@ -162,10 +172,8 @@ export class XMLHttpRequestController {
               }) || Promise.resolve()
 
             onceRequestSettled.finally(() => {
-              // If the consumer didn't handle the request perform it as-is.
-              // Note that the request may not yet be DONE and may, in fact,
-              // be LOADING while the "respondWith" method does its magic.
-              if (this.request.readyState < this.request.LOADING) {
+              // 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
@@ -200,6 +208,49 @@ export class XMLHttpRequestController {
         }
       },
     })
+
+    /**
+     * Proxy the `.upload` property to gather the event listeners/callbacks.
+     */
+    define(
+      this.request,
+      'upload',
+      createProxy(this.request.upload, {
+        setProperty: ([propertyName, nextValue], invoke) => {
+          switch (propertyName) {
+            case 'onloadstart':
+            case 'onprogress':
+            case 'onaboart':
+            case 'onerror':
+            case 'onload':
+            case 'ontimeout':
+            case 'onloadend': {
+              const eventName = propertyName.slice(
+                2
+              ) as keyof XMLHttpRequestEventTargetEventMap
+
+              this.registerUploadEvent(eventName, nextValue as Function)
+            }
+          }
+
+          return invoke()
+        },
+        methodCall: ([methodName, args], invoke) => {
+          switch (methodName) {
+            case 'addEventListener': {
+              const [eventName, listener] = args as [
+                keyof XMLHttpRequestEventTargetEventMap,
+                Function
+              ]
+              this.registerUploadEvent(eventName, listener)
+              this.logger.info('upload.addEventListener', eventName, listener)
+
+              return invoke()
+            }
+          }
+        },
+      })
+    )
   }
 
   private registerEvent(
@@ -213,23 +264,64 @@ export class XMLHttpRequestController {
     this.logger.info('registered event "%s"', eventName, listener)
   }
 
+  private registerUploadEvent(
+    eventName: keyof XMLHttpRequestEventTargetEventMap,
+    listener: Function
+  ): void {
+    const prevEvents = this.uploadEvents.get(eventName) || []
+    const nextEvents = prevEvents.concat(listener)
+    this.uploadEvents.set(eventName, nextEvents)
+
+    this.logger.info('registered upload event "%s"', eventName, listener)
+  }
+
   /**
    * Responds to the current request with the given
    * Fetch API `Response` instance.
    */
-  public respondWith(response: Response): void {
-    this.logger.info(
-      'responding with a mocked response: %d %s',
-      response.status,
-      response.statusText
-    )
-
+  public async respondWith(response: Response): Promise<void> {
     /**
      * @note Since `XMLHttpRequestController` delegates the handling of the responses
      * to the "load" event listener that doesn't distinguish between the mocked and original
      * responses, mark the request that had a mocked response with a corresponding symbol.
+     *
+     * Mark this request as having a mocked response immediately since
+     * calculating request/response total body length is asynchronous.
      */
-    define(this.request, IS_MOCKED_RESPONSE, true)
+    this[kIsRequestHandled] = true
+
+    /**
+     * Dispatch request upload events for requests with a body.
+     * @see https://github.com/mswjs/interceptors/issues/573
+     */
+    if (this[kFetchRequest]) {
+      const totalRequestBodyLength = await getBodyByteLength(
+        this[kFetchRequest].clone()
+      )
+
+      this.trigger('loadstart', this.request.upload, {
+        loaded: 0,
+        total: totalRequestBodyLength,
+      })
+      this.trigger('progress', this.request.upload, {
+        loaded: totalRequestBodyLength,
+        total: totalRequestBodyLength,
+      })
+      this.trigger('load', this.request.upload, {
+        loaded: totalRequestBodyLength,
+        total: totalRequestBodyLength,
+      })
+      this.trigger('loadend', this.request.upload, {
+        loaded: totalRequestBodyLength,
+        total: totalRequestBodyLength,
+      })
+    }
+
+    this.logger.info(
+      'responding with a mocked response: %d %s',
+      response.status,
+      response.statusText
+    )
 
     define(this.request, 'status', response.status)
     define(this.request, 'statusText', response.statusText)
@@ -303,16 +395,11 @@ export class XMLHttpRequestController {
       },
     })
 
-    const totalResponseBodyLength = response.headers.has('Content-Length')
-      ? Number(response.headers.get('Content-Length'))
-      : /**
-         * @todo Infer the response body length from the response body.
-         */
-        undefined
+    const totalResponseBodyLength = await getBodyByteLength(response.clone())
 
     this.logger.info('calculated response body length', totalResponseBodyLength)
 
-    this.trigger('loadstart', {
+    this.trigger('loadstart', this.request, {
       loaded: 0,
       total: totalResponseBodyLength,
     })
@@ -325,12 +412,12 @@ export class XMLHttpRequestController {
 
       this.setReadyState(this.request.DONE)
 
-      this.trigger('load', {
+      this.trigger('load', this.request, {
         loaded: this.responseBuffer.byteLength,
         total: totalResponseBodyLength,
       })
 
-      this.trigger('loadend', {
+      this.trigger('loadend', this.request, {
         loaded: this.responseBuffer.byteLength,
         total: totalResponseBodyLength,
       })
@@ -354,7 +441,7 @@ export class XMLHttpRequestController {
           this.logger.info('read response body chunk:', value)
           this.responseBuffer = concatArrayBuffer(this.responseBuffer, value)
 
-          this.trigger('progress', {
+          this.trigger('progress', this.request, {
             loaded: this.responseBuffer.byteLength,
             total: totalResponseBodyLength,
           })
@@ -482,11 +569,16 @@ export class XMLHttpRequestController {
   }
 
   public errorWith(error?: Error): void {
+    /**
+     * @note Mark this request as handled even if it received a mock error.
+     * This prevents the controller from trying to perform this request as-is.
+     */
+    this[kIsRequestHandled] = true
     this.logger.info('responding with an error')
 
     this.setReadyState(this.request.DONE)
-    this.trigger('error')
-    this.trigger('loadend')
+    this.trigger('error', this.request)
+    this.trigger('loadend', this.request)
   }
 
   /**
@@ -511,7 +603,7 @@ export class XMLHttpRequestController {
     if (nextReadyState !== this.request.UNSENT) {
       this.logger.info('triggerring "readystatechange" event...')
 
-      this.trigger('readystatechange')
+      this.trigger('readystatechange', this.request)
     }
   }
 
@@ -522,20 +614,27 @@ export class XMLHttpRequestController {
     EventName extends keyof (XMLHttpRequestEventTargetEventMap & {
       readystatechange: ProgressEvent<XMLHttpRequestEventTarget>
     })
-  >(eventName: EventName, options?: ProgressEventInit): void {
-    const callback = this.request[`on${eventName}`]
-    const event = createEvent(this.request, eventName, options)
+  >(
+    eventName: EventName,
+    target: XMLHttpRequest | XMLHttpRequestUpload,
+    options?: ProgressEventInit
+  ): void {
+    const callback = (target as XMLHttpRequest)[`on${eventName}`]
+    const event = createEvent(target, eventName, options)
 
     this.logger.info('trigger "%s"', eventName, options || '')
 
     // Invoke direct callbacks.
     if (typeof callback === 'function') {
       this.logger.info('found a direct "%s" callback, calling...', eventName)
-      callback.call(this.request, event)
+      callback.call(target as XMLHttpRequest, event)
     }
 
     // Invoke event listeners.
-    for (const [registeredEventName, listeners] of this.events) {
+    const events =
+      target instanceof XMLHttpRequestUpload ? this.uploadEvents : this.events
+
+    for (const [registeredEventName, listeners] of events) {
       if (registeredEventName === eventName) {
         this.logger.info(
           'found %d listener(s) for "%s" event, calling...',
@@ -543,7 +642,7 @@ export class XMLHttpRequestController {
           eventName
         )
 
-        listeners.forEach((listener) => listener.call(this.request, event))
+        listeners.forEach((listener) => listener.call(target, event))
       }
     }
   }
@@ -551,9 +650,16 @@ export class XMLHttpRequestController {
   /**
    * Converts this `XMLHttpRequest` instance into a Fetch API `Request` instance.
    */
-  public toFetchApiRequest(): Request {
+  private toFetchApiRequest(
+    body: XMLHttpRequestBodyInit | Document | null | undefined
+  ): Request {
     this.logger.info('converting request to a Fetch API Request...')
 
+    // If the `Document` is used as the body of this XMLHttpRequest,
+    // set its inner text as the Fetch API Request body.
+    const resolvedBody =
+      body instanceof Document ? body.documentElement.innerText : body
+
     const fetchRequest = new Request(this.url.href, {
       method: this.method,
       headers: this.requestHeaders,
@@ -563,7 +669,7 @@ export class XMLHttpRequestController {
       credentials: this.request.withCredentials ? 'include' : 'same-origin',
       body: ['GET', 'HEAD'].includes(this.method.toUpperCase())
         ? null
-        : (this.requestBody as BodyInit),
+        : resolvedBody,
     })
 
     const proxyHeaders = createProxy(fetchRequest.headers, {

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -66,8 +66,8 @@ export function createXMLHttpRequestProxy({
           requestId,
           controller,
           emitter,
-          onResponse: (response) => {
-            this.respondWith(response)
+          onResponse: async (response) => {
+            await this.respondWith(response)
           },
           onRequestError: () => {
             this.errorWith(new TypeError('Network error'))

package/src/interceptors/XMLHttpRequest/polyfills/EventPolyfill.ts

@@ -1,8 +1,8 @@
 export class EventPolyfill implements Event {
-  readonly AT_TARGET: number = 0
-  readonly BUBBLING_PHASE: number = 0
-  readonly CAPTURING_PHASE: number = 0
-  readonly NONE: number = 0
+  readonly NONE = 0
+  readonly CAPTURING_PHASE = 1
+  readonly AT_TARGET = 2
+  readonly BUBBLING_PHASE = 3
 
   public type: string = ''
   public srcElement: EventTarget | null = null

package/src/interceptors/XMLHttpRequest/utils/createEvent.ts

@@ -4,7 +4,7 @@ import { ProgressEventPolyfill } from '../polyfills/ProgressEventPolyfill'
 const SUPPORTS_PROGRESS_EVENT = typeof ProgressEvent !== 'undefined'
 
 export function createEvent(
-  target: XMLHttpRequest,
+  target: XMLHttpRequest | XMLHttpRequestUpload,
   type: string,
   init?: ProgressEventInit
 ): EventPolyfill {