@mswjs/interceptors 0.22.10 → 0.22.11

package/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts

@@ -1,5 +1,5 @@
-import type { Debugger } from 'debug'
 import { headersToString } from 'headers-polyfill'
+import type { Logger } from '@open-draft/logger'
 import { concatArrayBuffer } from './utils/concatArrayBuffer'
 import { createEvent } from './utils/createEvent'
 import {
@@ -40,7 +40,7 @@ export class XMLHttpRequestController {
   private responseBuffer: Uint8Array
   private events: Map<keyof XMLHttpRequestEventTargetEventMap, Array<Function>>
 
-  constructor(readonly initialRequest: XMLHttpRequest, public log: Debugger) {
+  constructor(readonly initialRequest: XMLHttpRequest, public logger: Logger) {
     this.events = new Map()
     this.requestHeaders = new Headers()
     this.responseBuffer = new Uint8Array()
@@ -83,8 +83,8 @@ export class XMLHttpRequestController {
               this.url = toAbsoluteUrl(url)
             }
 
-            this.log = this.log.extend(`${this.method} ${this.url.href}`)
-            this.log('open', this.method, this.url.href)
+            this.logger = this.logger.extend(`${this.method} ${this.url.href}`)
+            this.logger.info('open', this.method, this.url.href)
 
             return invoke()
           }
@@ -96,7 +96,7 @@ export class XMLHttpRequestController {
             ]
 
             this.registerEvent(eventName, listener)
-            this.log('addEventListener', eventName, listener.name)
+            this.logger.info('addEventListener', eventName, listener.name)
 
             return invoke()
           }
@@ -105,7 +105,7 @@ export class XMLHttpRequestController {
             const [name, value] = args as [string, string]
             this.requestHeaders.set(name, value)
 
-            this.log('setRequestHeader', name, value)
+            this.logger.info('setRequestHeader', name, value)
 
             return invoke()
           }
@@ -156,7 +156,7 @@ export class XMLHttpRequestController {
               // 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) {
-                this.log(
+                this.logger.info(
                   'request callback settled but request has not been handled (readystate %d), performing as-is...',
                   this.request.readyState
                 )
@@ -195,7 +195,7 @@ export class XMLHttpRequestController {
     const nextEvents = prevEvents.concat(listener)
     this.events.set(eventName, nextEvents)
 
-    this.log('registered event "%s"', eventName, listener.name)
+    this.logger.info('registered event "%s"', eventName, listener.name)
   }
 
   /**
@@ -203,7 +203,7 @@ export class XMLHttpRequestController {
    * Fetch API `Response` instance.
    */
   public respondWith(response: Response): void {
-    this.log(
+    this.logger.info(
       'responding with a mocked response: %d %s',
       response.status,
       response.statusText
@@ -215,17 +215,21 @@ export class XMLHttpRequestController {
 
     this.request.getResponseHeader = new Proxy(this.request.getResponseHeader, {
       apply: (_, __, args: [name: string]) => {
-        this.log('getResponseHeader', args[0])
+        this.logger.info('getResponseHeader', args[0])
 
         if (this.request.readyState < this.request.HEADERS_RECEIVED) {
-          this.log('headers not received yet, returning null')
+          this.logger.info('headers not received yet, returning null')
 
           // Headers not received yet, nothing to return.
           return null
         }
 
         const headerValue = response.headers.get(args[0])
-        this.log('resolved response header "%s" to', args[0], headerValue)
+        this.logger.info(
+          'resolved response header "%s" to',
+          args[0],
+          headerValue
+        )
 
         return headerValue
       },
@@ -235,17 +239,17 @@ export class XMLHttpRequestController {
       this.request.getAllResponseHeaders,
       {
         apply: () => {
-          this.log('getAllResponseHeaders')
+          this.logger.info('getAllResponseHeaders')
 
           if (this.request.readyState < this.request.HEADERS_RECEIVED) {
-            this.log('headers not received yet, returning empty string')
+            this.logger.info('headers not received yet, returning empty string')
 
             // Headers not received yet, nothing to return.
             return ''
           }
 
           const allHeaders = headersToString(response.headers)
-          this.log('resolved all response headers to', allHeaders)
+          this.logger.info('resolved all response headers to', allHeaders)
 
           return allHeaders
         },
@@ -278,7 +282,7 @@ export class XMLHttpRequestController {
          */
         undefined
 
-    this.log('calculated response body length', totalResponseBodyLength)
+    this.logger.info('calculated response body length', totalResponseBodyLength)
 
     this.trigger('loadstart', {
       loaded: 0,
@@ -289,7 +293,7 @@ export class XMLHttpRequestController {
     this.setReadyState(this.request.LOADING)
 
     const finalizeResponse = () => {
-      this.log('finalizing the mocked response...')
+      this.logger.info('finalizing the mocked response...')
 
       this.setReadyState(this.request.DONE)
 
@@ -305,7 +309,7 @@ export class XMLHttpRequestController {
     }
 
     if (response.body) {
-      this.log('mocked response has body, streaming...')
+      this.logger.info('mocked response has body, streaming...')
 
       const reader = response.body.getReader()
 
@@ -313,13 +317,13 @@ export class XMLHttpRequestController {
         const { value, done } = await reader.read()
 
         if (done) {
-          this.log('response body stream done!')
+          this.logger.info('response body stream done!')
           finalizeResponse()
           return
         }
 
         if (value) {
-          this.log('read response body chunk:', value)
+          this.logger.info('read response body chunk:', value)
           this.responseBuffer = concatArrayBuffer(this.responseBuffer, value)
 
           this.trigger('progress', {
@@ -342,7 +346,10 @@ export class XMLHttpRequestController {
   }
 
   get response(): unknown {
-    this.log('getResponse (responseType: %s)', this.request.responseType)
+    this.logger.info(
+      'getResponse (responseType: %s)',
+      this.request.responseType
+    )
 
     if (this.request.readyState !== this.request.DONE) {
       return null
@@ -351,14 +358,14 @@ export class XMLHttpRequestController {
     switch (this.request.responseType) {
       case 'json': {
         const responseJson = parseJson(this.responseBufferToText())
-        this.log('resolved response JSON', responseJson)
+        this.logger.info('resolved response JSON', responseJson)
 
         return responseJson
       }
 
       case 'arraybuffer': {
         const arrayBuffer = toArrayBuffer(this.responseBuffer)
-        this.log('resolved response ArrayBuffer', arrayBuffer)
+        this.logger.info('resolved response ArrayBuffer', arrayBuffer)
 
         return arrayBuffer
       }
@@ -370,7 +377,7 @@ export class XMLHttpRequestController {
           type: mimeType,
         })
 
-        this.log(
+        this.logger.info(
           'resolved response Blob (mime type: %s)',
           responseBlob,
           mimeType
@@ -381,7 +388,7 @@ export class XMLHttpRequestController {
 
       default: {
         const responseText = this.responseBufferToText()
-        this.log(
+        this.logger.info(
           'resolving "%s" response type as text',
           this.request.responseType,
           responseText
@@ -411,7 +418,7 @@ export class XMLHttpRequestController {
     }
 
     const responseText = this.responseBufferToText()
-    this.log('getResponseText: "%s"', responseText)
+    this.logger.info('getResponseText: "%s"', responseText)
 
     return responseText
   }
@@ -447,7 +454,7 @@ export class XMLHttpRequestController {
   }
 
   public errorWith(error: Error): void {
-    this.log('responding with an error')
+    this.logger.info('responding with an error')
 
     this.setReadyState(this.request.DONE)
     this.trigger('error')
@@ -458,19 +465,23 @@ export class XMLHttpRequestController {
    * Transitions this request's `readyState` to the given one.
    */
   private setReadyState(nextReadyState: number): void {
-    this.log('setReadyState: %d -> %d', this.request.readyState, nextReadyState)
+    this.logger.info(
+      'setReadyState: %d -> %d',
+      this.request.readyState,
+      nextReadyState
+    )
 
     if (this.request.readyState === nextReadyState) {
-      this.log('ready state identical, skipping transition...')
+      this.logger.info('ready state identical, skipping transition...')
       return
     }
 
     define(this.request, 'readyState', nextReadyState)
 
-    this.log('set readyState to: %d', nextReadyState)
+    this.logger.info('set readyState to: %d', nextReadyState)
 
     if (nextReadyState !== this.request.UNSENT) {
-      this.log('triggerring "readystatechange" event...')
+      this.logger.info('triggerring "readystatechange" event...')
 
       this.trigger('readystatechange')
     }
@@ -487,18 +498,18 @@ export class XMLHttpRequestController {
     const callback = this.request[`on${eventName}`]
     const event = createEvent(this.request, eventName, options)
 
-    this.log('trigger "%s"', eventName, options || '')
+    this.logger.info('trigger "%s"', eventName, options || '')
 
     // Invoke direct callbacks.
     if (typeof callback === 'function') {
-      this.log('found a direct "%s" callback, calling...', eventName)
+      this.logger.info('found a direct "%s" callback, calling...', eventName)
       callback.call(this.request, event)
     }
 
     // Invoke event listeners.
     for (const [registeredEventName, listeners] of this.events) {
       if (registeredEventName === eventName) {
-        this.log(
+        this.logger.info(
           'found %d listener(s) for "%s" event, calling...',
           listeners.length,
           eventName
@@ -513,7 +524,7 @@ export class XMLHttpRequestController {
    * Converts this `XMLHttpRequest` instance into a Fetch API `Request` instance.
    */
   public toFetchApiRequest(): Request {
-    this.log('converting request to a Fetch API Request...')
+    this.logger.info('converting request to a Fetch API Request...')
 
     const fetchRequest = new Request(this.url.href, {
       method: this.method,
@@ -552,7 +563,7 @@ export class XMLHttpRequestController {
     })
     define(fetchRequest, 'headers', proxyHeaders)
 
-    this.log('converted request to a Fetch API Request!', fetchRequest)
+    this.logger.info('converted request to a Fetch API Request!', fetchRequest)
 
     return fetchRequest
   }

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -1,12 +1,12 @@
-import type { Debugger } from 'debug'
 import { until } from '@open-draft/until'
+import type { Logger } from '@open-draft/logger'
 import { XMLHttpRequestEmitter } from '.'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
 import { XMLHttpRequestController } from './XMLHttpRequestController'
 
 export interface XMLHttpRequestProxyOptions {
   emitter: XMLHttpRequestEmitter
-  log: Debugger
+  logger: Logger
 }
 
 /**
@@ -16,11 +16,11 @@ export interface XMLHttpRequestProxyOptions {
  */
 export function createXMLHttpRequestProxy({
   emitter,
-  log,
+  logger,
 }: XMLHttpRequestProxyOptions) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
     construct(target, args, newTarget) {
-      log('constructed new XMLHttpRequest')
+      logger.info('constructed new XMLHttpRequest')
 
       const originalRequest = Reflect.construct(target, args, newTarget)
 
@@ -44,20 +44,20 @@ export function createXMLHttpRequestProxy({
 
       const requestController = new XMLHttpRequestController(
         originalRequest,
-        log
+        logger
       )
 
       requestController.onRequest = async function (request, requestId) {
         // Notify the consumer about a new request.
         const interactiveRequest = toInteractiveRequest(request)
 
-        this.log(
+        this.logger.info(
           'emitting the "request" event for %s listener(s)...',
           emitter.listenerCount('request')
         )
         emitter.emit('request', interactiveRequest, requestId)
 
-        this.log('awaiting mocked response...')
+        this.logger.info('awaiting mocked response...')
 
         const resolverResult = await until(async () => {
           await emitter.untilIdle(
@@ -67,18 +67,18 @@ export function createXMLHttpRequestProxy({
             }
           )
 
-          this.log('all "request" listeners settled!')
+          this.logger.info('all "request" listeners settled!')
 
           const [mockedResponse] =
             await interactiveRequest.respondWith.invoked()
 
-          this.log('event.respondWith called with:', mockedResponse)
+          this.logger.info('event.respondWith called with:', mockedResponse)
 
           return mockedResponse
         })
 
         if (resolverResult.error) {
-          this.log(
+          this.logger.info(
             'request listener threw an exception, aborting request...',
             resolverResult.error
           )
@@ -95,7 +95,7 @@ export function createXMLHttpRequestProxy({
         const mockedResponse = resolverResult.data
 
         if (typeof mockedResponse !== 'undefined') {
-          this.log(
+          this.logger.info(
             'received mocked response: %d %s',
             mockedResponse.status,
             mockedResponse.statusText
@@ -104,7 +104,9 @@ export function createXMLHttpRequestProxy({
           return requestController.respondWith(mockedResponse)
         }
 
-        this.log('no mocked response received, performing request as-is...')
+        this.logger.info(
+          'no mocked response received, performing request as-is...'
+        )
       }
 
       requestController.onResponse = async function (
@@ -112,7 +114,7 @@ export function createXMLHttpRequestProxy({
         request,
         requestId
       ) {
-        this.log(
+        this.logger.info(
           'emitting the "response" event for %s listener(s)...',
           emitter.listenerCount('response')
         )

package/src/interceptors/XMLHttpRequest/index.ts

@@ -24,9 +24,9 @@ export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap>
   }
 
   protected setup() {
-    const log = this.log.extend('setup')
+    const logger = this.logger.extend('setup')
 
-    log('patching "XMLHttpRequest" module...')
+    logger.info('patching "XMLHttpRequest" module...')
 
     const PureXMLHttpRequest = globalThis.XMLHttpRequest
 
@@ -37,10 +37,10 @@ export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap>
 
     globalThis.XMLHttpRequest = createXMLHttpRequestProxy({
       emitter: this.emitter,
-      log: this.log,
+      logger: this.logger,
     })
 
-    log(
+    logger.info(
       'native "XMLHttpRequest" module patched!',
       globalThis.XMLHttpRequest.name
     )
@@ -57,7 +57,7 @@ export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap>
       })
 
       globalThis.XMLHttpRequest = PureXMLHttpRequest
-      log(
+      logger.info(
         'native "XMLHttpRequest" module restored!',
         globalThis.XMLHttpRequest.name
       )

package/src/interceptors/fetch/index.ts

@@ -1,9 +1,9 @@
 import { invariant } from 'outvariant'
+import { until } from '@open-draft/until'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
 import { uuidv4 } from '../../utils/uuid'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
-import { until } from '@open-draft/until'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -31,17 +31,17 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
       const requestId = uuidv4()
       const request = new Request(input, init)
 
-      this.log('[%s] %s', request.method, request.url)
+      this.logger.info('[%s] %s', request.method, request.url)
 
       const interactiveRequest = toInteractiveRequest(request)
 
-      this.log(
+      this.logger.info(
         'emitting the "request" event for %d listener(s)...',
         this.emitter.listenerCount('request')
       )
       this.emitter.emit('request', interactiveRequest, requestId)
 
-      this.log('awaiting for the mocked response...')
+      this.logger.info('awaiting for the mocked response...')
 
       const resolverResult = await until(async () => {
         await this.emitter.untilIdle(
@@ -50,10 +50,10 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
             return pendingRequestId === requestId
           }
         )
-        this.log('all request listeners have been resolved!')
+        this.logger.info('all request listeners have been resolved!')
 
         const [mockedResponse] = await interactiveRequest.respondWith.invoked()
-        this.log('event.respondWith called with:', mockedResponse)
+        this.logger.info('event.respondWith called with:', mockedResponse)
 
         return mockedResponse
       })
@@ -68,8 +68,8 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
       const mockedResponse = resolverResult.data
 
-      if (mockedResponse) {
-        this.log('received mocked response:', mockedResponse)
+      if (mockedResponse && !request.signal?.aborted) {
+        this.logger.info('received mocked response:', mockedResponse)
         const responseCloine = mockedResponse.clone()
 
         this.emitter.emit(
@@ -92,11 +92,11 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
         return response
       }
 
-      this.log('no mocked response received!')
+      this.logger.info('no mocked response received!')
 
       return pureFetch(request).then((response) => {
         const responseClone = response.clone()
-        this.log('original fetch performed', responseClone)
+        this.logger.info('original fetch performed', responseClone)
 
         this.emitter.emit(
           'response',
@@ -122,7 +122,10 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
       globalThis.fetch = pureFetch
 
-      this.log('restored native "globalThis.fetch"!', globalThis.fetch.name)
+      this.logger.info(
+        'restored native "globalThis.fetch"!',
+        globalThis.fetch.name
+      )
     })
   }
 }

package/src/utils/AsyncEventEmitter.ts

@@ -1,6 +1,6 @@
+import { Logger } from '@open-draft/logger'
 import { Emitter, EventMap, Listener } from 'strict-event-emitter'
 import { nextTick } from './nextTick'
-import { debug, Debugger } from './debug'
 
 export interface QueueItem<Args extends Array<unknown>> {
   args: Args
@@ -17,13 +17,13 @@ export class AsyncEventEmitter<
 > extends Emitter<Events> {
   public readyState: AsyncEventEmitterReadyState
 
-  private log: Debugger
+  private logger: Logger
   protected queue: Map<keyof Events, Array<QueueItem<Events[any]>>>
 
   constructor() {
     super()
 
-    this.log = debug('async-event-emitter')
+    this.logger = new Logger('async-event-emitter')
     this.queue = new Map()
 
     this.readyState = AsyncEventEmitterReadyState.ACTIVE
@@ -33,12 +33,12 @@ export class AsyncEventEmitter<
     eventName: EventName,
     listener: Listener<any>
   ) {
-    const log = this.log.extend('on')
+    const logger = this.logger.extend('on')
 
-    log('adding "%s" listener...', eventName)
+    logger.info('adding "%s" listener...', eventName)
 
     if (this.readyState === AsyncEventEmitterReadyState.DEACTIVATED) {
-      log('the emitter is destroyed, skipping!')
+      logger.info('the emitter is destroyed, skipping!')
       return this
     }
 
@@ -46,7 +46,7 @@ export class AsyncEventEmitter<
       // Event queue is always established when calling ".emit()".
       const queue = this.openListenerQueue(eventName)
 
-      log('awaiting the "%s" listener...', eventName)
+      logger.info('awaiting the "%s" listener...', eventName)
 
       // Whenever a listener is called, create a new Promise
       // that resolves when that listener function completes its execution.
@@ -59,9 +59,9 @@ export class AsyncEventEmitter<
             await listener(...args)
             resolve()
 
-            log('"%s" listener has resolved!', eventName)
+            logger.info('"%s" listener has resolved!', eventName)
           } catch (error) {
-            log('"%s" listener has rejected!', error)
+            logger.info('"%s" listener has rejected!', error)
             reject(error)
           }
         }),
@@ -73,12 +73,12 @@ export class AsyncEventEmitter<
     eventName: EventName,
     ...data: Events[EventName]
   ): boolean {
-    const log = this.log.extend('emit')
+    const logger = this.logger.extend('emit')
 
-    log('emitting "%s" event...', eventName)
+    logger.info('emitting "%s" event...', eventName)
 
     if (this.readyState === AsyncEventEmitterReadyState.DEACTIVATED) {
-      log('the emitter is destroyed, skipping!')
+      logger.info('the emitter is destroyed, skipping!')
       return false
     }
 
@@ -91,7 +91,7 @@ export class AsyncEventEmitter<
     // Establish the Promise queue for this particular event.
     this.openListenerQueue(eventName)
 
-    log('appending a one-time cleanup "%s" listener...', eventName)
+    logger.info('appending a one-time cleanup "%s" listener...', eventName)
 
     // Append a one-time clean up listener.
     this.once(eventName, () => {
@@ -100,7 +100,7 @@ export class AsyncEventEmitter<
       // the time to properly resolve.
       nextTick(() => {
         this.queue.delete(eventName)
-        log('cleaned up "%s" listeners queue!', eventName)
+        logger.info('cleaned up "%s" listeners queue!', eventName)
       })
     })
 
@@ -130,46 +130,46 @@ export class AsyncEventEmitter<
   private openListenerQueue<EventName extends keyof Events>(
     eventName: EventName
   ): Array<QueueItem<Events[EventName]>> {
-    const log = this.log.extend('openListenerQueue')
-    log('opening "%s" listeners queue...', eventName)
+    const logger = this.logger.extend('openListenerQueue')
+    logger.info('opening "%s" listeners queue...', eventName)
 
     const queue = this.queue.get(eventName)
 
     if (!queue) {
-      log('no queue found, creating one...')
+      logger.info('no queue found, creating one...')
       this.queue.set(eventName, [])
       return []
     }
 
-    log('returning an exising queue:', queue)
+    logger.info('returning an exising queue:', queue)
     return queue
   }
 
   public removeAllListeners<EventName extends keyof Events>(
     eventName?: EventName
   ) {
-    const log = this.log.extend('removeAllListeners')
-    log('event:', eventName)
+    const logger = this.logger.extend('removeAllListeners')
+    logger.info('event:', eventName)
 
     if (eventName) {
       this.queue.delete(eventName)
-      log(
+      logger.info(
         'cleared the "%s" listeners queue!',
         eventName,
         this.queue.get(eventName)
       )
     } else {
       this.queue.clear()
-      log('cleared the listeners queue!', this.queue)
+      logger.info('cleared the listeners queue!', this.queue)
     }
 
     return super.removeAllListeners(eventName)
   }
 
   public activate(): void {
-    const log = this.log.extend('activate')
+    const logger = this.logger.extend('activate')
     this.readyState = AsyncEventEmitterReadyState.ACTIVE
-    log('set state to:', this.readyState)
+    logger.info('set state to:', this.readyState)
   }
 
   /**
@@ -178,13 +178,13 @@ export class AsyncEventEmitter<
    * and needs to be activated again in order to do so.
    */
   public deactivate(): void {
-    const log = this.log.extend('deactivate')
+    const logger = this.logger.extend('deactivate')
 
-    log('removing all listeners...')
+    logger.info('removing all listeners...')
     this.removeAllListeners()
 
     this.readyState = AsyncEventEmitterReadyState.DEACTIVATED
-    log('set state to:', this.readyState)
+    logger.info('set state to:', this.readyState)
   }
 
   private isInternalEventName(eventName: string | number | symbol): boolean {