@mswjs/interceptors 0.26.14 → 0.27.0

package/src/interceptors/WebSocket/WebSocketServerConnection.ts

@@ -28,56 +28,32 @@ export class WebSocketServerConnection {
     this[kEmitter] = new EventTarget()
     this.mockCloseController = new AbortController()
 
-    // Handle incoming events from the actual server.
-    // The (mock) WebSocket instance will call this
-    // whenever a "message" event from the actual server
-    // is dispatched on it (the dispatch will be skipped).
-    this.transport.onIncoming = (event) => {
-      // Clone the event to dispatch it on this class
-      // once again and prevent the "already being dispatched"
-      // exception. Clone it here so we can observe this event
-      // being prevented in the "server.on()" listeners.
-      const messageEvent = bindEvent(
-        this.realWebSocket!,
-        new CancelableMessageEvent('message', {
-          data: event.data,
-          origin: event.origin,
-          cancelable: true,
-        })
-      )
-
-      /**
-       * @note Emit "message" event on the WebSocketClassServer
-       * instance to let the interceptor know about these
-       * incoming events from the original server. In that listener,
-       * the interceptor can modify or skip the event forwarding
-       * to the mock WebSocket instance.
-       */
-      this[kEmitter].dispatchEvent(messageEvent)
-
-      /**
-       * @note Forward the incoming server events to the client.
-       * Preventing the default on the message event stops this.
-       */
-      if (!messageEvent.defaultPrevented) {
-        this.socket.dispatchEvent(
-          bindEvent(
-            /**
-             * @note Bind the forwarded original server events
-             * to the mock WebSocket instance so it would
-             * dispatch them straight away.
-             */
-            this.socket,
-            // Clone the message event again to prevent
-            // the "already being dispatched" exception.
-            new MessageEvent('message', {
-              data: event.data,
-              origin: event.origin,
-            })
-          )
-        )
+    // Automatically forward outgoing client events
+    // to the actual server unless the outgoing message event
+    // has been prevented. The "outgoing" transport event it
+    // dispatched by the "client" connection.
+    this.transport.addEventListener('outgoing', (event) => {
+      // Ignore client messages if the server connection
+      // hasn't been established yet. Nowhere to forward.
+      if (this.readyState === -1) {
+        return
       }
-    }
+
+      // Every outgoing client message can prevent this forwarding
+      // by preventing the default of the outgoing message event.
+      // This listener will be added before user-defined listeners,
+      // so execute the logic on the next tick.
+      queueMicrotask(() => {
+        if (!event.defaultPrevented) {
+          this.send(event.data)
+        }
+      })
+    })
+
+    this.transport.addEventListener(
+      'incoming',
+      this.handleIncomingMessage.bind(this)
+    )
   }
 
   /**
@@ -108,8 +84,33 @@ export class WebSocketServerConnection {
     // Inherit the binary type from the mock WebSocket client.
     realWebSocket.binaryType = this.socket.binaryType
 
+    // Allow the interceptor to listen to when the server connection
+    // has been established. This isn't necessary to operate with the connection
+    // but may be beneficial in some cases (like conditionally adding logging).
+    realWebSocket.addEventListener(
+      'open',
+      (event) => {
+        this[kEmitter].dispatchEvent(
+          bindEvent(this.realWebSocket!, new Event('open', event))
+        )
+      },
+      { once: true }
+    )
+
     realWebSocket.addEventListener('message', (event) => {
-      this.transport.onIncoming(event)
+      // Dispatch the "incoming" transport event instead of
+      // invoking the internal handler directly. This way,
+      // anyone can listen to the "incoming" event but this
+      // class is the one resulting in it.
+      this.transport.dispatchEvent(
+        bindEvent(
+          this.realWebSocket!,
+          new MessageEvent('incoming', {
+            data: event.data,
+            origin: event.origin,
+          })
+        )
+      )
     })
 
     // Close the original connection when the mock client closes.
@@ -215,6 +216,9 @@ export class WebSocketServerConnection {
       this.socket.url
     )
 
+    // Remove the "close" event listener from the server
+    // so it doesn't close the underlying WebSocket client
+    // when you call "server.close()".
     realWebSocket.removeEventListener('close', this.handleRealClose)
 
     if (
@@ -225,6 +229,60 @@ export class WebSocketServerConnection {
     }
 
     realWebSocket.close()
+
+    // Dispatch the "close" event on the server connection.
+    queueMicrotask(() => {
+      this[kEmitter].dispatchEvent(
+        bindEvent(this.realWebSocket, new CloseEvent('close'))
+      )
+    })
+  }
+
+  private handleIncomingMessage(event: MessageEvent<WebSocketData>): void {
+    // Clone the event to dispatch it on this class
+    // once again and prevent the "already being dispatched"
+    // exception. Clone it here so we can observe this event
+    // being prevented in the "server.on()" listeners.
+    const messageEvent = bindEvent(
+      event.target,
+      new CancelableMessageEvent('message', {
+        data: event.data,
+        origin: event.origin,
+        cancelable: true,
+      })
+    )
+
+    /**
+     * @note Emit "message" event on the server connection
+     * instance to let the interceptor know about these
+     * incoming events from the original server. In that listener,
+     * the interceptor can modify or skip the event forwarding
+     * to the mock WebSocket instance.
+     */
+    this[kEmitter].dispatchEvent(messageEvent)
+
+    /**
+     * @note Forward the incoming server events to the client.
+     * Preventing the default on the message event stops this.
+     */
+    if (!messageEvent.defaultPrevented) {
+      this.socket.dispatchEvent(
+        bindEvent(
+          /**
+           * @note Bind the forwarded original server events
+           * to the mock WebSocket instance so it would
+           * dispatch them straight away.
+           */
+          this.socket,
+          // Clone the message event again to prevent
+          // the "already being dispatched" exception.
+          new MessageEvent('message', {
+            data: event.data,
+            origin: event.origin,
+          })
+        )
+      )
+    }
   }
 
   private handleMockClose(_event: Event): void {

package/src/interceptors/WebSocket/WebSocketTransport.ts

@@ -1,40 +1,39 @@
-export type WebSocketData = string | ArrayBufferLike | Blob | ArrayBufferView
-
-export type WebSocketTransportOnIncomingCallback = (
-  event: MessageEvent<WebSocketData>
-) => void
-
-export type WebSocketTransportOnOutgoingCallback = (data: WebSocketData) => void
+import { CloseEvent } from './utils/events'
 
-export type WebSocketTransportOnCloseCallback = (event: CloseEvent) => void
-
-export abstract class WebSocketTransport {
-  /**
-   * A callback for the incoming server events.
-   * This is called when the WebSocket client receives
-   * a message from the server.
-   */
-  abstract onIncoming: WebSocketTransportOnIncomingCallback
+export type WebSocketData = string | ArrayBufferLike | Blob | ArrayBufferView
 
-  /**
-   * A callback for outgoing client events.
-   * This is called when the WebSocket client sends data.
-   */
-  abstract onOutgoing: WebSocketTransportOnOutgoingCallback
+export type WebSocketTransportEventMap = {
+  incoming: MessageEvent<WebSocketData>
+  outgoing: MessageEvent<WebSocketData>
+  close: CloseEvent
+}
 
-  /**
-   * A callback for the close client event.
-   * This is called when the WebSocket client is closed.
-   */
-  abstract onClose: WebSocketTransportOnCloseCallback
+export type StrictEventListenerOrEventListenerObject<EventType extends Event> =
+  | ((event: EventType) => void)
+  | {
+      handleEvent(event: EventType): void
+    }
+
+export interface WebSocketTransport {
+  addEventListener<EventType extends keyof WebSocketTransportEventMap>(
+    event: EventType,
+    listener: StrictEventListenerOrEventListenerObject<
+      WebSocketTransportEventMap[EventType]
+    > | null,
+    options?: boolean | AddEventListenerOptions
+  ): void
+
+  dispatchEvent<EventType extends keyof WebSocketTransportEventMap>(
+    event: WebSocketTransportEventMap[EventType]
+  ): boolean
 
   /**
    * Send the data from the server to this client.
    */
-  abstract send(data: WebSocketData): void
+  send(data: WebSocketData): void
 
   /**
    * Close the client connection.
    */
-  abstract close(code?: number, reason?: string): void
+  close(code?: number, reason?: string): void
 }