@depup/mswjs__interceptors 0.41.3-depup.0

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -0,0 +1,121 @@
+import type { Logger } from '@open-draft/logger'
+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
+  logger: Logger
+}
+
+/**
+ * Create a proxied `XMLHttpRequest` class.
+ * The proxied class establishes spies on certain methods,
+ * allowing us to intercept requests and respond to them.
+ */
+export function createXMLHttpRequestProxy({
+  emitter,
+  logger,
+}: XMLHttpRequestProxyOptions) {
+  const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
+    construct(target, args, newTarget) {
+      logger.info('constructed new XMLHttpRequest')
+
+      const originalRequest = Reflect.construct(
+        target,
+        args,
+        newTarget
+      ) as XMLHttpRequest
+
+      /**
+       * @note Forward prototype descriptors onto the proxied object.
+       * XMLHttpRequest is implemented in JSDOM in a way that assigns
+       * a bunch of descriptors, like "set responseType()" on the prototype.
+       * With this propagation, we make sure that those descriptors trigger
+       * when the user operates with the proxied request instance.
+       */
+      const prototypeDescriptors = Object.getOwnPropertyDescriptors(
+        target.prototype
+      )
+      for (const propertyName in prototypeDescriptors) {
+        Reflect.defineProperty(
+          originalRequest,
+          propertyName,
+          prototypeDescriptors[propertyName]
+        )
+      }
+
+      const xhrRequestController = new XMLHttpRequestController(
+        originalRequest,
+        logger
+      )
+
+      xhrRequestController.onRequest = async function ({ request, requestId }) {
+        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...')
+
+        this.logger.info(
+          'emitting the "request" event for %s listener(s)...',
+          emitter.listenerCount('request')
+        )
+
+        await handleRequest({
+          request,
+          requestId,
+          controller,
+          emitter,
+        })
+      }
+
+      xhrRequestController.onResponse = async function ({
+        response,
+        isMockedResponse,
+        request,
+        requestId,
+      }) {
+        this.logger.info(
+          'emitting the "response" event for %s listener(s)...',
+          emitter.listenerCount('response')
+        )
+
+        emitter.emit('response', {
+          response,
+          isMockedResponse,
+          request,
+          requestId,
+        })
+      }
+
+      // Return the proxied request from the controller
+      // so that the controller can react to the consumer's interactions
+      // with this request (opening/sending/etc).
+      return xhrRequestController.request
+    },
+  })
+
+  return XMLHttpRequestProxy
+}

package/src/interceptors/XMLHttpRequest/index.ts

@@ -0,0 +1,61 @@
+import { invariant } from 'outvariant'
+import { Emitter } from 'strict-event-emitter'
+import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
+import { Interceptor } from '../../Interceptor'
+import { createXMLHttpRequestProxy } from './XMLHttpRequestProxy'
+import { hasConfigurableGlobal } from '../../utils/hasConfigurableGlobal'
+
+export type XMLHttpRequestEmitter = Emitter<HttpRequestEventMap>
+
+export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap> {
+  static interceptorSymbol = Symbol('xhr')
+
+  constructor() {
+    super(XMLHttpRequestInterceptor.interceptorSymbol)
+  }
+
+  protected checkEnvironment() {
+    return hasConfigurableGlobal('XMLHttpRequest')
+  }
+
+  protected setup() {
+    const logger = this.logger.extend('setup')
+
+    logger.info('patching "XMLHttpRequest" module...')
+
+    const PureXMLHttpRequest = globalThis.XMLHttpRequest
+
+    invariant(
+      !(PureXMLHttpRequest as any)[IS_PATCHED_MODULE],
+      'Failed to patch the "XMLHttpRequest" module: already patched.'
+    )
+
+    globalThis.XMLHttpRequest = createXMLHttpRequestProxy({
+      emitter: this.emitter,
+      logger: this.logger,
+    })
+
+    logger.info(
+      'native "XMLHttpRequest" module patched!',
+      globalThis.XMLHttpRequest.name
+    )
+
+    Object.defineProperty(globalThis.XMLHttpRequest, IS_PATCHED_MODULE, {
+      enumerable: true,
+      configurable: true,
+      value: true,
+    })
+
+    this.subscriptions.push(() => {
+      Object.defineProperty(globalThis.XMLHttpRequest, IS_PATCHED_MODULE, {
+        value: undefined,
+      })
+
+      globalThis.XMLHttpRequest = PureXMLHttpRequest
+      logger.info(
+        'native "XMLHttpRequest" module restored!',
+        globalThis.XMLHttpRequest.name
+      )
+    })
+  }
+}

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

@@ -0,0 +1,51 @@
+export class EventPolyfill implements Event {
+  readonly NONE = 0
+  readonly CAPTURING_PHASE = 1
+  readonly AT_TARGET = 2
+  readonly BUBBLING_PHASE = 3
+
+  public type: string = ''
+  public srcElement: EventTarget | null = null
+  public target: EventTarget | null
+  public currentTarget: EventTarget | null = null
+  public eventPhase: number = 0
+  public timeStamp: number
+  public isTrusted: boolean = true
+  public composed: boolean = false
+  public cancelable: boolean = true
+  public defaultPrevented: boolean = false
+  public bubbles: boolean = true
+  public lengthComputable: boolean = true
+  public loaded: number = 0
+  public total: number = 0
+
+  cancelBubble: boolean = false
+  returnValue: boolean = true
+
+  constructor(
+    type: string,
+    options?: { target: EventTarget; currentTarget: EventTarget }
+  ) {
+    this.type = type
+    this.target = options?.target || null
+    this.currentTarget = options?.currentTarget || null
+    this.timeStamp = Date.now()
+  }
+
+  public composedPath(): EventTarget[] {
+    return []
+  }
+
+  public initEvent(type: string, bubbles?: boolean, cancelable?: boolean) {
+    this.type = type
+    this.bubbles = !!bubbles
+    this.cancelable = !!cancelable
+  }
+
+  public preventDefault() {
+    this.defaultPrevented = true
+  }
+
+  public stopPropagation() {}
+  public stopImmediatePropagation() {}
+}

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

@@ -0,0 +1,17 @@
+import { EventPolyfill } from './EventPolyfill'
+
+export class ProgressEventPolyfill extends EventPolyfill {
+  readonly lengthComputable: boolean
+  readonly composed: boolean
+  readonly loaded: number
+  readonly total: number
+
+  constructor(type: string, init?: ProgressEventInit) {
+    super(type)
+
+    this.lengthComputable = init?.lengthComputable || false
+    this.composed = init?.composed || false
+    this.loaded = init?.loaded || 0
+    this.total = init?.total || 0
+  }
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Concatenate two `Uint8Array` buffers.
+ */
+export function concatArrayBuffer(
+  left: Uint8Array,
+  right: Uint8Array
+): Uint8Array {
+  const result = new Uint8Array(left.byteLength + right.byteLength)
+  result.set(left, 0)
+  result.set(right, left.byteLength)
+  return result
+}

package/src/interceptors/XMLHttpRequest/utils/concateArrayBuffer.test.ts

@@ -0,0 +1,12 @@
+import { it, expect } from 'vitest'
+import { concatArrayBuffer } from './concatArrayBuffer'
+
+const encoder = new TextEncoder()
+
+it('concatenates two Uint8Array buffers', () => {
+  const result = concatArrayBuffer(
+    encoder.encode('hello'),
+    encoder.encode('world')
+  )
+  expect(result).toEqual(encoder.encode('helloworld'))
+})

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

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { it, expect } from 'vitest'
+import { createEvent } from './createEvent'
+import { EventPolyfill } from '../polyfills/EventPolyfill'
+
+const request = new XMLHttpRequest()
+request.open('POST', '/user')
+
+it('returns an EventPolyfill instance with the given target set', () => {
+  const event = createEvent(request, 'my-event')
+  const target = event.target as XMLHttpRequest
+
+  expect(event).toBeInstanceOf(EventPolyfill)
+  expect(target).toBeInstanceOf(XMLHttpRequest)
+})
+
+it('returns the ProgressEvent instance', () => {
+  const event = createEvent(request, 'load', {
+    loaded: 100,
+    total: 500,
+  })
+
+  expect(event).toBeInstanceOf(ProgressEvent)
+  expect(event.loaded).toBe(100)
+  expect(event.total).toBe(500)
+})

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

@@ -0,0 +1,41 @@
+import { EventPolyfill } from '../polyfills/EventPolyfill'
+import { ProgressEventPolyfill } from '../polyfills/ProgressEventPolyfill'
+
+const SUPPORTS_PROGRESS_EVENT = typeof ProgressEvent !== 'undefined'
+
+export function createEvent(
+  target: XMLHttpRequest | XMLHttpRequestUpload,
+  type: string,
+  init?: ProgressEventInit
+): EventPolyfill | ProgressEvent {
+  const progressEvents = [
+    'error',
+    'progress',
+    'loadstart',
+    'loadend',
+    'load',
+    'timeout',
+    'abort',
+  ]
+
+  /**
+   * `ProgressEvent` is not supported in React Native.
+   * @see https://github.com/mswjs/interceptors/issues/40
+   */
+  const ProgressEventClass = SUPPORTS_PROGRESS_EVENT
+    ? ProgressEvent
+    : ProgressEventPolyfill
+
+  const event = progressEvents.includes(type)
+    ? new ProgressEventClass(type, {
+        lengthComputable: true,
+        loaded: init?.loaded || 0,
+        total: init?.total || 0,
+      })
+    : new EventPolyfill(type, {
+        target,
+        currentTarget: target,
+      })
+
+  return event
+}

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

@@ -0,0 +1,49 @@
+import { FetchResponse } from '../../../utils/fetchUtils'
+
+/**
+ * Creates a Fetch API `Response` instance from the given
+ * `XMLHttpRequest` instance and a response body.
+ */
+export function createResponse(
+  request: XMLHttpRequest,
+  body: BodyInit | null
+): Response {
+  /**
+   * Handle XMLHttpRequest responses that must have null as the
+   * response body when represented using Fetch API Response.
+   * XMLHttpRequest response will always have an empty string
+   * as the "request.response" in those cases, resulting in an error
+   * when constructing a Response instance.
+   * @see https://github.com/mswjs/interceptors/issues/379
+   */
+  const responseBodyOrNull = FetchResponse.isResponseWithBody(request.status)
+    ? body
+    : null
+
+  return new FetchResponse(responseBodyOrNull, {
+    url: request.responseURL,
+    status: request.status,
+    statusText: request.statusText,
+    headers: createHeadersFromXMLHttpRequestHeaders(
+      request.getAllResponseHeaders()
+    ),
+  })
+}
+
+function createHeadersFromXMLHttpRequestHeaders(headersString: string): Headers {
+  const headers = new Headers()
+
+  const lines = headersString.split(/[\r\n]+/)
+  for (const line of lines) {
+    if (line.trim() === '') {
+      continue
+    }
+
+    const [name, ...parts] = line.split(': ')
+    const value = parts.join(': ')
+
+    headers.append(name, value)
+  }
+
+  return headers
+}

package/src/interceptors/XMLHttpRequest/utils/getBodyByteLength.test.ts

@@ -0,0 +1,164 @@
+// @vitest-environment node
+import { it, expect } from 'vitest'
+import { getBodyByteLength } from './getBodyByteLength'
+
+const url = 'http://localhost'
+
+it('returns explicit body length set in the "Content-Length" header', async () => {
+  await expect(
+    getBodyByteLength(new Request(url, { headers: { 'Content-Length': '10' } }))
+  ).resolves.toBe(10)
+
+  await expect(
+    getBodyByteLength(
+      new Response('hello', { headers: { 'Content-Length': '5' } })
+    )
+  ).resolves.toBe(5)
+})
+
+/**
+ * Request.
+ */
+
+it('returns 0 for a request with an empty body', async () => {
+  await expect(getBodyByteLength(new Request(url))).resolves.toBe(0)
+  await expect(
+    getBodyByteLength(new Request(url, { method: 'POST', body: null }))
+  ).resolves.toBe(0)
+  await expect(
+    getBodyByteLength(new Request(url, { method: 'POST', body: undefined }))
+  ).resolves.toBe(0)
+  await expect(
+    getBodyByteLength(new Request(url, { method: 'POST', body: '' }))
+  ).resolves.toBe(0)
+})
+
+it('calculates body length from the text request body', async () => {
+  await expect(
+    getBodyByteLength(
+      new Request(url, {
+        method: 'POST',
+        body: 'hello world',
+      })
+    )
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the URLSearchParams request body', async () => {
+  await expect(
+    getBodyByteLength(
+      new Request(url, {
+        method: 'POST',
+        body: new URLSearchParams([['hello', 'world']]),
+      })
+    )
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the Blob request body', async () => {
+  await expect(
+    getBodyByteLength(
+      new Request(url, {
+        method: 'POST',
+        body: new Blob(['hello world']),
+      })
+    )
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the ArrayBuffer request body', async () => {
+  await expect(
+    getBodyByteLength(
+      new Request(url, {
+        method: 'POST',
+        body: await new Blob(['hello world']).arrayBuffer(),
+      })
+    )
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the FormData request body', async () => {
+  const formData = new FormData()
+  formData.append('hello', 'world')
+
+  await expect(
+    getBodyByteLength(
+      new Request(url, {
+        method: 'POST',
+        body: formData,
+      })
+    )
+  ).resolves.toBe(129)
+})
+
+it('calculates body length from the ReadableStream request body', async () => {
+  const stream = new ReadableStream({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode('hello world'))
+      controller.close()
+    },
+  })
+
+  await expect(
+    getBodyByteLength(
+      new Request(url, {
+        method: 'POST',
+        body: stream,
+        // @ts-expect-error Undocumented required Undici property.
+        duplex: 'half',
+      })
+    )
+  ).resolves.toBe(11)
+})
+
+/**
+ * Response.
+ */
+it('returns 0 for a response with an empty body', async () => {
+  await expect(getBodyByteLength(new Response())).resolves.toBe(0)
+  await expect(getBodyByteLength(new Response(null))).resolves.toBe(0)
+  await expect(getBodyByteLength(new Response(undefined))).resolves.toBe(0)
+  await expect(getBodyByteLength(new Response(''))).resolves.toBe(0)
+})
+
+it('calculates body length from the text response body', async () => {
+  await expect(getBodyByteLength(new Response('hello world'))).resolves.toBe(11)
+})
+
+it('calculates body length from the URLSearchParams response body', async () => {
+  await expect(
+    getBodyByteLength(new Response(new URLSearchParams([['hello', 'world']])))
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the Blob response body', async () => {
+  await expect(
+    getBodyByteLength(new Response(new Blob(['hello world'])))
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the ArrayBuffer response body', async () => {
+  await expect(
+    getBodyByteLength(
+      new Response(await new Blob(['hello world']).arrayBuffer())
+    )
+  ).resolves.toBe(11)
+})
+
+it('calculates body length from the FormData response body', async () => {
+  const formData = new FormData()
+  formData.append('hello', 'world')
+
+  await expect(getBodyByteLength(new Response(formData))).resolves.toBe(129)
+})
+
+it('calculates body length from the ReadableStream response body', async () => {
+  const stream = new ReadableStream({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode('hello world'))
+      controller.close()
+    },
+  })
+
+  await expect(getBodyByteLength(new Response(stream))).resolves.toBe(11)
+})

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

@@ -0,0 +1,16 @@
+/**
+ * Return a total byte length of the given request/response body.
+ * If the `Content-Length` header is present, it will be used as the byte length.
+ */
+export async function getBodyByteLength(
+  input: Request | Response
+): Promise<number> {
+  const explicitContentLength = input.headers.get('content-length')
+
+  if (explicitContentLength != null && explicitContentLength !== '') {
+    return Number(explicitContentLength)
+  }
+
+  const buffer = await input.arrayBuffer()
+  return buffer.byteLength
+}

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

@@ -0,0 +1,14 @@
+export function isDomParserSupportedType(
+  type: string
+): type is DOMParserSupportedType {
+  const supportedTypes: Array<DOMParserSupportedType> = [
+    'application/xhtml+xml',
+    'application/xml',
+    'image/svg+xml',
+    'text/html',
+    'text/xml',
+  ]
+  return supportedTypes.some((supportedType) => {
+    return type.startsWith(supportedType)
+  })
+}