@mswjs/interceptors 0.16.5 → 0.17.1

package/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts

@@ -11,14 +11,14 @@ import {
   headersToString,
 } from 'headers-polyfill'
 import { DOMParser } from '@xmldom/xmldom'
-import { InteractiveIsomorphicRequest, IsomorphicRequest } from '../../glossary'
 import { parseJson } from '../../utils/parseJson'
 import { toIsoResponse } from '../../utils/toIsoResponse'
-import { uuidv4 } from '../../utils/uuid'
 import { bufferFrom } from './utils/bufferFrom'
 import { createEvent } from './utils/createEvent'
 import type { XMLHttpRequestEmitter } from '.'
-import { createLazyCallback } from '../../utils/createLazyCallback'
+import { IsomorphicRequest } from '../../IsomorphicRequest'
+import { encodeBuffer } from '../../utils/bufferUtils'
+import { InteractiveIsomorphicRequest } from '../../InteractiveIsomorphicRequest'
 
 type XMLHttpRequestEventHandler = (
   this: XMLHttpRequest,
@@ -84,7 +84,6 @@ export const createXMLHttpRequestOverride = (
     public statusText: string
     public user?: string
     public password?: string
-    public data: string
     public async?: boolean
     public response: any
     public responseText: string
@@ -132,7 +131,6 @@ export const createXMLHttpRequestOverride = (
       this.withCredentials = false
       this.status = 200
       this.statusText = 'OK'
-      this.data = ''
       this.response = ''
       this.responseType = 'text'
       this.responseText = ''
@@ -154,7 +152,7 @@ export const createXMLHttpRequestOverride = (
       this.readyState = nextState
 
       if (nextState !== this.UNSENT) {
-        this.log('triggerring readystate change...')
+        this.log('triggering readystate change...')
         this.trigger('readystatechange')
       }
     }
@@ -195,7 +193,6 @@ export const createXMLHttpRequestOverride = (
       this.setReadyState(this.UNSENT)
       this.status = 200
       this.statusText = 'OK'
-      this.data = ''
       this.response = null as any
       this.responseText = null as any
       this.responseXML = null as any
@@ -229,10 +226,14 @@ export const createXMLHttpRequestOverride = (
       }
     }
 
-    public send(data?: string) {
+    public send(data?: string | ArrayBuffer) {
       this.log('send %s %s', this.method, this.url)
-
-      this.data = data || ''
+      let buffer: ArrayBuffer
+      if (typeof data === 'string') {
+        buffer = encodeBuffer(data)
+      } else {
+        buffer = data || new ArrayBuffer(0)
+      }
 
       let url: URL
 
@@ -248,19 +249,16 @@ export const createXMLHttpRequestOverride = (
       this.log('request headers', this._requestHeaders)
 
       // Create an intercepted request instance exposed to the request intercepting middleware.
-      const isomorphicRequest: IsomorphicRequest = {
-        id: uuidv4(),
-        url,
+      const isomorphicRequest = new IsomorphicRequest(url, {
+        body: buffer,
         method: this.method,
         headers: this._requestHeaders,
         credentials: this.withCredentials ? 'include' : 'omit',
-        body: this.data,
-      }
+      })
 
-      const interactiveIsomorphicRequest: InteractiveIsomorphicRequest = {
-        ...isomorphicRequest,
-        respondWith: createLazyCallback(),
-      }
+      const interactiveIsomorphicRequest = new InteractiveIsomorphicRequest(
+        isomorphicRequest
+      )
 
       this.log(
         'emitting the "request" event for %d listener(s)...',
@@ -331,8 +329,8 @@ export const createXMLHttpRequestOverride = (
           if (mockedResponse.body && this.response) {
             this.setReadyState(this.LOADING)
 
-            // Presense of the mocked response implies a response body (not null).
-            // Presense of the coerced `this.response` implies the mocked body is valid.
+            // 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)
 
             // Trigger a progress event based on the mocked response body.
@@ -428,8 +426,8 @@ export const createXMLHttpRequestOverride = (
             originalRequest.timeout = this.timeout
           }
 
-          this.log('send', this.data)
-          originalRequest.send(this.data)
+          this.log('send', data)
+          originalRequest.send(data)
         }
       })
     }

package/src/interceptors/XMLHttpRequest/index.ts

@@ -1,7 +1,6 @@
-import type {
-  HttpRequestEventMap,
-  InteractiveIsomorphicRequest,
-} from '../../glossary'
+import { invariant } from 'outvariant'
+import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
+import { InteractiveIsomorphicRequest } from '../../InteractiveIsomorphicRequest'
 import { Interceptor } from '../../Interceptor'
 import { AsyncEventEmitter } from '../../utils/AsyncEventEmitter'
 import { createXMLHttpRequestOverride } from './XMLHttpRequestOverride'
@@ -33,6 +32,11 @@ export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap>
 
     const PureXMLHttpRequest = window.XMLHttpRequest
 
+    invariant(
+      !(PureXMLHttpRequest as any)[IS_PATCHED_MODULE],
+      'Failed to patch the "XMLHttpRequest" module: already patched.'
+    )
+
     window.XMLHttpRequest = createXMLHttpRequestOverride({
       XMLHttpRequest: PureXMLHttpRequest,
       emitter: this.emitter,
@@ -41,7 +45,17 @@ export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap>
 
     log('native "XMLHttpRequest" module patched!', window.XMLHttpRequest.name)
 
+    Object.defineProperty(window.XMLHttpRequest, IS_PATCHED_MODULE, {
+      enumerable: true,
+      configurable: true,
+      value: true,
+    })
+
     this.subscriptions.push(() => {
+      Object.defineProperty(window.XMLHttpRequest, IS_PATCHED_MODULE, {
+        value: undefined,
+      })
+
       window.XMLHttpRequest = PureXMLHttpRequest
       log(
         'native "XMLHttpRequest" module restored!',

package/src/interceptors/fetch/index.ts

@@ -4,15 +4,16 @@ import {
   objectToHeaders,
   headersToObject,
 } from 'headers-polyfill'
-import type {
+import { invariant } from 'outvariant'
+import { IsomorphicRequest } from '../../IsomorphicRequest'
+import {
   HttpRequestEventMap,
-  InteractiveIsomorphicRequest,
   IsomorphicResponse,
+  IS_PATCHED_MODULE,
 } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
-import { createLazyCallback } from '../../utils/createLazyCallback'
 import { toIsoResponse } from '../../utils/toIsoResponse'
-import { uuidv4 } from '../../utils/uuid'
+import { InteractiveIsomorphicRequest } from '../../InteractiveIsomorphicRequest'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -31,6 +32,11 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   protected setup() {
     const pureFetch = globalThis.fetch
 
+    invariant(
+      !(pureFetch as any)[IS_PATCHED_MODULE],
+      'Failed to patch the "fetch" module: already patched.'
+    )
+
     globalThis.fetch = async (input, init) => {
       const request = new Request(input, init)
 
@@ -39,32 +45,38 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
       this.log('[%s] %s', method, url)
 
-      const isomorphicRequest: InteractiveIsomorphicRequest = {
-        id: uuidv4(),
-        url: new URL(url, location.origin),
-        method: method,
-        headers: new Headers(request.headers),
-        credentials: request.credentials,
-        body: await request.clone().text(),
-        respondWith: createLazyCallback(),
-      }
+      const body = await request.clone().arrayBuffer()
+      const isomorphicRequest = new IsomorphicRequest(
+        new URL(url, location.origin),
+        {
+          body,
+          method,
+          headers: new Headers(request.headers),
+          credentials: request.credentials,
+        }
+      )
+
+      const interactiveIsomorphicRequest = new InteractiveIsomorphicRequest(
+        isomorphicRequest
+      )
 
-      this.log('isomorphic request', isomorphicRequest)
+      this.log('isomorphic request', interactiveIsomorphicRequest)
 
       this.log(
         'emitting the "request" event for %d listener(s)...',
         this.emitter.listenerCount('request')
       )
-      this.emitter.emit('request', isomorphicRequest)
+      this.emitter.emit('request', interactiveIsomorphicRequest)
 
       this.log('awaiting for the mocked response...')
 
       await this.emitter.untilIdle('request', ({ args: [request] }) => {
-        return request.id === isomorphicRequest.id
+        return request.id === interactiveIsomorphicRequest.id
       })
       this.log('all request listeners have been resolved!')
 
-      const [mockedResponse] = await isomorphicRequest.respondWith.invoked()
+      const [mockedResponse] =
+        await interactiveIsomorphicRequest.respondWith.invoked()
       this.log('event.respondWith called with:', mockedResponse)
 
       if (mockedResponse) {
@@ -73,7 +85,11 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
         const isomorphicResponse = toIsoResponse(mockedResponse)
         this.log('derived isomorphic response:', isomorphicResponse)
 
-        this.emitter.emit('response', isomorphicRequest, isomorphicResponse)
+        this.emitter.emit(
+          'response',
+          interactiveIsomorphicRequest,
+          isomorphicResponse
+        )
 
         const response = new Response(mockedResponse.body, {
           ...isomorphicResponse,
@@ -88,7 +104,7 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
           writable: false,
           enumerable: true,
           configurable: false,
-          value: isomorphicRequest.url.href,
+          value: interactiveIsomorphicRequest.url.href,
         })
 
         return response
@@ -102,15 +118,26 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
         this.emitter.emit(
           'response',
-          isomorphicRequest,
+          interactiveIsomorphicRequest,
           await normalizeFetchResponse(cloneResponse)
         )
         return response
       })
     }
 
+    Object.defineProperty(globalThis.fetch, IS_PATCHED_MODULE, {
+      enumerable: true,
+      configurable: true,
+      value: true,
+    })
+
     this.subscriptions.push(() => {
+      Object.defineProperty(globalThis.fetch, IS_PATCHED_MODULE, {
+        value: undefined,
+      })
+
       globalThis.fetch = pureFetch
+
       this.log('restored native "globalThis.fetch"!', globalThis.fetch.name)
     })
   }

package/src/utils/bufferUtils.test.ts

@@ -0,0 +1,20 @@
+import { decodeBuffer, encodeBuffer } from './bufferUtils'
+
+it('encodes utf-8 string', () => {
+  const encoded = encodeBuffer('😁')
+  expect(new Uint8Array(encoded)).toEqual(new Uint8Array([240, 159, 152, 129]))
+})
+
+it('decodes utf-8 string', () => {
+  const array = new Uint8Array([240, 159, 152, 129])
+  const decoded = decodeBuffer(array.buffer)
+  expect(decoded).toEqual('😁')
+})
+
+it('decodes string with custom encoding', () => {
+  const array = new Uint8Array([
+    207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33,
+  ])
+  const decoded = decodeBuffer(array.buffer, 'windows-1251')
+  expect(decoded).toEqual('Привет, мир!')
+})

package/src/utils/bufferUtils.ts

@@ -0,0 +1,19 @@
+import { TextDecoder, TextEncoder } from 'web-encoding'
+
+export function encodeBuffer(text: string): ArrayBuffer {
+  const encoder = new TextEncoder()
+  const encoded = encoder.encode(text)
+  return getArrayBuffer(encoded)
+}
+
+export function decodeBuffer(buffer: ArrayBuffer, encoding?: string): string {
+  const decoder = new TextDecoder(encoding)
+  return decoder.decode(buffer)
+}
+
+export function getArrayBuffer(array: Uint8Array): ArrayBuffer {
+  return array.buffer.slice(
+    array.byteOffset,
+    array.byteOffset + array.byteLength
+  )
+}