Show request/reply empty body

* Update unit tests

ee/app/assets/javascripts/vue_shared/security_reports/components/helpers.js

 import { EMPTY_BODY_MESSAGE } from './constants';
 
-export const bodyWithFallBack = (body) => body || EMPTY_BODY_MESSAGE;
+/**
+ * A helper function which validates the passed
+ * in body string.
+ *
+ * It returns an empty string if the body has explicitly
+ * been passed in as an empty string, a fallback
+ * message if the body is null / undefined, else
+ * it will return the original body string.
+ *
+ * @param {String} body the body message
+ *
+ * @return {String} the validated body message
+ */
+export const bodyWithFallBack = (body) => (body === '' ? '' : body || EMPTY_BODY_MESSAGE);

ee/changelogs/unreleased/284677-api-fuzzing-empty-body-bug-fix.yml

+---
+title: Show Response fields for vulnerabilties sourced from DAST
+merge_request: 51948
+author:
+type: fixed

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -174,7 +174,9 @@ describe('VulnerabilityDetails component', () => {
   });
 
   describe.each([
-    ['', EMPTY_BODY_MESSAGE],
+    ['', ''],
+    [undefined, EMPTY_BODY_MESSAGE],
+    [null, EMPTY_BODY_MESSAGE],
     [USER_NOT_FOUND_MESSAGE, USER_NOT_FOUND_MESSAGE],
   ])('with request information and body set to: %s', (body, renderedBody) => {
     let vulnerability;
@@ -234,7 +236,9 @@ describe('VulnerabilityDetails component', () => {
   });
 
   describe.each([
-    ['', EMPTY_BODY_MESSAGE],
+    ['', ''],
+    [undefined, EMPTY_BODY_MESSAGE],
+    [null, EMPTY_BODY_MESSAGE],
     [USER_NOT_FOUND_MESSAGE, USER_NOT_FOUND_MESSAGE],
   ])('with response information and body set to: %s', (body, renderedBody) => {
     let vulnerability;
@@ -281,7 +285,9 @@ describe('VulnerabilityDetails component', () => {
   });
 
   describe.each([
-    ['', EMPTY_BODY_MESSAGE],
+    ['', ''],
+    [undefined, EMPTY_BODY_MESSAGE],
+    [null, EMPTY_BODY_MESSAGE],
     [USER_NOT_FOUND_MESSAGE, USER_NOT_FOUND_MESSAGE],
   ])('with recorded response information and body set to: %s', (body, renderedBody) => {
     let vulnerability;

ee/spec/frontend/vulnerabilities/details_spec.js

@@ -242,6 +242,12 @@ describe('Vulnerability Details', () => {
       isCode: true,
     };
 
+    const EXPECT_REQUEST_WITH_EMPTY_STRING = {
+      label: 'Sent request:',
+      content: 'GET http://www.gitlab.com\nName1: Value1\nName2: Value2',
+      isCode: true,
+    };
+
     const EXPECT_RESPONSE = {
       label: 'Actual response:',
       content: '500 INTERNAL SERVER ERROR\nName1: Value1\nName2: Value2\n\n[{"user_id":1,}]',
@@ -255,6 +261,12 @@ describe('Vulnerability Details', () => {
       isCode: true,
     };
 
+    const EXPECT_RESPONSE_WITH_EMPTY_STRING = {
+      label: 'Actual response:',
+      content: '500 INTERNAL SERVER ERROR\nName1: Value1\nName2: Value2',
+      isCode: true,
+    };
+
     const EXPECT_RECORDED_RESPONSE = {
       label: 'Unmodified response:',
       content: '200 OK\nName1: Value1\nName2: Value2\n\n[{"user_id":1,}]',
@@ -267,6 +279,12 @@ describe('Vulnerability Details', () => {
       isCode: true,
     };
 
+    const EXPECT_RECORDED_RESPONSE_WITH_EMPTY_STRING = {
+      label: 'Unmodified response:',
+      content: '200 OK\nName1: Value1\nName2: Value2',
+      isCode: true,
+    };
+
     const getTextContent = (el) => el.textContent.trim();
     const getLabel = (el) => getTextContent(getByTestId(el, 'label'));
     const getContent = (el) => getTextContent(getByTestId(el, 'value'));
@@ -293,7 +311,9 @@ describe('Vulnerability Details', () => {
       ${{ method: 'GET', url: 'http://www.gitlab.com' }}                                                  | ${null}
       ${{ method: 'GET', url: 'http://www.gitlab.com', body: '[{"user_id":1,}]' }}                        | ${null}
       ${{ headers: TEST_HEADERS, method: 'GET', url: 'http://www.gitlab.com', body: '[{"user_id":1,}]' }} | ${[EXPECT_REQUEST]}
-      ${{ headers: TEST_HEADERS, method: 'GET', url: 'http://www.gitlab.com', body: '' }}                 | ${[EXPECT_REQUEST_WITHOUT_BODY]}
+      ${{ headers: TEST_HEADERS, method: 'GET', url: 'http://www.gitlab.com', body: null }}               | ${[EXPECT_REQUEST_WITHOUT_BODY]}
+      ${{ headers: TEST_HEADERS, method: 'GET', url: 'http://www.gitlab.com', body: undefined }}          | ${[EXPECT_REQUEST_WITHOUT_BODY]}
+      ${{ headers: TEST_HEADERS, method: 'GET', url: 'http://www.gitlab.com', body: '' }}                 | ${[EXPECT_REQUEST_WITH_EMPTY_STRING]}
     `('shows request data for $request', ({ request, expectedData }) => {
       createWrapper({ request });
       expect(getSectionData('request')).toEqual(expectedData);
@@ -307,7 +327,9 @@ describe('Vulnerability Details', () => {
       ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]' }}                                                           | ${null}
       ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]', statusCode: '500' }}                                        | ${null}
       ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]', statusCode: '500', reasonPhrase: 'INTERNAL SERVER ERROR' }} | ${[EXPECT_RESPONSE]}
-      ${{ headers: TEST_HEADERS, body: '', statusCode: '500', reasonPhrase: 'INTERNAL SERVER ERROR' }}                 | ${[EXPECT_RESPONSE_WITHOUT_BODY]}
+      ${{ headers: TEST_HEADERS, body: null, statusCode: '500', reasonPhrase: 'INTERNAL SERVER ERROR' }}               | ${[EXPECT_RESPONSE_WITHOUT_BODY]}
+      ${{ headers: TEST_HEADERS, body: undefined, statusCode: '500', reasonPhrase: 'INTERNAL SERVER ERROR' }}          | ${[EXPECT_RESPONSE_WITHOUT_BODY]}
+      ${{ headers: TEST_HEADERS, body: '', statusCode: '500', reasonPhrase: 'INTERNAL SERVER ERROR' }}                 | ${[EXPECT_RESPONSE_WITH_EMPTY_STRING]}
     `('shows response data for $response', ({ response, expectedData }) => {
       createWrapper({ response });
       expect(getSectionData('response')).toEqual(expectedData);
@@ -324,7 +346,9 @@ describe('Vulnerability Details', () => {
       ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200' } }]}                                                             | ${null}
       ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200', reason_phrase: 'OK' } }]}                                        | ${null}
       ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', statusCode: '200', reasonPhrase: 'OK' } }]} | ${[EXPECT_RECORDED_RESPONSE]}
-      ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: '', statusCode: '200', reasonPhrase: 'OK' } }]}                 | ${[EXPECT_RECORDED_RESPONSE_WITHOUT_BODY]}
+      ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: null, statusCode: '200', reasonPhrase: 'OK' } }]}               | ${[EXPECT_RECORDED_RESPONSE_WITHOUT_BODY]}
+      ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: undefined, statusCode: '200', reasonPhrase: 'OK' } }]}          | ${[EXPECT_RECORDED_RESPONSE_WITHOUT_BODY]}
+      ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: '', statusCode: '200', reasonPhrase: 'OK' } }]}                 | ${[EXPECT_RECORDED_RESPONSE_WITH_EMPTY_STRING]}
     `('shows response data for $supporting_messages', ({ supportingMessages, expectedData }) => {
       createWrapper({ supportingMessages });
       expect(getSectionData('recorded-response')).toEqual(expectedData);