@mswjs/interceptors 0.25.1 → 0.25.3

package/src/interceptors/ClientRequest/NodeClientRequest.ts

@@ -1,6 +1,7 @@
 import { ClientRequest, IncomingMessage } from 'http'
 import type { Logger } from '@open-draft/logger'
 import { until } from '@open-draft/until'
+import { DeferredPromise } from '@open-draft/deferred-promise'
 import type { ClientRequestEmitter } from '.'
 import {
   ClientRequestEndCallback,
@@ -17,7 +18,7 @@ import { createResponse } from './utils/createResponse'
 import { createRequest } from './utils/createRequest'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
 import { uuidv4 } from '../../utils/uuid'
-import { DeferredPromise } from '@open-draft/deferred-promise'
+import { emitAsync } from '../../utils/emitAsync'
 
 export type Protocol = 'http' | 'https'
 
@@ -138,7 +139,17 @@ export class NodeClientRequest extends ClientRequest {
     this.writeRequestBodyChunk(chunk, encoding || undefined)
 
     const capturedRequest = createRequest(this)
-    const interactiveRequest = toInteractiveRequest(capturedRequest)
+    const { interactiveRequest, requestController } =
+      toInteractiveRequest(capturedRequest)
+
+    /**
+     * @todo Remove this modification of the original request
+     * and expose the controller alongside it in the "request"
+     * listener argument.
+     */
+    Object.defineProperty(capturedRequest, 'respondWith', {
+      value: requestController.respondWith.bind(requestController),
+    })
 
     // Prevent handling this request if it has already been handled
     // in another (parent) interceptor (like XMLHttpRequest -> ClientRequest).
@@ -149,34 +160,46 @@ export class NodeClientRequest extends ClientRequest {
       return this.passthrough(chunk, encoding, callback)
     }
 
-    // Notify the interceptor about the request.
-    // This will call any "request" listeners the users have.
-    this.logger.info(
-      'emitting the "request" event for %d listener(s)...',
-      this.emitter.listenerCount('request')
-    )
-    this.emitter.emit('request', {
-      request: interactiveRequest,
-      requestId,
+    // Add the last "request" listener that always resolves
+    // the pending response Promise. This way if the consumer
+    // hasn't handled the request themselves, we will prevent
+    // the response Promise from pending indefinitely.
+    this.emitter.once('request', ({ requestId: pendingRequestId }) => {
+      /**
+       * @note Ignore request events emitted by irrelevant
+       * requests. This happens when response patching.
+       */
+      if (pendingRequestId !== requestId) {
+        return
+      }
+
+      if (requestController.responsePromise.state === 'pending') {
+        this.logger.info(
+          'request has not been handled in listeners, executing fail-safe listener...'
+        )
+
+        requestController.responsePromise.resolve(undefined)
+      }
     })
 
     // Execute the resolver Promise like a side-effect.
     // Node.js 16 forces "ClientRequest.end" to be synchronous and return "this".
     until(async () => {
-      await this.emitter.untilIdle(
-        'request',
-        ({ args: [{ requestId: pendingRequestId }] }) => {
-          /**
-           * @note Await only those listeners that are relevant to this request.
-           * This prevents extraneous parallel request from blocking the resolution
-           * of another, unrelated request. For example, during response patching,
-           * when request resolution is nested.
-           */
-          return pendingRequestId === requestId
-        }
+      // Notify the interceptor about the request.
+      // This will call any "request" listeners the users have.
+      this.logger.info(
+        'emitting the "request" event for %d listener(s)...',
+        this.emitter.listenerCount('request')
       )
 
-      const [mockedResponse] = await interactiveRequest.respondWith.invoked()
+      await emitAsync(this.emitter, 'request', {
+        request: interactiveRequest,
+        requestId,
+      })
+
+      this.logger.info('all "request" listeners done!')
+
+      const mockedResponse = await requestController.responsePromise
       this.logger.info('event.respondWith called with:', mockedResponse)
 
       return mockedResponse
@@ -203,6 +226,8 @@ export class NodeClientRequest extends ClientRequest {
           'encountered resolver exception, aborting request...',
           resolverResult.error
         )
+
+        this.destroyed = true
         this.emit('error', resolverResult.error)
         this.terminate()
 
@@ -212,7 +237,17 @@ export class NodeClientRequest extends ClientRequest {
       const mockedResponse = resolverResult.data
 
       if (mockedResponse) {
-        this.logger.info('received mocked response:', mockedResponse)
+        this.logger.info(
+          'received mocked response:',
+          mockedResponse.status,
+          mockedResponse.statusText
+        )
+
+        /**
+         * @note Ignore this request being destroyed by TLS in Node.js
+         * due to connection errors.
+         */
+        this.destroyed = false
 
         // Handle mocked "Response.error" network error responses.
         if (mockedResponse.type === 'error') {
@@ -431,10 +466,29 @@ export class NodeClientRequest extends ClientRequest {
     }
     this.logger.info('mocked response headers ready:', headers)
 
+    /**
+     * Set the internal "res" property to the mocked "OutgoingMessage"
+     * to make the "ClientRequest" instance think there's data received
+     * from the socket.
+     * @see https://github.com/nodejs/node/blob/9c405f2591f5833d0247ed0fafdcd68c5b14ce7a/lib/_http_client.js#L501
+     *
+     * Set the response immediately so the interceptor could stream data
+     * chunks to the request client as they come in.
+     */
+    // @ts-ignore
+    this.res = this.response
+    this.emit('response', this.response)
+
     const isResponseStreamFinished = new DeferredPromise<void>()
 
     const finishResponseStream = () => {
       this.logger.info('finished response stream!')
+
+      // Push "null" to indicate that the response body is complete
+      // and shouldn't be written to anymore.
+      this.response.push(null)
+      this.response.complete = true
+
       isResponseStreamFinished.resolve()
     }
 
@@ -458,29 +512,12 @@ export class NodeClientRequest extends ClientRequest {
       finishResponseStream()
     }
 
-    /**
-     * Set the internal "res" property to the mocked "OutgoingMessage"
-     * to make the "ClientRequest" instance think there's data received
-     * from the socket.
-     * @see https://github.com/nodejs/node/blob/9c405f2591f5833d0247ed0fafdcd68c5b14ce7a/lib/_http_client.js#L501
-     *
-     * Set the response immediately so the interceptor could stream data
-     * chunks to the request client as they come in.
-     */
-    // @ts-ignore
-    this.res = this.response
-    this.emit('response', this.response)
-
     isResponseStreamFinished.then(() => {
       this.logger.info('finalizing response...')
-
-      // Push "null" to indicate that the response body is complete
-      // and shouldn't be written to anymore.
-      this.response.push(null)
-      this.response.complete = true
       this.response.emit('end')
-
       this.terminate()
+
+      this.logger.info('request complete!')
     })
   }
 

package/src/interceptors/ClientRequest/http.get.ts

@@ -10,7 +10,9 @@ import {
 } from './utils/normalizeClientRequestArgs'
 
 export function get(protocol: Protocol, options: NodeClientOptions) {
-  return (...args: ClientRequestArgs): ClientRequest => {
+  return function interceptorsHttpGet(
+    ...args: ClientRequestArgs
+  ): ClientRequest {
     const clientRequestArgs = normalizeClientRequestArgs(
       `${protocol}:`,
       ...args

package/src/interceptors/ClientRequest/http.request.ts

@@ -13,7 +13,9 @@ import {
 const logger = new Logger('http request')
 
 export function request(protocol: Protocol, options: NodeClientOptions) {
-  return (...args: ClientRequestArgs): ClientRequest => {
+  return function interceptorsHttpRequest(
+    ...args: ClientRequestArgs
+  ): ClientRequest {
     logger.info('request call (protocol "%s"):', protocol, args)
 
     const clientRequestArgs = normalizeClientRequestArgs(

package/src/interceptors/ClientRequest/index.test.ts

@@ -57,14 +57,13 @@ it('forbids calling "respondWith" multiple times for the same request', async ()
   expect(response.statusMessage).toBe('')
 })
 
-
 it('abort the request if the abort signal is emitted', async () => {
   const requestUrl = httpServer.http.url('/')
 
   const requestEmitted = new DeferredPromise<void>()
   interceptor.on('request', async function delayedResponse({ request }) {
     requestEmitted.resolve()
-    await sleep(10000)
+    await sleep(10_000)
     request.respondWith(new Response())
   })
 
@@ -76,7 +75,7 @@ it('abort the request if the abort signal is emitted', async () => {
   abortController.abort()
 
   const requestAborted = new DeferredPromise<void>()
-  request.on('error', function(err) {
+  request.on('error', function (err) {
     expect(err.name).toEqual('AbortError')
     requestAborted.resolve()
   })

package/src/interceptors/ClientRequest/index.ts

@@ -1,13 +1,13 @@
 import http from 'http'
 import https from 'https'
+import type { Emitter } from 'strict-event-emitter'
 import { HttpRequestEventMap } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
-import { AsyncEventEmitter } from '../../utils/AsyncEventEmitter'
 import { get } from './http.get'
 import { request } from './http.request'
 import { NodeClientOptions, Protocol } from './NodeClientRequest'
 
-export type ClientRequestEmitter = AsyncEventEmitter<HttpRequestEventMap>
+export type ClientRequestEmitter = Emitter<HttpRequestEventMap>
 
 export type ClientRequestModules = Map<Protocol, typeof http | typeof https>
 

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

@@ -1,11 +1,11 @@
 import { it, expect } from 'vitest'
 import { Logger } from '@open-draft/logger'
 import { HttpRequestEventMap } from '../../..'
-import { AsyncEventEmitter } from '../../../utils/AsyncEventEmitter'
 import { NodeClientRequest } from '../NodeClientRequest'
 import { createRequest } from './createRequest'
+import { Emitter } from 'strict-event-emitter'
 
-const emitter = new AsyncEventEmitter<HttpRequestEventMap>()
+const emitter = new Emitter<HttpRequestEventMap>()
 const logger = new Logger('test')
 
 it('creates a fetch Request with a JSON body', async () => {

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

@@ -2,6 +2,7 @@ import { it, expect } from 'vitest'
 import { Socket } from 'net'
 import * as http from 'http'
 import { createResponse } from './createResponse'
+import { responseStatusCodesWithoutBody } from '../../../utils/responseUtils'
 
 it('creates a fetch api response from http incoming message', async () => {
   const message = new http.IncomingMessage(new Socket())
@@ -20,3 +21,25 @@ it('creates a fetch api response from http incoming message', async () => {
   expect(response.headers.get('content-type')).toBe('application/json')
   expect(await response.json()).toEqual({ firstName: 'John' })
 })
+
+it.each(responseStatusCodesWithoutBody)(
+  'ignores message body for %i response status',
+  (responseStatus) => {
+    const message = new http.IncomingMessage(new Socket())
+    message.statusCode = responseStatus
+
+    const response = createResponse(message)
+
+    // These chunks will be ignored: this response
+    // cannot have body. We don't forward this error to
+    // the consumer because it's us who converts the
+    // internal stream to a Fetch API Response instance.
+    // Consumers will rely on the Response API when constructing
+    // mocked responses.
+    message.emit('data', Buffer.from('hello'))
+    message.emit('end')
+
+    expect(response.status).toBe(responseStatus)
+    expect(response.body).toBe(null)
+  }
+)

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

@@ -1,24 +1,29 @@
 import type { IncomingHttpHeaders, IncomingMessage } from 'http'
+import { responseStatusCodesWithoutBody } from '../../../utils/responseUtils'
 
 /**
  * Creates a Fetch API `Response` instance from the given
  * `http.IncomingMessage` instance.
  */
 export function createResponse(message: IncomingMessage): Response {
-  const readable = new ReadableStream({
-    start(controller) {
-      message.on('data', (chunk) => controller.enqueue(chunk))
-      message.on('end', () => controller.close())
-
-      /**
-       * @todo Should also listen to the "error" on the message
-       * and forward it to the controller. Otherwise the stream
-       * will pend indefinitely.
-       */
-    },
-  })
+  const responseBodyOrNull = responseStatusCodesWithoutBody.includes(
+    message.statusCode || 200
+  )
+    ? null
+    : new ReadableStream({
+        start(controller) {
+          message.on('data', (chunk) => controller.enqueue(chunk))
+          message.on('end', () => controller.close())
+
+          /**
+           * @todo Should also listen to the "error" on the message
+           * and forward it to the controller. Otherwise the stream
+           * will pend indefinitely.
+           */
+        },
+      })
 
-  return new Response(readable, {
+  return new Response(responseBodyOrNull, {
     status: message.statusCode,
     statusText: message.statusMessage,
     headers: createHeadersFromIncomingHttpHeaders(message.headers),

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -2,6 +2,7 @@ import { until } from '@open-draft/until'
 import type { Logger } from '@open-draft/logger'
 import { XMLHttpRequestEmitter } from '.'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
+import { emitAsync } from '../../utils/emitAsync'
 import { XMLHttpRequestController } from './XMLHttpRequestController'
 
 export interface XMLHttpRequestProxyOptions {
@@ -42,38 +43,41 @@ export function createXMLHttpRequestProxy({
         )
       }
 
-      const requestController = new XMLHttpRequestController(
+      const xhrRequestController = new XMLHttpRequestController(
         originalRequest,
         logger
       )
 
-      requestController.onRequest = async function ({ request, requestId }) {
-        // Notify the consumer about a new request.
-        const interactiveRequest = toInteractiveRequest(request)
-
-        this.logger.info(
-          'emitting the "request" event for %s listener(s)...',
-          emitter.listenerCount('request')
-        )
-        emitter.emit('request', {
-          request: interactiveRequest,
-          requestId,
-        })
+      xhrRequestController.onRequest = async function ({ request, requestId }) {
+        const { interactiveRequest, requestController } =
+          toInteractiveRequest(request)
 
         this.logger.info('awaiting mocked response...')
 
+        emitter.once('request', ({ requestId: pendingRequestId }) => {
+          if (pendingRequestId !== requestId) {
+            return
+          }
+
+          if (requestController.responsePromise.state === 'pending') {
+            requestController.respondWith(undefined)
+          }
+        })
+
         const resolverResult = await until(async () => {
-          await emitter.untilIdle(
-            'request',
-            ({ args: [{ requestId: pendingRequestId }] }) => {
-              return pendingRequestId === requestId
-            }
+          this.logger.info(
+            'emitting the "request" event for %s listener(s)...',
+            emitter.listenerCount('request')
           )
 
+          await emitAsync(emitter, 'request', {
+            request: interactiveRequest,
+            requestId,
+          })
+
           this.logger.info('all "request" listeners settled!')
 
-          const [mockedResponse] =
-            await interactiveRequest.respondWith.invoked()
+          const mockedResponse = await requestController.responsePromise
 
           this.logger.info('event.respondWith called with:', mockedResponse)
 
@@ -91,7 +95,7 @@ export function createXMLHttpRequestProxy({
            * since not all consumers are expecting to handle errors.
            * If they don't, this error will be swallowed.
            */
-          requestController.errorWith(resolverResult.error)
+          xhrRequestController.errorWith(resolverResult.error)
           return
         }
 
@@ -109,11 +113,11 @@ export function createXMLHttpRequestProxy({
               'received a network error response, rejecting the request promise...'
             )
 
-            requestController.errorWith(new TypeError('Network error'))
+            xhrRequestController.errorWith(new TypeError('Network error'))
             return
           }
 
-          return requestController.respondWith(mockedResponse)
+          return xhrRequestController.respondWith(mockedResponse)
         }
 
         this.logger.info(
@@ -121,7 +125,7 @@ export function createXMLHttpRequestProxy({
         )
       }
 
-      requestController.onResponse = async function ({
+      xhrRequestController.onResponse = async function ({
         response,
         isMockedResponse,
         request,
@@ -143,7 +147,7 @@ export function createXMLHttpRequestProxy({
       // 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 requestController.request
+      return xhrRequestController.request
     },
   })
 

package/src/interceptors/XMLHttpRequest/index.ts

@@ -1,8 +1,8 @@
 import { invariant } from 'outvariant'
+import { Emitter } from 'strict-event-emitter'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
 import { InteractiveRequest } from '../../utils/toInteractiveRequest'
 import { Interceptor } from '../../Interceptor'
-import { AsyncEventEmitter } from '../../utils/AsyncEventEmitter'
 import { createXMLHttpRequestProxy } from './XMLHttpRequestProxy'
 
 export type XMLHttpRequestEventListener = (args: {
@@ -10,7 +10,7 @@ export type XMLHttpRequestEventListener = (args: {
   requestId: string
 }) => Promise<void> | void
 
-export type XMLHttpRequestEmitter = AsyncEventEmitter<HttpRequestEventMap>
+export type XMLHttpRequestEmitter = Emitter<HttpRequestEventMap>
 
 export class XMLHttpRequestInterceptor extends Interceptor<HttpRequestEventMap> {
   static interceptorSymbol = Symbol('xhr')

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

@@ -1,4 +1,4 @@
-const statusCodesWithoutBody = [204, 205, 304]
+import { responseStatusCodesWithoutBody } from '../../../utils/responseUtils'
 
 /**
  * Creates a Fetch API `Response` instance from the given
@@ -16,7 +16,9 @@ export function createResponse(
    * when constructing a Response instance.
    * @see https://github.com/mswjs/interceptors/issues/379
    */
-  const responseBodyOrNull = statusCodesWithoutBody.includes(request.status)
+  const responseBodyOrNull = responseStatusCodesWithoutBody.includes(
+    request.status
+  )
     ? null
     : body
 

package/src/interceptors/fetch/index.ts

@@ -1,10 +1,11 @@
-import { DeferredPromise } from '@open-draft/deferred-promise'
 import { invariant } from 'outvariant'
+import { DeferredPromise } from '@open-draft/deferred-promise'
 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 { emitAsync } from '../../utils/emitAsync'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -34,15 +35,22 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
       this.logger.info('[%s] %s', request.method, request.url)
 
-      const interactiveRequest = toInteractiveRequest(request)
+      const { interactiveRequest, requestController } =
+        toInteractiveRequest(request)
 
       this.logger.info(
         'emitting the "request" event for %d listener(s)...',
         this.emitter.listenerCount('request')
       )
-      this.emitter.emit('request', {
-        request: interactiveRequest,
-        requestId,
+
+      this.emitter.once('request', ({ requestId: pendingRequestId }) => {
+        if (pendingRequestId !== requestId) {
+          return
+        }
+
+        if (requestController.responsePromise.state === 'pending') {
+          requestController.responsePromise.resolve(undefined)
+        }
       })
 
       this.logger.info('awaiting for the mocked response...')
@@ -59,18 +67,23 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
       )
 
       const resolverResult = await until(async () => {
-        const allListenersResolved = this.emitter.untilIdle(
-          'request',
-          ({ args: [{ requestId: pendingRequestId }] }) => {
-            return pendingRequestId === requestId
-          }
-        )
+        const listenersFinished = emitAsync(this.emitter, 'request', {
+          request: interactiveRequest,
+          requestId,
+        })
 
-        await Promise.race([requestAborted, allListenersResolved])
+        await Promise.race([
+          requestAborted,
+          // Put the listeners invocation Promise in the same race condition
+          // with the request abort Promise because otherwise awaiting the listeners
+          // would always yield some response (or undefined).
+          listenersFinished,
+          requestController.responsePromise,
+        ])
 
         this.logger.info('all request listeners have been resolved!')
 
-        const [mockedResponse] = await interactiveRequest.respondWith.invoked()
+        const mockedResponse = await requestController.responsePromise
         this.logger.info('event.respondWith called with:', mockedResponse)
 
         return mockedResponse

package/src/utils/RequestController.ts

@@ -0,0 +1,21 @@
+import { invariant } from 'outvariant'
+import { DeferredPromise } from '@open-draft/deferred-promise'
+
+export class RequestController {
+  public responsePromise: DeferredPromise<Response | undefined>
+
+  constructor(protected request: Request) {
+    this.responsePromise = new DeferredPromise()
+  }
+
+  public respondWith(response?: Response): void {
+    invariant(
+      this.responsePromise.state === 'pending',
+      'Failed to respond to "%s %s" request: the "request" event has already been responded to.',
+      this.request.method,
+      this.request.url
+    )
+
+    this.responsePromise.resolve(response)
+  }
+}

package/src/utils/emitAsync.ts

@@ -0,0 +1,25 @@
+import { Emitter, EventMap } from 'strict-event-emitter'
+
+/**
+ * Emits an event on the given emitter but executes
+ * the listeners sequentially. This accounts for asynchronous
+ * listeners (e.g. those having "sleep" and handling the request).
+ */
+export async function emitAsync<
+  Events extends EventMap,
+  EventName extends keyof Events
+>(
+  emitter: Emitter<Events>,
+  eventName: EventName,
+  ...data: Events[EventName]
+): Promise<void> {
+  const listners = emitter.listeners(eventName)
+
+  if (listners.length === 0) {
+    return
+  }
+
+  for (const listener of listners) {
+    await listener.apply(emitter, data)
+  }
+}

package/src/utils/responseUtils.ts

@@ -0,0 +1,5 @@
+/**
+ * Response status codes for responses that cannot have body.
+ * @see https://fetch.spec.whatwg.org/#statuses
+ */
+export const responseStatusCodesWithoutBody = [204, 205, 304]