msw 2.3.0-ws.rc-8 → 2.3.0-ws.rc-10

package/src/core/ws/handleWebSocketEvent.ts

@@ -2,15 +2,20 @@ import type { WebSocketConnectionData } from '@mswjs/interceptors/lib/browser/in
 import { RequestHandler } from '../handlers/RequestHandler'
 import { WebSocketHandler, kDispatchEvent } from '../handlers/WebSocketHandler'
 import { webSocketInterceptor } from './webSocketInterceptor'
+import {
+  onUnhandledRequest,
+  UnhandledRequestStrategy,
+} from '../utils/request/onUnhandledRequest'
 
 interface HandleWebSocketEventOptions {
+  getUnhandledRequestStrategy: () => UnhandledRequestStrategy
   getHandlers: () => Array<RequestHandler | WebSocketHandler>
   onMockedConnection: (connection: WebSocketConnectionData) => void
   onPassthroughConnection: (onnection: WebSocketConnectionData) => void
 }
 
 export function handleWebSocketEvent(options: HandleWebSocketEventOptions) {
-  webSocketInterceptor.on('connection', (connection) => {
+  webSocketInterceptor.on('connection', async (connection) => {
     const handlers = options.getHandlers()
 
     const connectionEvent = new MessageEvent('connection', {
@@ -21,20 +26,21 @@ export function handleWebSocketEvent(options: HandleWebSocketEventOptions) {
     // match the "ws.link()" endpoint predicate. Don't dispatch
     // anything yet so the logger can be attached to the connection
     // before it potentially sends events.
-    const matchingHandlers = handlers.filter<WebSocketHandler>(
-      (handler): handler is WebSocketHandler => {
-        if (handler instanceof WebSocketHandler) {
-          return handler.predicate({
-            event: connectionEvent,
-            parsedResult: handler.parse({
-              event: connectionEvent,
-            }),
-          })
-        }
+    const matchingHandlers: Array<WebSocketHandler> = []
 
-        return false
-      },
-    )
+    for (const handler of handlers) {
+      if (
+        handler instanceof WebSocketHandler &&
+        handler.predicate({
+          event: connectionEvent,
+          parsedResult: handler.parse({
+            event: connectionEvent,
+          }),
+        })
+      ) {
+        matchingHandlers.push(handler)
+      }
+    }
 
     if (matchingHandlers.length > 0) {
       options?.onMockedConnection(connection)
@@ -46,6 +52,26 @@ export function handleWebSocketEvent(options: HandleWebSocketEventOptions) {
         handler[kDispatchEvent](connectionEvent)
       }
     } else {
+      // Construct a request representing this WebSocket connection.
+      const request = new Request(connection.client.url, {
+        headers: {
+          upgrade: 'websocket',
+          connection: 'upgrade',
+        },
+      })
+      await onUnhandledRequest(
+        request,
+        options.getUnhandledRequestStrategy(),
+      ).catch((error) => {
+        const errorEvent = new Event('error')
+        Object.defineProperty(errorEvent, 'cause', {
+          enumerable: true,
+          configurable: false,
+          value: error,
+        })
+        connection.client.socket.dispatchEvent(errorEvent)
+      })
+
       options?.onPassthroughConnection(connection)
 
       // If none of the "ws" handlers matched,

package/src/core/ws/utils/attachWebSocketLogger.ts

@@ -92,12 +92,12 @@ export function attachWebSocketLogger(
         currentTarget: {
           enumerable: true,
           writable: false,
-          value: server['realWebSocket'],
+          value: server.socket,
         },
         target: {
           enumerable: true,
           writable: false,
-          value: server['realWebSocket'],
+          value: server.socket,
         },
       })
 

package/src/core/ws.ts

@@ -1,7 +1,7 @@
 import { invariant } from 'outvariant'
 import type {
-  WebSocketClientConnectionProtocol,
   WebSocketData,
+  WebSocketClientConnectionProtocol,
 } from '@mswjs/interceptors/WebSocket'
 import {
   WebSocketHandler,
@@ -25,6 +25,10 @@ if (isBroadcastChannelWithUnref(webSocketChannel)) {
   webSocketChannel.unref()
 }
 
+export type WebSocketEventListener<
+  EventType extends keyof WebSocketHandlerEventMap,
+> = (...args: WebSocketHandlerEventMap[EventType]) => void
+
 export type WebSocketLink = {
   /**
    * A set of all WebSocket clients connected
@@ -39,13 +43,13 @@ export type WebSocketLink = {
    *
    * @example
    * const chat = ws.link('wss://chat.example.com')
-   * chat.on('connection', listener)
+   * chat.addEventListener('connection', listener)
    *
    * @see {@link https://mswjs.io/docs/api/ws#onevent-listener `on()` API reference}
    */
-  on<EventType extends keyof WebSocketHandlerEventMap>(
+  addEventListener<EventType extends keyof WebSocketHandlerEventMap>(
     event: EventType,
-    listener: (...args: WebSocketHandlerEventMap[EventType]) => void,
+    listener: WebSocketEventListener<EventType>,
   ): WebSocketHandler
 
   /**
@@ -53,7 +57,7 @@ export type WebSocketLink = {
    *
    * @example
    * const service = ws.link('wss://example.com')
-   * service.on('connection', () => {
+   * service.addEventListener('connection', () => {
    *   service.broadcast('hello, everyone!')
    * })
    *
@@ -67,7 +71,7 @@ export type WebSocketLink = {
    *
    * @example
    * const service = ws.link('wss://example.com')
-   * service.on('connection', ({ client }) => {
+   * service.addEventListener('connection', ({ client }) => {
    *   service.broadcastExcept(client, 'hi, the rest of you!')
    * })
    *
@@ -86,7 +90,7 @@ export type WebSocketLink = {
  *
  * @example
  * const chat = ws.link('wss://chat.example.com')
- * chat.on('connection', ({ client }) => {
+ * chat.addEventListener('connection', ({ client }) => {
  *   client.send('hello from server!')
  * })
  */
@@ -99,13 +103,13 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
     typeof url,
   )
 
-  const clientManager = new WebSocketClientManager(webSocketChannel, url)
+  const clientManager = new WebSocketClientManager(webSocketChannel)
 
   return {
     get clients() {
       return clientManager.clients
     },
-    on(event, listener) {
+    addEventListener(event, listener) {
       const handler = new WebSocketHandler(url)
 
       // Add the connection event listener for when the
@@ -158,3 +162,5 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
 export const ws = {
   link: createWebSocketLinkHandler,
 }
+
+export { WebSocketData }

package/src/node/SetupServerCommonApi.ts

@@ -14,6 +14,8 @@ import type { LifeCycleEventsMap, SharedOptions } from '~/core/sharedOptions'
 import { SetupApi } from '~/core/SetupApi'
 import { handleRequest } from '~/core/utils/handleRequest'
 import type { RequestHandler } from '~/core/handlers/RequestHandler'
+import { HttpHandler } from '~/core/handlers/HttpHandler'
+import { GraphQLHandler } from '~/core/handlers/GraphQLHandler'
 import type { WebSocketHandler } from '~/core/handlers/WebSocketHandler'
 import { mergeRight } from '~/core/utils/internal/mergeRight'
 import { InternalError, devUtils } from '~/core/utils/internal/devUtils'
@@ -61,7 +63,12 @@ export class SetupServerCommonApi
         const response = await handleRequest(
           request,
           requestId,
-          this.handlersController.currentHandlers(),
+          this.handlersController.currentHandlers().filter((handler) => {
+            return (
+              handler instanceof HttpHandler ||
+              handler instanceof GraphQLHandler
+            )
+          }),
           this.resolvedOptions,
           this.emitter,
         )
@@ -94,7 +101,12 @@ export class SetupServerCommonApi
       },
     )
 
+    // Preconfigure the WebSocket interception but don't enable it just yet.
+    // It will be enabled when the server starts.
     handleWebSocketEvent({
+      getUnhandledRequestStrategy: () => {
+        return this.resolvedOptions.onUnhandledRequest
+      },
       getHandlers: () => {
         return this.handlersController.currentHandlers()
       },
@@ -111,12 +123,11 @@ export class SetupServerCommonApi
 
     // Apply the interceptor when starting the server.
     this.interceptor.apply()
-    webSocketInterceptor.apply()
+    this.subscriptions.push(() => this.interceptor.dispose())
 
-    this.subscriptions.push(() => {
-      this.interceptor.dispose()
-      webSocketInterceptor.dispose()
-    })
+    // Apply the WebSocket interception.
+    webSocketInterceptor.apply()
+    this.subscriptions.push(() => webSocketInterceptor.dispose())
 
     // Assert that the interceptor has been applied successfully.
     // Also guards us from forgetting to call "interceptor.apply()"