fix(sse): respect the worker quiet option (#2644)

Author: kettanaito

src/browser/setupWorker/start/createFallbackRequestListener.ts

@@ -29,6 +29,9 @@ export function createFallbackRequestListener(
       options,
       context.emitter,
       {
+        resolutionContext: {
+          quiet: options.quiet,
+        },
         onMockedResponse(_, { handler, parsedResult }) {
           if (!options.quiet) {
             context.emitter.once('response:mocked', ({ response }) => {

src/browser/setupWorker/start/createRequestListener.ts

@@ -46,6 +46,9 @@ export const createRequestListener = (
         options,
         context.emitter,
         {
+          resolutionContext: {
+            quiet: options.quiet,
+          },
           onPassthroughResponse() {
             event.postMessage('PASSTHROUGH')
           },

src/core/sse.ts

@@ -6,6 +6,7 @@ import {
   type HttpRequestResolverExtras,
   type HttpRequestParsedResult,
 } from './handlers/HttpHandler'
+import type { ResponseResolutionContext } from '~/core/utils/executeHandlers'
 import type { Path, PathParams } from './utils/matching/matchRequestUrl'
 import { delay } from './delay'
 import { getTimestamp } from './utils/logging/getTimestamp'
@@ -67,47 +68,32 @@ export const sse: ServerSentEventRequestHandler = (path, resolver) => {
   return new ServerSentEventHandler(path, resolver)
 }
 
+const SSE_RESPONSE_INIT: ResponseInit = {
+  headers: {
+    'content-type': 'text/event-stream',
+    'cache-control': 'no-cache',
+    connection: 'keep-alive',
+  },
+}
+
 class ServerSentEventHandler<
   EventMap extends EventMapConstraint,
 > extends HttpHandler {
+  #emitter: Emitter<ServerSentEventClientEventMap>
+
   constructor(path: Path, resolver: ServerSentEventResolver<EventMap, any>) {
     invariant(
       typeof EventSource !== 'undefined',
       'Failed to construct a Server-Sent Event handler for path "%s": the EventSource API is not supported in this environment',
       path,
     )
 
-    const clientEmitter = new Emitter<ServerSentEventClientEventMap>()
-
     super('GET', path, async (info) => {
-      const responseInit: ResponseInit = {
-        headers: {
-          'content-type': 'text/event-stream',
-          'cache-control': 'no-cache',
-          connection: 'keep-alive',
-        },
-      }
-
-      /**
-       * @note Log the intercepted request early.
-       * Normally, the `this.log()` method is called when the handler returns a response.
-       * For SSE, call that method earlier so the logs are in correct order.
-       */
-      await super.log({
-        request: info.request,
-        /**
-         * @note Construct a placeholder response since SSE response
-         * is being streamed and cannot be cloned/consumed for logging.
-         */
-        response: new Response('[streaming]', responseInit),
-      })
-      this.#attachClientLogger(info.request, clientEmitter)
-
       const stream = new ReadableStream({
-        async start(controller) {
+        start: async (controller) => {
           const client = new ServerSentEventClient<EventMap>({
             controller,
-            emitter: clientEmitter,
+            emitter: this.#emitter,
           })
           const server = new ServerSentEventServer({
             request: info.request,
@@ -122,19 +108,42 @@ class ServerSentEventHandler<
         },
       })
 
-      return new Response(stream, responseInit)
+      return new Response(stream, SSE_RESPONSE_INIT)
     })
+
+    this.#emitter = new Emitter<ServerSentEventClientEventMap>()
   }
 
   async predicate(args: {
     request: Request
     parsedResult: HttpRequestParsedResult
+    resolutionContext?: ResponseResolutionContext
   }) {
     if (args.request.headers.get('accept') !== 'text/event-stream') {
       return false
     }
 
-    return super.predicate(args)
+    const matches = await super.predicate(args)
+
+    if (matches && !args.resolutionContext?.quiet) {
+      /**
+       * @note Log the intercepted request early.
+       * Normally, the `this.log()` method is called when the handler returns a response.
+       * For SSE, call that method earlier so the logs are in correct order.
+       */
+      await super.log({
+        request: args.request,
+        /**
+         * @note Construct a placeholder response since SSE response
+         * is being streamed and cannot be cloned/consumed for logging.
+         */
+        response: new Response('[streaming]', SSE_RESPONSE_INIT),
+      })
+
+      this.#attachClientLogger(args.request, this.#emitter)
+    }
+
+    return matches
   }
 
   async log(_args: { request: Request; response: Response }): Promise<void> {

src/core/utils/executeHandlers.ts

@@ -10,7 +10,13 @@ export interface HandlersExecutionResult {
 }
 
 export interface ResponseResolutionContext {
+  /**
+   * A base url to use when resolving relative urls.
+   * @note This is primarily used by the `@mswjs/http-middleware`
+   * to resolve relative urls in the context of the running server
+   */
   baseUrl?: string
+  quiet?: boolean
 }
 
 /**

src/core/utils/handleRequest.ts

@@ -3,7 +3,11 @@ import { Emitter } from 'strict-event-emitter'
 import { LifeCycleEventsMap, SharedOptions } from '../sharedOptions'
 import { RequiredDeep } from '../typeUtils'
 import type { RequestHandler } from '../handlers/RequestHandler'
-import { HandlersExecutionResult, executeHandlers } from './executeHandlers'
+import {
+  type HandlersExecutionResult,
+  type ResponseResolutionContext,
+  executeHandlers,
+} from './executeHandlers'
 import { onUnhandledRequest } from './request/onUnhandledRequest'
 import { storeResponseCookies } from './request/storeResponseCookies'
 
@@ -13,14 +17,7 @@ export interface HandleRequestOptions {
    * but is exposed to aid in creating extensions like
    * `@mswjs/http-middleware`.
    */
-  resolutionContext?: {
-    /**
-     * A base url to use when resolving relative urls.
-     * @note This is primarily used by the `@mswjs/http-middleware`
-     * to resolve relative urls in the context of the running server
-     */
-    baseUrl?: string
-  }
+  resolutionContext?: ResponseResolutionContext
 
   /**
    * Invoked whenever a request is performed as-is.

test/browser/sse-api/sse.quiet.test.ts

@@ -0,0 +1,49 @@
+import { sse } from 'msw'
+import { setupWorker } from 'msw/browser'
+import { test, expect } from '../playwright.extend'
+
+declare namespace window {
+  export const msw: {
+    setupWorker: typeof setupWorker
+    sse: typeof sse
+  }
+}
+
+const EXAMPLE_URL = new URL('./sse.mocks.ts', import.meta.url)
+
+test('does not log anything if the "quiet" option is set to true', async ({
+  loadExample,
+  spyOnConsole,
+  page,
+}) => {
+  const consoleSpy = spyOnConsole()
+  await loadExample(EXAMPLE_URL, {
+    skipActivation: true,
+  })
+
+  await page.evaluate(async () => {
+    const { setupWorker, sse } = window.msw
+
+    const worker = setupWorker(
+      sse('http://localhost/stream', ({ client }) => {
+        client.send({
+          data: { username: 'john' },
+        })
+      }),
+    )
+    await worker.start({ quiet: true })
+  })
+
+  await page.evaluate(() => {
+    return new Promise<string>((resolve, reject) => {
+      const source = new EventSource('http://localhost/stream')
+      source.onerror = () => reject()
+
+      source.addEventListener('message', (event) => {
+        resolve(`${event.type}:${event.data}`)
+      })
+    })
+  })
+
+  expect(consoleSpy.get('startGroupCollapsed')).toBeUndefined()
+})