fix: output a single formatter message to console

mswjs · Nov 1, 2023 · 29fdec7 · 29fdec7
1 parent 9e9c5a1
commit 29fdec7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/src/core/handlers/GraphQLHandler.ts b/src/core/handlers/GraphQLHandler.ts
@@ -180,12 +180,22 @@ Consider naming this operation or using "graphql.operation()" request handler to
       : `anonymous ${args.parsedResult?.operationType}`
 
     console.groupCollapsed(
-      devUtils.formatMessage('%s %s (%c%s%c)'),
-      getTimestamp(),
-      `${requestInfo}`,
-      `color:${statusColor}`,
-      `${loggedResponse.status} ${loggedResponse.statusText}`,
-      'color:inherit',
+      devUtils.formatMessage(
+        `${getTimestamp()} ${requestInfo} (%c${loggedResponse.status} ${
+          loggedResponse.statusText
+        }%c)`,
+        `color:${statusColor}`,
+        'color:inherit',
+      ),
+
+      // devUtils.formatMessage(
+      //   '%s %s (%c%s%c)',
+      //   getTimestamp(),
+      //   `${requestInfo}`,
+      //   `color:${statusColor}`,
+      //   `${loggedResponse.status} ${loggedResponse.statusText}`,
+      //   'color:inherit',
+      // ),
     )
     console.log('Request:', loggedRequest)
     console.log('Handler:', this)

diff --git a/src/core/handlers/HttpHandler.ts b/src/core/handlers/HttpHandler.ts
@@ -153,13 +153,21 @@ export class HttpHandler extends RequestHandler<
     const statusColor = getStatusCodeColor(loggedResponse.status)
 
     console.groupCollapsed(
-      devUtils.formatMessage('%s %s %s (%c%s%c)'),
-      getTimestamp(),
-      args.request.method,
-      publicUrl,
-      `color:${statusColor}`,
-      `${loggedResponse.status} ${loggedResponse.statusText}`,
-      'color:inherit',
+      devUtils.formatMessage(
+        `${getTimestamp()} ${args.request.method} ${publicUrl} (%c${
+          loggedResponse.status
+        } ${loggedResponse.statusText}%c)`,
+        `color:${statusColor}`,
+        'color:inherit',
+      ),
+
+      // '%s %s %s (%c%s%c)',
+      // getTimestamp(),
+      // args.request.method,
+      // publicUrl,
+      // `color:${statusColor}`,
+      // `${loggedResponse.status} ${loggedResponse.statusText}`,
+      // 'color:inherit',
     )
     console.log('Request', loggedRequest)
     console.log('Handler:', this)

diff --git a/test/browser/graphql-api/logging.test.ts b/test/browser/graphql-api/logging.test.ts
@@ -29,7 +29,7 @@ test('prints a log for a GraphQL query', async ({
       expect.arrayContaining([
         expect.stringMatching(
           new RegExp(
-            `^\\[MSW\\] %s %s \\(%c%s%c\\) \\d{2}:\\d{2}:\\d{2} query GetUserDetail color:${StatusCodeColor.Success} 200 OK color:inherit$`,
+            `^\\[MSW\\] \\d{2}:\\d{2}:\\d{2} query GetUserDetail \\(%c200 OK%c\\) color:${StatusCodeColor.Success} color:inherit$`,
           ),
         ),
       ]),
@@ -60,7 +60,7 @@ test('prints a log for a GraphQL mutation', async ({
       expect.arrayContaining([
         expect.stringMatching(
           new RegExp(
-            `\\[MSW\\] %s %s \\(%c%s%c\\) \\d{2}:\\d{2}:\\d{2} mutation Login color:${StatusCodeColor.Success} 200 OK color:inherit$`,
+            `\\[MSW\\] \\d{2}:\\d{2}:\\d{2} mutation Login \\(%c200 OK%c\\) color:${StatusCodeColor.Success} color:inherit$`,
           ),
         ),
       ]),
@@ -91,7 +91,7 @@ test('prints a log for a GraphQL query intercepted via "graphql.operation"', asy
       expect.arrayContaining([
         expect.stringMatching(
           new RegExp(
-            `\\[MSW\\] %s %s \\(%c%s%c\\) \\d{2}:\\d{2}:\\d{2} query GetLatestPosts color:${StatusCodeColor.Warning} 301 Moved Permanently color:inherit$`,
+            `\\[MSW\\] \\d{2}:\\d{2}:\\d{2} query GetLatestPosts \\(%c301 Moved Permanently%c\\) color:${StatusCodeColor.Warning} color:inherit$`,
           ),
         ),
       ]),
@@ -122,7 +122,7 @@ test('prints a log for a GraphQL mutation intercepted via "graphql.operation"',
       expect.arrayContaining([
         expect.stringMatching(
           new RegExp(
-            `\\[MSW\\] %s %s \\(%c%s%c\\) \\d{2}:\\d{2}:\\d{2} mutation CreatePost color:${StatusCodeColor.Warning} 301 Moved Permanently color:inherit$`,
+            `^\\[MSW\\] \\d{2}:\\d{2}:\\d{2} mutation CreatePost \\(%c301 Moved Permanently%c\\) color:${StatusCodeColor.Warning} color:inherit$`,
           ),
         ),
       ]),

diff --git a/test/browser/rest-api/logging.test.ts b/test/browser/rest-api/logging.test.ts
@@ -13,11 +13,11 @@ test('prints the intercepted request info into browser console', async ({
   await fetch('https://example.com/users/octocat')
 
   await waitFor(() => {
-    expect(consoleSpy.get('raw')?.get('startGroupCollapsed')).toEqual(
+    expect(consoleSpy.get('raw')!.get('startGroupCollapsed')).toEqual(
       expect.arrayContaining([
         expect.stringMatching(
           new RegExp(
-            `^\\[MSW\\] %s %s %s \\(%c%s%c\\) \\d{2}:\\d{2}:\\d{2} GET https://example.com/users/octocat color:${StatusCodeColor.Success} 200 OK color:inherit$`,
+            `^\\[MSW\\] \\d{2}:\\d{2}:\\d{2} GET https://example.com/users/octocat \\(%c200 OK%c\\) color:${StatusCodeColor.Success} color:inherit$`,
           ),
         ),
       ]),