@mswjs/interceptors 0.17.6 → 0.18.0

package/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts

@@ -4,21 +4,21 @@
  */
 import type { Debugger } from 'debug'
 import { until } from '@open-draft/until'
-import {
-  Headers,
-  stringToHeaders,
-  objectToHeaders,
-  headersToString,
-} from 'headers-polyfill'
+import { Headers, stringToHeaders, headersToString } from 'headers-polyfill'
 import { DOMParser } from '@xmldom/xmldom'
 import { parseJson } from '../../utils/parseJson'
-import { toIsoResponse } from '../../utils/toIsoResponse'
-import { bufferFrom } from './utils/bufferFrom'
 import { createEvent } from './utils/createEvent'
 import type { XMLHttpRequestEmitter } from '.'
-import { IsomorphicRequest } from '../../IsomorphicRequest'
-import { encodeBuffer } from '../../utils/bufferUtils'
-import { InteractiveIsomorphicRequest } from '../../InteractiveIsomorphicRequest'
+import {
+  encodeBuffer,
+  decodeBuffer,
+  toArrayBuffer,
+} from '../../utils/bufferUtils'
+import { createResponse } from './utils/createResponse'
+import { concatArrayBuffer } from './utils/concatArrayBuffer'
+import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
+import { uuidv4 } from '../../utils/uuid'
+import { createRequestWithCredentials } from '../../utils/RequestWithCredentials'
 
 type XMLHttpRequestEventHandler = (
   this: XMLHttpRequest,
@@ -55,6 +55,7 @@ export const createXMLHttpRequestOverride = (
   return class XMLHttpRequestOverride implements XMLHttpRequest {
     _requestHeaders: Headers
     _responseHeaders: Headers
+    _responseBuffer: Uint8Array
 
     // Collection of events modified by `addEventListener`/`removeEventListener` calls.
     _events: XMLHttpRequestEvent<InternalXMLHttpRequestEventTargetEventMap>[] =
@@ -85,10 +86,7 @@ export const createXMLHttpRequestOverride = (
     public user?: string
     public password?: string
     public async?: boolean
-    public response: any
-    public responseText: string
     public responseType: XMLHttpRequestResponseType
-    public responseXML: Document | null
     public responseURL: string
     public upload: XMLHttpRequestUpload
     public readyState: number
@@ -129,17 +127,15 @@ export const createXMLHttpRequestOverride = (
       this.method = 'GET'
       this.readyState = this.UNSENT
       this.withCredentials = false
-      this.status = 200
-      this.statusText = 'OK'
-      this.response = ''
+      this.status = 0
+      this.statusText = ''
       this.responseType = 'text'
-      this.responseText = ''
-      this.responseXML = null
       this.responseURL = ''
       this.upload = {} as any
       this.timeout = 0
 
       this._requestHeaders = new Headers()
+      this._responseBuffer = new Uint8Array()
       this._responseHeaders = new Headers()
     }
 
@@ -169,7 +165,6 @@ export const createXMLHttpRequestOverride = (
       this.log('trigger "%s" (%d)', eventName, this.readyState)
       this.log('resolve listener for event "%s"', eventName)
 
-      // @ts-expect-error XMLHttpRequest class has no index signature.
       const callback = this[`on${eventName}`] as XMLHttpRequestEventHandler
       callback?.call(this, createEvent(this, eventName, options))
 
@@ -191,12 +186,10 @@ export const createXMLHttpRequestOverride = (
       this.log('reset')
 
       this.setReadyState(this.UNSENT)
-      this.status = 200
-      this.statusText = 'OK'
-      this.response = null as any
-      this.responseText = null as any
-      this.responseXML = null as any
+      this.status = 0
+      this.statusText = ''
 
+      this._responseBuffer = new Uint8Array()
       this._requestHeaders = new Headers()
       this._responseHeaders = new Headers()
     }
@@ -228,12 +221,9 @@ export const createXMLHttpRequestOverride = (
 
     public send(data?: string | ArrayBuffer) {
       this.log('send %s %s', this.method, this.url)
-      let buffer: ArrayBuffer
-      if (typeof data === 'string') {
-        buffer = encodeBuffer(data)
-      } else {
-        buffer = data || new ArrayBuffer(0)
-      }
+
+      const requestBuffer: ArrayBuffer | undefined =
+        typeof data === 'string' ? encodeBuffer(data) : data
 
       let url: URL
 
@@ -249,34 +239,36 @@ export const createXMLHttpRequestOverride = (
       this.log('request headers', this._requestHeaders)
 
       // Create an intercepted request instance exposed to the request intercepting middleware.
-      const isomorphicRequest = new IsomorphicRequest(url, {
-        body: buffer,
+      const requestId = uuidv4()
+      const capturedRequest = createRequestWithCredentials(url, {
         method: this.method,
         headers: this._requestHeaders,
         credentials: this.withCredentials ? 'include' : 'omit',
+        body: requestBuffer,
       })
 
-      const interactiveIsomorphicRequest = new InteractiveIsomorphicRequest(
-        isomorphicRequest
-      )
+      const interactiveRequest = toInteractiveRequest(capturedRequest)
 
       this.log(
         'emitting the "request" event for %d listener(s)...',
         emitter.listenerCount('request')
       )
-      emitter.emit('request', interactiveIsomorphicRequest)
+      emitter.emit('request', interactiveRequest, requestId)
 
       this.log('awaiting mocked response...')
 
       Promise.resolve(
         until(async () => {
-          await emitter.untilIdle('request', ({ args: [request] }) => {
-            return request.id === interactiveIsomorphicRequest.id
-          })
+          await emitter.untilIdle(
+            'request',
+            ({ args: [, pendingRequestId] }) => {
+              return pendingRequestId === requestId
+            }
+          )
           this.log('all request listeners have been resolved!')
 
           const [mockedResponse] =
-            await interactiveIsomorphicRequest.respondWith.invoked()
+            await interactiveRequest.respondWith.invoked()
           this.log('event.respondWith called with:', mockedResponse)
 
           return mockedResponse
@@ -290,72 +282,108 @@ export const createXMLHttpRequestOverride = (
             middlewareException
           )
 
+          // Mark the request as complete.
+          this.setReadyState(this.DONE)
+
           // No way to propagate the actual error message.
           this.trigger('error')
-          this.abort()
+
+          // Emit the "loadend" event to notify that the request has settled.
+          // In this case, there's been an error with the request so
+          // we must not emit the "load" event.
+          this.trigger('loadend')
+
+          // Abort must not be called when request fails!
+          // this.abort()
 
           return
         }
 
+        // Forward request headers modified in the "request" listener.
+        this._requestHeaders = new Headers(capturedRequest.headers)
+
         // Return a mocked response, if provided in the middleware.
         if (mockedResponse) {
+          const responseClone = mockedResponse.clone()
           this.log('received mocked response', mockedResponse)
 
-          // Trigger a loadstart event to indicate the initialization of the fetch.
-          this.trigger('loadstart')
-
           this.status = mockedResponse.status ?? 200
           this.statusText = mockedResponse.statusText || 'OK'
-          this._responseHeaders = mockedResponse.headers
-            ? objectToHeaders(mockedResponse.headers)
-            : new Headers()
-
           this.log('set response status', this.status, this.statusText)
+
+          this._responseHeaders = new Headers(mockedResponse.headers || {})
           this.log('set response headers', this._responseHeaders)
 
+          this.log('response type', this.responseType)
+          this.responseURL = this.url
+
+          const totalLength = this._responseHeaders.has('Content-Length')
+            ? Number(this._responseHeaders.get('Content-Length'))
+            : undefined
+
+          // Trigger a loadstart event to indicate the initialization of the fetch.
+          this.trigger('loadstart', { loaded: 0, total: totalLength })
+
           // Mark that response headers has been received
           // and trigger a ready state event to reflect received headers
-          // in a custom `onreadystatechange` callback.
+          // in a custom "onreadystatechange" callback.
           this.setReadyState(this.HEADERS_RECEIVED)
 
-          this.log('response type', this.responseType)
-          this.response = this.getResponseBody(mockedResponse.body)
-          this.responseURL = this.url
-          this.responseText = mockedResponse.body || ''
-          this.responseXML = this.getResponseXML()
+          this.setReadyState(this.LOADING)
 
-          this.log('set response body', this.response)
-
-          if (mockedResponse.body && this.response) {
-            this.setReadyState(this.LOADING)
+          const closeResponseStream = () => {
+            /**
+             * Explicitly mark the request as done so its response never hangs.
+             * @see https://github.com/mswjs/interceptors/issues/13
+             */
+            this.setReadyState(this.DONE)
 
-            // Presence of the mocked response implies a response body (not null).
-            // Presence of the coerced `this.response` implies the mocked body is valid.
-            const bodyBuffer = bufferFrom(mockedResponse.body)
+            // Always trigger the "load" event because at this point
+            // the request has been performed successfully.
+            this.trigger('load', {
+              loaded: this._responseBuffer.byteLength,
+              total: totalLength,
+            })
 
-            // Trigger a progress event based on the mocked response body.
-            this.trigger('progress', {
-              loaded: bodyBuffer.length,
-              total: bodyBuffer.length,
+            // Trigger a loadend event to indicate the fetch has completed.
+            this.trigger('loadend', {
+              loaded: this._responseBuffer.byteLength,
+              total: totalLength,
             })
+
+            emitter.emit('response', responseClone, capturedRequest, requestId)
           }
 
-          /**
-           * Explicitly mark the request as done so its response never hangs.
-           * @see https://github.com/mswjs/interceptors/issues/13
-           */
-          this.setReadyState(this.DONE)
+          if (mockedResponse.body) {
+            const reader = mockedResponse.body.getReader()
 
-          // Trigger a load event to indicate the fetch has succeeded.
-          this.trigger('load')
-          // Trigger a loadend event to indicate the fetch has completed.
-          this.trigger('loadend')
+            const readNextChunk = async (): Promise<void> => {
+              const { value, done } = await reader.read()
 
-          emitter.emit(
-            'response',
-            isomorphicRequest,
-            toIsoResponse(mockedResponse)
-          )
+              if (done) {
+                closeResponseStream()
+                return
+              }
+
+              if (value) {
+                this._responseBuffer = concatArrayBuffer(
+                  this._responseBuffer,
+                  value
+                )
+
+                this.trigger('progress', {
+                  loaded: this._responseBuffer.byteLength,
+                  total: totalLength,
+                })
+              }
+
+              readNextChunk()
+            }
+
+            readNextChunk()
+          } else {
+            closeResponseStream()
+          }
         } else {
           this.log('no mocked response received!')
 
@@ -371,72 +399,148 @@ export const createXMLHttpRequestOverride = (
             this.password
           )
 
-          // Reflect a successful state of the original request
-          // on the patched instance.
-          originalRequest.addEventListener('load', () => {
-            this.log('original "onload"')
+          originalRequest.addEventListener('readystatechange', () => {
+            // Forward the original response headers to the patched instance
+            // immediately as they are received.
+            if (
+              originalRequest.readyState === XMLHttpRequest.HEADERS_RECEIVED
+            ) {
+              const responseHeaders = originalRequest.getAllResponseHeaders()
+              this.log('original response headers:\n', responseHeaders)
+
+              this._responseHeaders = stringToHeaders(responseHeaders)
+              this.log(
+                'original response headers (normalized)',
+                this._responseHeaders
+              )
+            }
+          })
+
+          originalRequest.addEventListener('loadstart', () => {
+            // Forward the response type to the patched instance immediately.
+            // Response type affects how response reading properties are resolved.
+            this.responseType = originalRequest.responseType
+          })
+
+          originalRequest.addEventListener('progress', () => {
+            this._responseBuffer = concatArrayBuffer(
+              this._responseBuffer,
+              encodeBuffer(originalRequest.responseText)
+            )
+          })
+
+          // Update the patched instance on the "loadend" event
+          // because it fires when the request settles (succeeds/errors).
+          originalRequest.addEventListener('loadend', () => {
+            this.log('original "loadend"')
 
             this.status = originalRequest.status
             this.statusText = originalRequest.statusText
             this.responseURL = originalRequest.responseURL
-            this.responseType = originalRequest.responseType
-            this.response = originalRequest.response
-            this.responseText = originalRequest.responseText
-            this.responseXML = originalRequest.responseXML
-
-            this.log('set mock request readyState to DONE')
+            this.log('received original response', this.status, this.statusText)
 
             // Explicitly mark the mocked request instance as done
             // so the response never hangs.
-            /**
-             * @note `readystatechange` listener is called TWICE
-             * in the case of unhandled request.
-             */
             this.setReadyState(this.DONE)
+            this.log('set mock request readyState to DONE')
 
-            this.log('received original response', this.status, this.statusText)
             this.log('original response body:', this.response)
+            this.log('original response finished!')
 
-            const responseHeaders = originalRequest.getAllResponseHeaders()
-            this.log('original response headers:\n', responseHeaders)
-
-            this._responseHeaders = stringToHeaders(responseHeaders)
-            this.log(
-              'original response headers (normalized)',
-              this._responseHeaders
+            emitter.emit(
+              'response',
+              createResponse(originalRequest, this._responseBuffer),
+              capturedRequest,
+              requestId
             )
-
-            this.log('original response finished')
-
-            emitter.emit('response', isomorphicRequest, {
-              status: originalRequest.status,
-              statusText: originalRequest.statusText,
-              headers: this._responseHeaders,
-              body: originalRequest.response,
-            })
           })
 
+          this.propagateHeaders(originalRequest, this._requestHeaders)
+
           // Assign callbacks and event listeners from the intercepted XHR instance
           // to the original XHR instance.
           this.propagateCallbacks(originalRequest)
           this.propagateListeners(originalRequest)
-          this.propagateHeaders(originalRequest, this._requestHeaders)
 
           if (this.async) {
             originalRequest.timeout = this.timeout
           }
 
+          /**
+           * @note Set the intercepted request ID on the original request
+           * so that if it triggers any other interceptors, they don't attempt
+           * to process it once again. This happens when bypassing XMLHttpRequest
+           * because it's polyfilled with "http.ClientRequest" in JSDOM.
+           */
+          originalRequest.setRequestHeader('X-Request-Id', requestId)
+
           this.log('send', data)
           originalRequest.send(data)
         }
       })
     }
 
+    public get responseText(): string {
+      this.log('responseText()')
+
+      const encoding = this.getResponseHeader('Content-Encoding') as
+        | BufferEncoding
+        | undefined
+
+      return decodeBuffer(this._responseBuffer, encoding || undefined)
+    }
+
+    public get response(): unknown {
+      switch (this.responseType) {
+        case 'json': {
+          this.log('resolving response body as JSON')
+          return parseJson(this.responseText)
+        }
+
+        case 'arraybuffer': {
+          this.log('resolving response body as ArrayBuffer')
+          return toArrayBuffer(this._responseBuffer)
+        }
+
+        case 'blob': {
+          const mimeType =
+            this.getResponseHeader('content-type') || 'text/plain'
+          this.log('resolving response body as blog (%s)', mimeType)
+          return new Blob([this.responseText], { type: mimeType })
+        }
+
+        case 'document': {
+          this.log('resolving response body as XML')
+          return this.responseXML
+        }
+
+        default: {
+          return this.responseText
+        }
+      }
+    }
+
+    public get responseXML(): Document | null {
+      const contentType = this.getResponseHeader('content-type') || ''
+      this.log('responseXML() %s', contentType)
+
+      if (
+        contentType.startsWith('application/xml') ||
+        contentType.startsWith('text/xml')
+      ) {
+        this.log('response content-type is XML, parsing...')
+        return new DOMParser().parseFromString(this.responseText, contentType)
+      }
+
+      this.log('response content type is not XML, returning null...')
+      return null
+    }
+
     public abort() {
-      this.log('abort')
+      this.log('abort()')
 
       if (this.readyState > this.UNSENT && this.readyState < this.DONE) {
-        this.setReadyState(this.UNSENT)
+        this.reset()
         this.trigger('abort')
       }
     }
@@ -446,12 +550,12 @@ export const createXMLHttpRequestOverride = (
     }
 
     public setRequestHeader(name: string, value: string) {
-      this.log('set request header "%s" to "%s"', name, value)
+      this.log('setRequestHeader() "%s" to "%s"', name, value)
       this._requestHeaders.append(name, value)
     }
 
     public getResponseHeader(name: string): string | null {
-      this.log('get response header "%s"', name)
+      this.log('getResponseHeader() "%s"', name)
 
       if (this.readyState < this.HEADERS_RECEIVED) {
         this.log(
@@ -474,7 +578,7 @@ export const createXMLHttpRequestOverride = (
     }
 
     public getAllResponseHeaders(): string {
-      this.log('get all response headers')
+      this.log('getAllResponseHeaders()')
 
       if (this.readyState < this.HEADERS_RECEIVED) {
         this.log(
@@ -488,70 +592,27 @@ export const createXMLHttpRequestOverride = (
     }
 
     public addEventListener<
-      K extends keyof InternalXMLHttpRequestEventTargetEventMap
-    >(name: K, listener: XMLHttpRequestEventHandler) {
-      this.log('addEventListener', name, listener)
+      Event extends keyof InternalXMLHttpRequestEventTargetEventMap
+    >(event: Event, listener: XMLHttpRequestEventHandler) {
+      this.log('addEventListener', event, listener)
       this._events.push({
-        name,
+        name: event,
         listener,
       })
     }
 
-    public removeEventListener<K extends keyof XMLHttpRequestEventMap>(
-      name: K,
-      listener: (event?: XMLHttpRequestEventMap[K]) => void
+    public removeEventListener<Event extends keyof XMLHttpRequestEventMap>(
+      event: Event,
+      listener: (event?: XMLHttpRequestEventMap[Event]) => void
     ): void {
       this.log('removeEventListener', name, listener)
       this._events = this._events.filter((storedEvent) => {
-        return storedEvent.name !== name && storedEvent.listener !== listener
+        return storedEvent.name !== event && storedEvent.listener !== listener
       })
     }
 
     public overrideMimeType() {}
 
-    /**
-     * Resolves the response based on the `responseType` value.
-     */
-    getResponseBody(body: string | undefined) {
-      // Handle an improperly set "null" value of the mocked response body.
-      const textBody = body ?? ''
-      this.log('coerced response body to', textBody)
-
-      switch (this.responseType) {
-        case 'json': {
-          this.log('resolving response body as JSON')
-          return parseJson(textBody)
-        }
-
-        case 'blob': {
-          const blobType =
-            this.getResponseHeader('content-type') || 'text/plain'
-          this.log('resolving response body as Blob', { type: blobType })
-
-          return new Blob([textBody], {
-            type: blobType,
-          })
-        }
-
-        case 'arraybuffer': {
-          this.log('resolving response body as ArrayBuffer')
-          const arrayBuffer = bufferFrom(textBody)
-          return arrayBuffer
-        }
-
-        default:
-          return textBody
-      }
-    }
-
-    getResponseXML() {
-      const contentType = this.getResponseHeader('Content-Type')
-      if (contentType === 'application/xml' || contentType === 'text/xml') {
-        return new DOMParser().parseFromString(this.responseText, contentType)
-      }
-      return null
-    }
-
     /**
      * Propagates mock XMLHttpRequest instance callbacks
      * to the given XMLHttpRequest instance.
@@ -608,15 +669,14 @@ export const createXMLHttpRequestOverride = (
     propagateHeaders(request: XMLHttpRequest, headers: Headers) {
       this.log('propagating request headers to the original request', headers)
 
-      // Preserve the request headers casing.
-      Object.entries(headers.raw()).forEach(([name, value]) => {
+      for (const [headerName, headerValue] of headers) {
         this.log(
           'setting "%s" (%s) header on the original request',
-          name,
-          value
+          headerName,
+          headerValue
         )
-        request.setRequestHeader(name, value)
-      })
+        request.setRequestHeader(headerName, headerValue)
+      }
     }
   }
 }

package/src/interceptors/XMLHttpRequest/index.ts

@@ -1,12 +1,13 @@
 import { invariant } from 'outvariant'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
-import { InteractiveIsomorphicRequest } from '../../InteractiveIsomorphicRequest'
+import { InteractiveRequest } from '../../utils/toInteractiveRequest'
 import { Interceptor } from '../../Interceptor'
 import { AsyncEventEmitter } from '../../utils/AsyncEventEmitter'
 import { createXMLHttpRequestOverride } from './XMLHttpRequestOverride'
 
 export type XMLHttpRequestEventListener = (
-  request: InteractiveIsomorphicRequest
+  request: InteractiveRequest,
+  requestId: string
 ) => Promise<void> | void
 
 export type XMLHttpRequestEmitter = AsyncEventEmitter<HttpRequestEventMap>

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,14 @@
+/**
+ * @jest-environment node
+ */
+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/createResponse.ts

@@ -0,0 +1,13 @@
+import { Response } from '@remix-run/web-fetch'
+import { stringToHeaders } from 'headers-polyfill'
+
+export function createResponse(
+  request: XMLHttpRequest,
+  responseBody: Uint8Array
+): Response {
+  return new Response(responseBody, {
+    status: request.status,
+    statusText: request.statusText,
+    headers: stringToHeaders(request.getAllResponseHeaders()),
+  })
+}