fix: output a single formatted message to console (#1820)

mswjs · Nov 1, 2023 · 2ead392 · 2ead392
1 parent a179b68
commit 2ead392
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/src/core/handlers/GraphQLHandler.ts b/src/core/handlers/GraphQLHandler.ts
@@ -180,11 +180,12 @@ 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}`,
+      devUtils.formatMessage(
+        `${getTimestamp()} ${requestInfo} (%c${loggedResponse.status} ${
+          loggedResponse.statusText
+        }%c)`,
+      ),
       `color:${statusColor}`,
-      `${loggedResponse.status} ${loggedResponse.statusText}`,
       'color:inherit',
     )
     console.log('Request:', loggedRequest)

diff --git a/src/core/handlers/HttpHandler.ts b/src/core/handlers/HttpHandler.ts
@@ -153,12 +153,12 @@ 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,
+      devUtils.formatMessage(
+        `${getTimestamp()} ${args.request.method} ${publicUrl} (%c${
+          loggedResponse.status
+        } ${loggedResponse.statusText}%c)`,
+      ),
       `color:${statusColor}`,
-      `${loggedResponse.status} ${loggedResponse.statusText}`,
       'color:inherit',
     )
     console.log('Request', loggedRequest)

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$`,
           ),
         ),
       ]),