test(browser): Add tests for getRequestPayloadXhrOrFetch

Signed-off-by: Kaung Zin Hein <[email protected]>

Author: Zen-cronic

packages/browser/src/integrations/graphqlClient.ts

@@ -62,7 +62,7 @@ function _updateSpanWithGraphQLData(client: Client, options: GraphQLClientOption
 
     const { endpoints } = options;
     const isTracedGraphqlEndpoint = stringMatchesSomePattern(httpUrl, endpoints);
-    const payload = _getRequestPayloadXhrOrFetch(hint);
+    const payload = getRequestPayloadXhrOrFetch(hint);
 
     if (isTracedGraphqlEndpoint && payload) {
       const graphqlBody = getGraphQLRequestPayload(payload) as GraphQLRequestPayload;
@@ -87,7 +87,7 @@ function _updateBreadcrumbWithGraphQLData(client: Client, options: GraphQLClient
       const { endpoints } = options;
 
       const isTracedGraphqlEndpoint = stringMatchesSomePattern(httpUrl, endpoints);
-      const payload = _getRequestPayloadXhrOrFetch(handlerData);
+      const payload = getRequestPayloadXhrOrFetch(handlerData);
 
       if (isTracedGraphqlEndpoint && data && payload) {
         const graphqlBody = getGraphQLRequestPayload(payload);
@@ -117,18 +117,17 @@ function _getGraphQLOperation(requestBody: GraphQLRequestPayload): string {
 
 /**
  * Get the request body/payload based on the shape of the hint
- * TODO: export for test?
+ * Exported for tests only.
  */
-function _getRequestPayloadXhrOrFetch(hint: XhrHint | FetchHint): string | undefined {
+export function getRequestPayloadXhrOrFetch(hint: XhrHint | FetchHint): string | undefined {
   const isXhr = 'xhr' in hint;
-  const isFetch = !isXhr;
 
   let body: string | undefined;
 
   if (isXhr) {
     const sentryXhrData = hint.xhr[SENTRY_XHR_DATA_KEY];
     body = sentryXhrData && getBodyString(sentryXhrData.body)[0];
-  } else if (isFetch) {
+  } else {
     const sentryFetchData = parseFetchPayload(hint.input);
     body = getBodyString(sentryFetchData)[0];
   }

packages/browser/test/integrations/graphqlClient.test.ts

@@ -1,11 +1,24 @@
-import { getGraphQLRequestPayload, parseFetchPayload, parseGraphQLQuery } from '../../src/integrations/graphqlClient';
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, test } from 'vitest';
+
+import { SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils';
+import type { FetchHint, XhrHint } from '@sentry-internal/replay';
+import {
+  getGraphQLRequestPayload,
+  getRequestPayloadXhrOrFetch,
+  parseFetchPayload,
+  parseGraphQLQuery,
+} from '../../src/integrations/graphqlClient';
 
 describe('GraphqlClient', () => {
   describe('parseFetchPayload', () => {
     const data = [1, 2, 3];
     const jsonData = '{"data":[1,2,3]}';
 
-    it.each([
+    test.each([
       ['string URL only', ['http://example.com'], undefined],
       ['URL object only', [new URL('http://example.com')], undefined],
       ['Request URL only', [{ url: 'http://example.com' }], undefined],
@@ -88,4 +101,72 @@ describe('GraphqlClient', () => {
       expect(getGraphQLRequestPayload(JSON.stringify(requestBody))).toEqual(requestBody);
     });
   });
+
+  describe('getRequestPayloadXhrOrFetch', () => {
+    test('should parse xhr payload', () => {
+      const hint: XhrHint = {
+        xhr: {
+          [SENTRY_XHR_DATA_KEY]: {
+            method: 'POST',
+            url: 'http://example.com/test',
+            status_code: 200,
+            body: JSON.stringify({ key: 'value' }),
+            request_headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+          ...new XMLHttpRequest(),
+        },
+        input: JSON.stringify({ key: 'value' }),
+        startTimestamp: Date.now(),
+        endTimestamp: Date.now() + 1000,
+      };
+
+      const result = getRequestPayloadXhrOrFetch(hint);
+      expect(result).toEqual(JSON.stringify({ key: 'value' }));
+    });
+    test('should parse fetch payload', () => {
+      const hint: FetchHint = {
+        input: [
+          'http://example.com/test',
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ key: 'value' }),
+          },
+        ],
+        response: new Response(JSON.stringify({ key: 'value' }), {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }),
+        startTimestamp: Date.now(),
+        endTimestamp: Date.now() + 1000,
+      };
+
+      const result = getRequestPayloadXhrOrFetch(hint);
+      expect(result).toEqual(JSON.stringify({ key: 'value' }));
+    });
+    test('should return undefined if no body is in the response', () => {
+      const hint: FetchHint = {
+        input: [
+          'http://example.com/test',
+          {
+            method: 'GET',
+          },
+        ],
+        response: new Response(null, {
+          status: 200,
+        }),
+        startTimestamp: Date.now(),
+        endTimestamp: Date.now() + 1000,
+      };
+
+      const result = getRequestPayloadXhrOrFetch(hint);
+      expect(result).toBeUndefined();
+    });
+  });
 });