feat: rename ".on()" to ".addEventListener()" on ws.link

src/core/ws.ts

@@ -43,11 +43,11 @@ 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: WebSocketEventListener<EventType>,
   ): WebSocketHandler
@@ -57,7 +57,7 @@ export type WebSocketLink = {
    *
    * @example
    * const service = ws.link('wss://example.com')
-   * service.on('connection', () => {
+   * service.addEventListener('connection', () => {
    *   service.broadcast('hello, everyone!')
    * })
    *
@@ -71,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!')
    * })
    *
@@ -90,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!')
  * })
  */
@@ -109,7 +109,7 @@ function createWebSocketLinkHandler(url: Path): WebSocketLink {
     get clients() {
       return clientManager.clients
     },
-    on(event, listener) {
+    addEventListener(event, listener) {
       const handler = new WebSocketHandler(url)
 
       // Add the connection event listener for when the

test/browser/ws-api/ws.apply.browser.test.ts

@@ -23,7 +23,7 @@ test('does not apply the interceptor until "worker.start()" is called', async ({
   await page.evaluate(() => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://example.com')
-    window.worker = setupWorker(api.on('connection', () => {}))
+    window.worker = setupWorker(api.addEventListener('connection', () => {}))
   })
 
   await expect(

test/browser/ws-api/ws.clients.browser.test.ts

@@ -26,7 +26,7 @@ test('returns the number of active clients in the same runtime', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://example.com')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     window.link = api
     await worker.start()
   })
@@ -82,7 +82,7 @@ test('returns the number of active clients across different runtimes', async ({
     await page.evaluate(async () => {
       const { setupWorker, ws } = window.msw
       const api = ws.link('wss://example.com')
-      const worker = setupWorker(api.on('connection', () => {}))
+      const worker = setupWorker(api.addEventListener('connection', () => {}))
       window.link = api
       await worker.start()
     })
@@ -132,7 +132,7 @@ test('broadcasts messages across runtimes', async ({
       window.api = api
 
       const worker = setupWorker(
-        api.on('connection', ({ client }) => {
+        api.addEventListener('connection', ({ client }) => {
           client.addEventListener('message', (event) => {
             api.broadcast(event.data)
           })
@@ -186,7 +186,7 @@ test('clears the list of clients when the worker is stopped', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://example.com')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     window.link = api
     window.worker = worker
     await worker.start()
@@ -224,7 +224,7 @@ test('clears the list of clients when the page is reloaded', async ({
     await page.evaluate(async () => {
       const { setupWorker, ws } = window.msw
       const api = ws.link('wss://example.com')
-      const worker = setupWorker(api.on('connection', () => {}))
+      const worker = setupWorker(api.addEventListener('connection', () => {}))
       window.link = api
       window.worker = worker
       await worker.start()

test/browser/ws-api/ws.intercept.client.browser.test.ts

@@ -24,7 +24,7 @@ test('does not throw on connecting to a non-existing host', async ({
     const service = ws.link('*')
 
     const worker = setupWorker(
-      service.on('connection', ({ client }) => {
+      service.addEventListener('connection', ({ client }) => {
         queueMicrotask(() => client.close())
       }),
     )
@@ -57,7 +57,7 @@ test('intercepts outgoing client text message', async ({
 
     return new Promise<string>(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ client }) => {
+        service.addEventListener('connection', ({ client }) => {
           client.addEventListener('message', (event) => {
             resolve(event.data)
           })
@@ -89,7 +89,7 @@ test('intercepts outgoing client Blob message', async ({
 
     return new Promise<string>(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ client }) => {
+        service.addEventListener('connection', ({ client }) => {
           client.addEventListener('message', (event) => {
             resolve(event.data.text())
           })
@@ -121,7 +121,7 @@ test('intercepts outgoing client ArrayBuffer message', async ({
 
     return new Promise<string>(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ client }) => {
+        service.addEventListener('connection', ({ client }) => {
           client.addEventListener('message', (event) => {
             resolve(new TextDecoder().decode(event.data))
           })

test/browser/ws-api/ws.intercept.server.browser.test.ts

@@ -40,7 +40,7 @@ test('intercepts incoming server text message', async ({
 
     return new Promise<string>(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ server }) => {
+        service.addEventListener('connection', ({ server }) => {
           server.connect()
           server.addEventListener('message', (event) => {
             resolve(event.data)
@@ -88,7 +88,7 @@ test('intercepts incoming server Blob message', async ({
 
     return new Promise<string>(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ server }) => {
+        service.addEventListener('connection', ({ server }) => {
           server.connect()
           server.addEventListener('message', (event) => {
             resolve(event.data.text())
@@ -134,7 +134,7 @@ test('intercepts outgoing server ArrayBuffer message', async ({
 
     return new Promise<string>(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ server }) => {
+        service.addEventListener('connection', ({ server }) => {
           server.connect()
           server.addEventListener('message', (event) => {
             resolve(new TextDecoder().decode(event.data))

test/browser/ws-api/ws.logging.browser.test.ts

@@ -39,7 +39,7 @@ test('does not log anything if "quiet" was set to "true"', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start({ quiet: true })
   })
 
@@ -74,7 +74,7 @@ test('logs the client connection', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -107,7 +107,7 @@ test('logs outgoing client event sending text data', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -141,7 +141,7 @@ test('logs outgoing client event sending a long text data', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -175,7 +175,7 @@ test('logs outgoing client event sending Blob data', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -209,7 +209,7 @@ test('logs outgoing client event sending a long Blob data', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -244,7 +244,7 @@ test('logs outgoing client event sending ArrayBuffer data', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -278,7 +278,7 @@ test('logs outgoing client event sending a long ArrayBuffer data', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -328,7 +328,7 @@ test('logs incoming client events', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link(url)
     const worker = setupWorker(
-      api.on('connection', ({ client, server }) => {
+      api.addEventListener('connection', ({ client, server }) => {
         server.connect()
       }),
     )
@@ -386,7 +386,7 @@ test('logs raw incoming server events', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link(url)
     const worker = setupWorker(
-      api.on('connection', ({ client, server }) => {
+      api.addEventListener('connection', ({ client, server }) => {
         server.connect()
 
         server.addEventListener('message', (event) => {
@@ -440,7 +440,7 @@ test('logs the close event initiated by the client', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -475,7 +475,7 @@ test('logs the close event initiated by the event handler', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
     const worker = setupWorker(
-      api.on('connection', ({ client }) => {
+      api.addEventListener('connection', ({ client }) => {
         client.close()
       }),
     )
@@ -512,7 +512,7 @@ test('logs outgoing client events sent vi "server.send()"', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link(url)
     const worker = setupWorker(
-      api.on('connection', ({ server }) => {
+      api.addEventListener('connection', ({ server }) => {
         server.connect()
         server.send('hello from handler')
       }),
@@ -550,7 +550,7 @@ test('logs incoming client events sent vi "client.send()"', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link(url)
     const worker = setupWorker(
-      api.on('connection', ({ client }) => {
+      api.addEventListener('connection', ({ client }) => {
         client.send('hello from handler')
       }),
     )
@@ -586,7 +586,7 @@ test('logs connection closure initiated by the client', async ({
   await page.evaluate(async () => {
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
-    const worker = setupWorker(api.on('connection', () => {}))
+    const worker = setupWorker(api.addEventListener('connection', () => {}))
     await worker.start()
   })
 
@@ -621,7 +621,7 @@ test('logs connection closure initiated by the interceptor', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link('wss://localhost/*')
     const worker = setupWorker(
-      api.on('connection', ({ client }) => {
+      api.addEventListener('connection', ({ client }) => {
         client.close(1003, 'Custom error')
       }),
     )
@@ -662,7 +662,7 @@ test('logs connection closure initiated by the original server', async ({
     const { setupWorker, ws } = window.msw
     const api = ws.link(url)
     const worker = setupWorker(
-      api.on('connection', ({ server }) => {
+      api.addEventListener('connection', ({ server }) => {
         server.connect()
       }),
     )

test/browser/ws-api/ws.server.connect.browser.test.ts

@@ -39,7 +39,7 @@ test('does not connect to the actual server by default', async ({
     const service = ws.link(serverUrl)
 
     const worker = setupWorker(
-      service.on('connection', ({ client }) => {
+      service.addEventListener('connection', ({ client }) => {
         queueMicrotask(() => client.send('mock'))
       }),
     )
@@ -78,7 +78,7 @@ test('forwards incoming server events to the client once connected', async ({
     const service = ws.link(serverUrl)
 
     const worker = setupWorker(
-      service.on('connection', ({ server }) => {
+      service.addEventListener('connection', ({ server }) => {
         // Calling "connect()" establishes the connection
         // to the actual WebSocket server.
         server.connect()
@@ -116,7 +116,7 @@ test('throws an error when connecting to a non-existing server', async ({
 
     return new Promise(async (resolve) => {
       const worker = setupWorker(
-        service.on('connection', ({ server }) => {
+        service.addEventListener('connection', ({ server }) => {
           server.connect()
         }),
       )