msw 2.13.6 → 2.14.0

package/lib/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.13.6'
+const PACKAGE_VERSION = '2.14.0'
 const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw",
-  "version": "2.13.6",
+  "version": "2.14.0",
   "description": "Seamless REST/GraphQL API mocking library for browser and Node.js.",
   "type": "commonjs",
   "main": "./lib/core/index.js",
@@ -286,7 +286,7 @@
     "vitest-environment-miniflare": "^2.14.4",
     "webpack": "^5.106.2",
     "webpack-http-server": "^0.5.0",
-    "msw": "^2.13.6"
+    "msw": "^2.14.0"
   },
   "peerDependencies": {
     "typescript": ">= 4.8.x"

package/src/core/experimental/frames/http-frame.test.ts

@@ -4,7 +4,8 @@ import { ws } from '../../ws'
 import { bypass } from '../../bypass'
 import type { HttpNetworkFrameEventMap } from './http-frame'
 import { HttpNetworkFrame } from './http-frame'
-import { InMemoryHandlersController } from '#core/experimental/handlers-controller'
+import { InMemoryHandlersController } from '../../experimental/handlers-controller'
+import { getSiblingHandlers } from '../../utils/internal/attachSiblingHandlers'
 
 beforeAll(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {})
@@ -46,6 +47,9 @@ it('filters only request type handlers', async () => {
   const webSocketHandlers = [
     ws.link('ws://localhost').addEventListener('connection', () => {}),
   ]
+  const webSocketSiblingHandlers = webSocketHandlers.flatMap((handler) =>
+    getSiblingHandlers(handler),
+  )
 
   const controller = new InMemoryHandlersController([
     ...httpHandlers,
@@ -55,6 +59,7 @@ it('filters only request type handlers', async () => {
 
   expect(frame.getHandlers(controller)).toEqual([
     ...httpHandlers,
+    ...webSocketSiblingHandlers,
     ...graphqlHandlers,
   ])
   expect(frame.getHandlers(new InMemoryHandlersController([]))).toEqual([])

package/src/core/experimental/frames/http-frame.ts

@@ -251,9 +251,13 @@ export abstract class HttpNetworkFrame extends NetworkFrame<
       return null
     }
 
+    const responseCloneForLogs = resolutionContext?.quiet
+      ? null
+      : response.clone()
+
     await storeResponseCookies(request, response)
 
-    this.respondWith(response.clone())
+    this.respondWith(response)
 
     this.events.emit(
       new RequestEvent('request:end', {
@@ -265,7 +269,7 @@ export abstract class HttpNetworkFrame extends NetworkFrame<
     if (!resolutionContext?.quiet) {
       handler.log({
         request: requestCloneForLogs!,
-        response,
+        response: responseCloneForLogs!,
         parsedResult,
       })
     }

package/src/core/experimental/handlers-controller.test.ts

@@ -1,8 +1,68 @@
 import { http } from '../http'
 import { graphql } from '../graphql'
 import { ws } from '../ws'
+import { getSiblingHandlers } from '../utils/internal/attachSiblingHandlers'
 import { InMemoryHandlersController } from './handlers-controller'
 
+describe('constructor', () => {
+  it('places the sibling in its own kind bucket', () => {
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    const controller = new InMemoryHandlersController([wsHandler])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('interleaves the sibling at the owner position when grouping by kind', () => {
+    const httpOne = http.get('/', () => {})
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+    const httpTwo = http.get('/', () => {})
+
+    const controller = new InMemoryHandlersController([
+      httpOne,
+      wsHandler,
+      httpTwo,
+    ])
+
+    expect(controller.getHandlersByKind('request')).toEqual([
+      httpOne,
+      upgradeHandler,
+      httpTwo,
+    ])
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+  })
+
+  it('extracts siblings from every owner in the input list', () => {
+    const wsOne = ws.link('*').addEventListener('connection', () => {})
+    const wsTwo = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeOne] = getSiblingHandlers(wsOne)
+    const [upgradeTwo] = getSiblingHandlers(wsTwo)
+
+    const controller = new InMemoryHandlersController([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([
+      upgradeOne,
+      upgradeTwo,
+    ])
+  })
+
+  it('dedupes the shared upgrade sibling across multiple handlers from the same link', () => {
+    const chat = ws.link('*')
+    const wsOne = chat.addEventListener('connection', () => {})
+    const wsTwo = chat.addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsOne)
+
+    const controller = new InMemoryHandlersController([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+})
+
 describe(InMemoryHandlersController.prototype.use, () => {
   it('prepends a handler to an empty controller', () => {
     const controller = new InMemoryHandlersController([])
@@ -51,6 +111,44 @@ describe(InMemoryHandlersController.prototype.use, () => {
 
     expect(controller.currentHandlers()).toEqual([graphqlOne, httpTwo, httpOne])
   })
+
+  it('propagates siblings to their kind buckets at runtime', () => {
+    const controller = new InMemoryHandlersController([])
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    controller.use([wsHandler])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('prepends incoming siblings before existing handlers of the same kind', () => {
+    const existingHttp = http.get('/existing', () => {})
+    const controller = new InMemoryHandlersController([existingHttp])
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    controller.use([wsHandler])
+
+    expect(controller.getHandlersByKind('request')).toEqual([
+      upgradeHandler,
+      existingHttp,
+    ])
+  })
+
+  it('dedupes the shared upgrade sibling when called with multiple handlers from the same link', () => {
+    const chat = ws.link('*')
+    const wsOne = chat.addEventListener('connection', () => {})
+    const wsTwo = chat.addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsOne)
+
+    const controller = new InMemoryHandlersController([])
+    controller.use([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
 })
 
 describe(InMemoryHandlersController.prototype.reset, () => {
@@ -96,6 +194,42 @@ describe(InMemoryHandlersController.prototype.reset, () => {
      */
     expect(controller.currentHandlers()).toEqual([httpTwo])
   })
+
+  it('places siblings into their kind buckets when resetting to next handlers', () => {
+    const controller = new InMemoryHandlersController([])
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    controller.reset([wsHandler])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('restores siblings when resetting to the initial handlers', () => {
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+    const controller = new InMemoryHandlersController([wsHandler])
+
+    controller.use([http.get('/runtime', () => {})])
+    controller.reset([])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('dedupes the shared upgrade sibling when reset with multiple handlers from the same link', () => {
+    const chat = ws.link('*')
+    const wsOne = chat.addEventListener('connection', () => {})
+    const wsTwo = chat.addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsOne)
+
+    const controller = new InMemoryHandlersController([])
+    controller.reset([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
 })
 
 describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
@@ -112,11 +246,10 @@ describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
       ]).getHandlersByKind('websocket'),
     ).toEqual([])
 
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
     expect(
-      new InMemoryHandlersController([
-        ws.link('*').addEventListener('connection', () => {}),
-      ]).getHandlersByKind('request'),
-    ).toEqual([])
+      new InMemoryHandlersController([wsHandler]).getHandlersByKind('request'),
+    ).toEqual(getSiblingHandlers(wsHandler))
   })
 
   it('returns all handlers if they all match', () => {
@@ -142,6 +275,7 @@ describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
     const httpHandler = http.get('/', () => {})
     const graphqlHandler = graphql.query('', () => {})
     const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const wsHandlerSiblings = getSiblingHandlers(wsHandler)
 
     expect(
       new InMemoryHandlersController([
@@ -149,7 +283,7 @@ describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
         graphqlHandler,
         wsHandler,
       ]).getHandlersByKind('request'),
-    ).toEqual([httpHandler, graphqlHandler])
+    ).toEqual([httpHandler, graphqlHandler, ...wsHandlerSiblings])
 
     expect(
       new InMemoryHandlersController([

package/src/core/experimental/handlers-controller.ts

@@ -2,6 +2,7 @@ import { invariant } from 'outvariant'
 import { type RequestHandler } from '../handlers/RequestHandler'
 import { type WebSocketHandler } from '../handlers/WebSocketHandler'
 import { devUtils } from '../utils/internal/devUtils'
+import { getSiblingHandlers } from '../utils/internal/attachSiblingHandlers'
 
 export type AnyHandler = RequestHandler | WebSocketHandler
 export type HandlersMap = Partial<Record<AnyHandler['kind'], Array<AnyHandler>>>
@@ -9,11 +10,23 @@ export type HandlersMap = Partial<Record<AnyHandler['kind'], Array<AnyHandler>>>
 export function groupHandlersByKind(handlers: Array<AnyHandler>): HandlersMap {
   const groups: HandlersMap = {}
 
+  const pushUnique = (kind: AnyHandler['kind'], handler: AnyHandler) => {
+    const bucket = (groups[kind] ||= [])
+
+    if (!bucket.includes(handler)) {
+      bucket.push(handler)
+    }
+  }
+
   /**
    * @note `Object.groupBy` is not implemented in Node.js v20.
    */
   for (const handler of handlers) {
-    ;(groups[handler.kind] ||= []).push(handler)
+    pushUnique(handler.kind, handler)
+
+    for (const sibling of getSiblingHandlers(handler)) {
+      pushUnique(sibling.kind, sibling)
+    }
   }
 
   return groups
@@ -69,14 +82,16 @@ export abstract class HandlersController {
     }
 
     const { handlers } = this.getState()
-
-    // Iterate over next handlers and prepend them to their respective lists.
-    // Iterate in a reverse order to the keep the order of the runtime handlers as provided.
-    for (let i = nextHandlers.length - 1; i >= 0; i--) {
-      const handler = nextHandlers[i]
-      handlers[handler.kind] = handlers[handler.kind]
-        ? [handler, ...handlers[handler.kind]!]
-        : [handler]
+    const overrides = groupHandlersByKind(nextHandlers)
+
+    // Prepend overrides to their respective kind buckets so they take
+    // priority over existing handlers while preserving input order.
+    for (const kind in overrides) {
+      const overridesForKind = overrides[kind as AnyHandler['kind']]!
+      const existingForKind = handlers[kind as AnyHandler['kind']]
+      handlers[kind as AnyHandler['kind']] = existingForKind
+        ? [...overridesForKind, ...existingForKind]
+        : overridesForKind
     }
 
     this.setState({ handlers })

package/src/core/handlers/RequestHandler.ts

@@ -1,3 +1,4 @@
+import { Headers as HeadersPolyfill } from 'headers-polyfill'
 import { getCallFrame } from '../utils/internal/getCallFrame'
 import {
   isIterable,
@@ -12,6 +13,7 @@ import {
   type DefaultUnsafeFetchResponse,
 } from '../HttpResponse'
 import type { GraphQLRequestBody } from './GraphQLHandler'
+import { getRawSetCookie } from '../utils/HttpResponse/decorators'
 
 export type DefaultRequestMultipartBody = Record<
   string,
@@ -335,7 +337,7 @@ export abstract class RequestHandler<
         ...resolverExtras,
         requestId: args.requestId,
         request: args.request,
-      }) as Promise<Response>
+      }) as Promise<Response | undefined>
     ).catch((errorOrResponse) => {
       // Allow throwing a Response instance in a response resolver.
       if (errorOrResponse instanceof Response) {
@@ -348,6 +350,10 @@ export abstract class RequestHandler<
 
     const mockedResponse = await mockedResponsePromise
 
+    if (mockedResponse) {
+      forwardResponseCookies(mockedResponse)
+    }
+
     const executionResult = this.createExecutionResult({
       // Pass the cloned request to the result so that logging
       // and other consumers could read its body once more.
@@ -416,3 +422,32 @@ export abstract class RequestHandler<
     }
   }
 }
+
+/**
+ * Forwards the cookies from the given response to `document.cookie`.
+ */
+export function forwardResponseCookies(response: Response): void {
+  // Cookie forwarding is only relevant in the browser.
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const responseCookies = getRawSetCookie(response)
+
+  if (!responseCookies) {
+    return
+  }
+
+  // Write the mocked response cookies to the document.
+  // Use `headers-polyfill` to get the Set-Cookie header value correctly.
+  // This is an alternative until TypeScript 5.2
+  // and Node.js v20 become the minimum supported versions
+  // and "Headers.prototype.getSetCookie" can be used directly.
+  const allResponseCookies = HeadersPolyfill.prototype.getSetCookie.call(
+    new Headers([['set-cookie', responseCookies]]),
+  )
+
+  for (const cookieString of allResponseCookies) {
+    document.cookie = cookieString
+  }
+}

package/src/core/handlers/WebSocketHandler.ts

@@ -118,7 +118,7 @@ export class WebSocketHandler {
       params: parsedResult.match.params || {},
     }
 
-    if (resolutionContext?.[kAutoConnect]) {
+    if (resolutionContext?.[kAutoConnect] ?? true) {
       if (this[kConnect](resolvedConnection)) {
         return resolvedConnection
       }

package/src/core/utils/HttpResponse/decorators.ts

@@ -1,10 +1,9 @@
 import statuses from '../../../shims/statuses'
-import { Headers as HeadersPolyfill } from 'headers-polyfill'
 import type { HttpResponseInit } from '../../HttpResponse'
 
 const { message } = statuses
 
-export const kSetCookie = Symbol('kSetCookie')
+const kSetCookie = Symbol('kSetCookie')
 
 export interface HttpResponseDecoratedInit extends HttpResponseInit {
   status: number
@@ -31,7 +30,7 @@ export function decorateResponse(
   response: Response,
   init: HttpResponseDecoratedInit,
 ): Response {
-  // Allow to mock the response type.
+  // Allow mocking the response type.
   if (init.type) {
     Object.defineProperty(response, 'type', {
       value: init.type,
@@ -52,25 +51,11 @@ export function decorateResponse(
       enumerable: false,
       writable: false,
     })
-
-    // Cookie forwarding is only relevant in the browser.
-    if (typeof document !== 'undefined') {
-      // Write the mocked response cookies to the document.
-      // Use `headers-polyfill` to get the Set-Cookie header value correctly.
-      // This is an alternative until TypeScript 5.2
-      // and Node.js v20 become the minimum supported version
-      // and getSetCookie in Headers can be used directly.
-      const responseCookiePairs = HeadersPolyfill.prototype.getSetCookie.call(
-        init.headers,
-      )
-
-      for (const cookieString of responseCookiePairs) {
-        // No need to parse the cookie headers because it's defined
-        // as the valid cookie string to begin with.
-        document.cookie = cookieString
-      }
-    }
   }
 
   return response
 }
+
+export function getRawSetCookie(response: Response): string | undefined {
+  return Reflect.get(response, kSetCookie)
+}

package/src/core/utils/internal/attachSiblingHandlers.ts

@@ -0,0 +1,28 @@
+import { invariant } from 'outvariant'
+import type { AnyHandler } from '../../experimental/handlers-controller'
+
+const kSiblingHandlers = Symbol('kSiblingHandlers')
+
+export function attachSiblingHandlers<T extends AnyHandler>(
+  owner: T,
+  siblings: Array<AnyHandler>,
+): T {
+  invariant(
+    getSiblingHandlers(owner).length === 0,
+    'Failed to merge handlers: the owner "%s" handler is already merged',
+    owner.kind,
+  )
+
+  Object.defineProperty(owner, kSiblingHandlers, {
+    value: siblings,
+    enumerable: false,
+    writable: false,
+    configurable: false,
+  })
+
+  return owner
+}
+
+export function getSiblingHandlers(owner: AnyHandler): Array<AnyHandler> {
+  return Reflect.get(owner, kSiblingHandlers) || []
+}

package/src/core/utils/request/storeResponseCookies.ts

@@ -1,5 +1,5 @@
 import { cookieStore } from '../cookieStore'
-import { kSetCookie } from '../HttpResponse/decorators'
+import { getRawSetCookie } from '../HttpResponse/decorators'
 
 export async function storeResponseCookies(
   request: Request,
@@ -7,9 +7,7 @@ export async function storeResponseCookies(
 ): Promise<void> {
   // Grab the raw "Set-Cookie" response header provided
   // in the HeadersInit for this mocked response.
-  const responseCookies = Reflect.get(response, kSetCookie) as
-    | string
-    | undefined
+  const responseCookies = getRawSetCookie(response)
 
   if (responseCookies) {
     await cookieStore.setCookie(responseCookies, request.url)

package/src/core/ws.ts

@@ -1,4 +1,5 @@
 import { invariant } from 'outvariant'
+import { FetchResponse, resolveWebSocketUrl } from '@mswjs/interceptors'
 import type {
   WebSocketData,
   WebSocketClientConnectionProtocol,
@@ -9,8 +10,15 @@ import {
   type WebSocketHandlerEventMap,
 } from './handlers/WebSocketHandler'
 import { hasRefCounted } from './utils/internal/hasRefCounted'
-import { type Path, isPath } from './utils/matching/matchRequestUrl'
+import {
+  type Path,
+  type PathParams,
+  isPath,
+  matchRequestUrl,
+} from './utils/matching/matchRequestUrl'
 import { WebSocketClientManager } from './ws/WebSocketClientManager'
+import { http } from './http'
+import { attachSiblingHandlers } from './utils/internal/attachSiblingHandlers'
 
 const webSocketChannel = new BroadcastChannel('msw:websocket-client-manager')
 
@@ -100,18 +108,29 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
 
   const clientManager = new WebSocketClientManager(webSocketChannel)
 
+  // The same upgrade handler instance is attached as a sibling to every
+  // WebSocketHandler returned by this link. `groupHandlersByKind` dedupes
+  // by reference, so it lands in the `request` bucket exactly once regardless
+  // of which subset of WS handlers the user ends up registering.
+  const upgradeHandler = http.get(({ request }) => {
+    return (
+      request.headers.get('upgrade')?.toLowerCase() === 'websocket' &&
+      matchRequestUrl(new URL(resolveWebSocketUrl(request.url)), url).matches
+    )
+  }, ws.onUpgrade)
+
   return {
     get clients() {
       return clientManager.clients
     },
     addEventListener(event, listener) {
-      const handler = new WebSocketHandler(url)
+      const webSocketHandler = new WebSocketHandler(url)
 
       // Add the connection event listener for when the
       // handler matches and emits a connection event.
       // When that happens, store that connection in the
       // set of all connections for reference.
-      handler[kEmitter].on('connection', async ({ client }) => {
+      webSocketHandler[kEmitter].on('connection', async ({ client }) => {
         await clientManager.addConnection(client)
       })
 
@@ -119,9 +138,9 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
       // the "run()" method on the WebSocketHandler.
       // If the handler matches, it will emit the "connection"
       // event. Attach the user-defined listener to that event.
-      handler[kEmitter].on(event, listener)
+      webSocketHandler[kEmitter].on(event, listener)
 
-      return handler
+      return attachSiblingHandlers(webSocketHandler, [upgradeHandler])
     },
 
     broadcast(data) {
@@ -145,6 +164,24 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
   }
 }
 
+const WEBSOCKET_GUID = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
+
+interface WebSocketNamespace {
+  link: typeof createWebSocketLinkHandler
+  /**
+   * Request handler for the `upgrade` requests to the WebSocket protocol.
+   * This requires a WebSocket handler to be present to fire.
+   * @note This only affects Node.js as the `upgrade` request header is
+   * forbidden and cannot be read in the browser. Consider using the
+   * `WebSocket` API for establishing WebSocket connections in the browser.
+   */
+  onUpgrade: (info: {
+    requestId: string
+    request: Request
+    params: PathParams
+  }) => Promise<Response | undefined> | Response | undefined
+}
+
 /**
  * A namespace to intercept and mock WebSocket connections.
  *
@@ -154,8 +191,30 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
  * @see {@link https://mswjs.io/docs/api/ws `ws` API reference}
  * @see {@link https://mswjs.io/docs/basics/handling-websocket-events Handling WebSocket events}
  */
-export const ws = {
+export const ws: WebSocketNamespace = {
   link: createWebSocketLinkHandler,
+  async onUpgrade({ request }) {
+    const key = request.headers.get('sec-websocket-key')
+
+    if (!key) {
+      return
+    }
+
+    const keyBytes = new TextEncoder().encode(key + WEBSOCKET_GUID)
+    const digest = await crypto.subtle.digest('SHA-1', keyBytes)
+    const acceptValue = btoa(String.fromCharCode(...new Uint8Array(digest)))
+
+    new WebSocket(resolveWebSocketUrl(request.url))
+
+    return new FetchResponse(null, {
+      status: 101,
+      headers: {
+        upgrade: 'websocket',
+        connection: 'upgrade',
+        'sec-websocket-accept': acceptValue,
+      },
+    })
+  },
 }
 
 export { type WebSocketData }