msw 2.3.0-ws.rc-9 → 2.3.0-ws.rc-11

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

@@ -10,10 +10,10 @@ import { getMessageLength } from './getMessageLength'
 import { getPublicData } from './getPublicData'
 
 const colors = {
-  blue: '#3b82f6',
-  green: '#22c55e',
-  red: '#ef4444',
-  orange: '#ff6a33',
+  system: '#3b82f6',
+  outgoing: '#22c55e',
+  incoming: '#ef4444',
+  mocked: '#ff6a33',
 }
 
 export function attachWebSocketLogger(
@@ -38,13 +38,6 @@ export function attachWebSocketLogger(
     logConnectionClose(event)
   })
 
-  // Log the events received by the WebSocket client.
-  // "client.socket" references the actual WebSocket instance
-  // so these message events are incoming messages.
-  client.socket.addEventListener('message', (event) => {
-    logIncomingClientMessage(event)
-  })
-
   // Log client errors (connection closures due to errors).
   client.socket.addEventListener('error', (event) => {
     logClientError(event)
@@ -66,7 +59,10 @@ export function attachWebSocketLogger(
           value: client.socket,
         },
       })
-      logIncomingMockedClientMessage(messageEvent)
+
+      queueMicrotask(() => {
+        logIncomingMockedClientMessage(messageEvent)
+      })
 
       return Reflect.apply(target, thisArg, args)
     },
@@ -92,12 +88,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,
         },
       })
 
@@ -120,7 +116,7 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(`${getTimestamp()} %c▶%c ${publicUrl}`),
-    `color:${colors.blue}`,
+    `color:${colors.system}`,
     'color:inherit',
   )
   // eslint-disable-next-line no-console
@@ -129,24 +125,17 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
   console.groupEnd()
 }
 
-/**
- * Prints the outgoing client message.
- */
-export async function logOutgoingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
+function logConnectionClose(event: CloseEvent) {
+  const target = event.target as WebSocket
+  const publicUrl = toPublicUrl(target.url)
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
     ),
-    `color:${colors.green}`,
+    `color:${colors.system}`,
     'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)
@@ -154,25 +143,17 @@ export async function logOutgoingClientMessage(
   console.groupEnd()
 }
 
-/**
- * Prints the outgoing client message initiated
- * by `server.send()` in the event handler.
- */
-export async function logOutgoingMockedClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
+function logClientError(event: Event) {
+  const socket = event.target as WebSocket
+  const publicUrl = toPublicUrl(socket.url)
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
     ),
-    `color:${colors.orange}`,
+    `color:${colors.system}`,
     'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)
@@ -181,23 +162,19 @@ export async function logOutgoingMockedClientMessage(
 }
 
 /**
- * Prings the message received by the WebSocket client.
- * This is fired when the "message" event is dispatched
- * on the actual WebSocket client instance, and translates to
- * the client receiving a message from the server.
+ * Prints the outgoing client message.
  */
-export async function logIncomingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
+async function logOutgoingClientMessage(event: MessageEvent<WebSocketData>) {
   const byteLength = getMessageLength(event.data)
   const publicData = await getPublicData(event.data)
+  const arrow = event.defaultPrevented ? '⇡' : '⬆'
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c${arrow}%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.red}`,
+    `color:${colors.outgoing}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -210,9 +187,9 @@ export async function logIncomingClientMessage(
 
 /**
  * Prints the outgoing client message initiated
- * by `client.send()` in the event handler.
+ * by `server.send()` in the event handler.
  */
-export async function logIncomingMockedClientMessage(
+async function logOutgoingMockedClientMessage(
   event: MessageEvent<WebSocketData>,
 ) {
   const byteLength = getMessageLength(event.data)
@@ -221,9 +198,9 @@ export async function logIncomingMockedClientMessage(
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c⬆%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.orange}`,
+    `color:${colors.mocked}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -234,25 +211,11 @@ export async function logIncomingMockedClientMessage(
   console.groupEnd()
 }
 
-function logConnectionClose(event: CloseEvent) {
-  const target = event.target as WebSocket
-  const publicUrl = toPublicUrl(target.url)
-
-  // eslint-disable-next-line no-console
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
-    ),
-    `color:${colors.blue}`,
-    'color:inherit',
-  )
-  // eslint-disable-next-line no-console
-  console.log(event)
-  // eslint-disable-next-line no-console
-  console.groupEnd()
-}
-
-export async function logIncomingServerMessage(
+/**
+ * Prints the outgoing client message initiated
+ * by `client.send()` in the event handler.
+ */
+async function logIncomingMockedClientMessage(
   event: MessageEvent<WebSocketData>,
 ) {
   const byteLength = getMessageLength(event.data)
@@ -261,9 +224,9 @@ export async function logIncomingServerMessage(
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c⬇%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.green}`,
+    `color:${colors.mocked}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -274,17 +237,20 @@ export async function logIncomingServerMessage(
   console.groupEnd()
 }
 
-function logClientError(event: Event) {
-  const socket = event.target as WebSocket
-  const publicUrl = toPublicUrl(socket.url)
+async function logIncomingServerMessage(event: MessageEvent<WebSocketData>) {
+  const byteLength = getMessageLength(event.data)
+  const publicData = await getPublicData(event.data)
+  const arrow = event.defaultPrevented ? '⇣' : '⬇'
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
+      `${getTimestamp({ milliseconds: true })} %c${arrow}%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.blue}`,
+    `color:${colors.incoming}`,
     'color:inherit',
+    'color:gray;font-weight:normal',
+    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)

package/src/core/ws.ts

@@ -103,7 +103,7 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
     typeof url,
   )
 
-  const clientManager = new WebSocketClientManager(webSocketChannel, url)
+  const clientManager = new WebSocketClientManager(webSocketChannel)
 
   return {
     get clients() {

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()"