fix: update @mswjs/interceptors to support WebSocket server protocol (#2528)

Author: kettanaito

package.json

@@ -241,7 +241,7 @@
     "@bundled-es-modules/statuses": "^1.0.1",
     "@bundled-es-modules/tough-cookie": "^0.1.6",
     "@inquirer/confirm": "^5.0.0",
-    "@mswjs/interceptors": "^0.38.7",
+    "@mswjs/interceptors": "^0.39.1",
     "@open-draft/deferred-promise": "^2.2.0",
     "@open-draft/until": "^2.1.0",
     "@types/cookie": "^0.6.0",

pnpm-lock.yaml

@@ -1,6 +1,10 @@
 import { Emitter } from 'strict-event-emitter'
 import { createRequestId } from '@mswjs/interceptors'
-import type { WebSocketConnectionData } from '@mswjs/interceptors/WebSocket'
+import type {
+  WebSocketClientConnectionProtocol,
+  WebSocketConnectionData,
+  WebSocketServerConnectionProtocol,
+} from '@mswjs/interceptors/WebSocket'
 import {
   type Match,
   type Path,
@@ -18,7 +22,10 @@ export type WebSocketHandlerEventMap = {
   connection: [args: WebSocketHandlerConnection]
 }
 
-export interface WebSocketHandlerConnection extends WebSocketConnectionData {
+export interface WebSocketHandlerConnection {
+  client: WebSocketClientConnectionProtocol
+  server: WebSocketServerConnectionProtocol
+  info: WebSocketConnectionData['info']
   params: PathParams
 }
 
@@ -67,7 +74,9 @@ export class WebSocketHandler {
     return args.parsedResult.match.matches
   }
 
-  public async run(connection: WebSocketConnectionData): Promise<boolean> {
+  public async run(
+    connection: Omit<WebSocketHandlerConnection, 'params'>,
+  ): Promise<boolean> {
     const parsedResult = this.parse({
       url: connection.client.url,
     })

src/core/handlers/WebSocketHandler.ts

@@ -1,7 +1,7 @@
 import type {
   WebSocketData,
-  WebSocketClientConnection,
   WebSocketClientConnectionProtocol,
+  WebSocketClientEventMap,
 } from '@mswjs/interceptors/WebSocket'
 import { WebSocketClientStore } from './WebSocketClientStore'
 import { WebSocketMemoryClientStore } from './WebSocketMemoryClientStore'
@@ -105,7 +105,9 @@ export class WebSocketClientManager {
     this.channel.postMessage({ type: 'db:update' })
   }
 
-  private async addClient(client: WebSocketClientConnection): Promise<void> {
+  private async addClient(
+    client: WebSocketClientConnectionProtocol,
+  ): Promise<void> {
     await this.store.add(client)
     // Sync the in-memory clients in this runtime with the
     // updated database. This pulls in all the stored clients.
@@ -119,7 +121,9 @@ export class WebSocketClientManager {
    * connection object because `addConnection()` is called only
    * for the opened connections in the same runtime.
    */
-  public async addConnection(client: WebSocketClientConnection): Promise<void> {
+  public async addConnection(
+    client: WebSocketClientConnectionProtocol,
+  ): Promise<void> {
     // Store this client in the map of clients created in this runtime.
     // This way, the manager can distinguish between this runtime clients
     // and extraneous runtime clients when synchronizing clients storage.
@@ -208,4 +212,30 @@ export class WebSocketRemoteClientConnection
       },
     } as WebSocketBroadcastChannelMessage)
   }
+
+  addEventListener<EventType extends keyof WebSocketClientEventMap>(
+    _type: EventType,
+    _listener: (
+      this: WebSocket,
+      event: WebSocketClientEventMap[EventType],
+    ) => void,
+    _options?: AddEventListenerOptions | boolean,
+  ): void {
+    throw new Error(
+      'WebSocketRemoteClientConnection.addEventListener is not supported',
+    )
+  }
+
+  removeEventListener<EventType extends keyof WebSocketClientEventMap>(
+    _event: EventType,
+    _listener: (
+      this: WebSocket,
+      event: WebSocketClientEventMap[EventType],
+    ) => void,
+    _options?: EventListenerOptions | boolean,
+  ): void {
+    throw new Error(
+      'WebSocketRemoteClientConnection.removeEventListener is not supported',
+    )
+  }
 }

src/core/ws/WebSocketClientManager.ts

@@ -25,7 +25,7 @@ test('responds with a mocked ReadableStream response', async ({
 
         chunks.push({
           text: decoder.decode(value),
-          timestamp: Date.now(),
+          timestamp: performance.now(),
         })
       }
     })

test/browser/rest-api/response/body/body-stream.test.ts

@@ -81,7 +81,7 @@ test('supports delays when enqueuing chunks', async () => {
       response.on('data', (data) => {
         chunks.push({
           buffer: Buffer.from(data),
-          timestamp: Date.now(),
+          timestamp: performance.now(),
         })
       })
 

test/node/rest-api/response/body-stream.node.test.ts

@@ -53,7 +53,6 @@ it('exposes root-level "client" APIs', () => {
 
   link.addEventListener('connection', ({ client }) => {
     expectTypeOf(client.id).toBeString()
-    expectTypeOf(client.socket).toEqualTypeOf<WebSocket>()
     expectTypeOf(client.url).toEqualTypeOf<URL>()
 
     expectTypeOf(client.addEventListener).toBeFunction()
@@ -103,8 +102,6 @@ it('exposes root-level "server" APIs', () => {
   const link = ws.link('ws://localhost')
 
   link.addEventListener('connection', ({ server }) => {
-    expectTypeOf(server.socket).toEqualTypeOf<WebSocket>()
-
     expectTypeOf(server.connect).toEqualTypeOf<() => void>()
     expectTypeOf(server.addEventListener).toBeFunction()
     expectTypeOf(server.send).toBeFunction()