remove content-type header if there is no request body

Signed-off-by: Nik Nasr <[email protected]>

Author: nikrooz

Diff for: packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts

@@ -12,12 +12,12 @@ import { useGenerateExampleFromMediaTypeContent } from '../../../utils/exampleGe
 export const useTextRequestBodyState = (
   mediaTypeContent: IMediaTypeContent | undefined,
   skipReadOnly: boolean,
-): [string, React.Dispatch<React.SetStateAction<string>>] => {
+): [string | undefined, React.Dispatch<React.SetStateAction<string | undefined>>] => {
   const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
     skipReadOnly,
   });
 
-  const [textRequestBody, setTextRequestBody] = React.useState<string>(initialRequestBody);
+  const [textRequestBody, setTextRequestBody] = React.useState<string | undefined>(initialRequestBody);
 
   React.useEffect(() => {
     setTextRequestBody(initialRequestBody);

Diff for: packages/elements-core/src/components/TryIt/TryIt.spec.tsx

@@ -725,6 +725,56 @@ describe('TryIt', () => {
     });
   });
 
+  describe('No Request body', () => {
+    it('with GET method', async () => {
+      render(<TryItWithPersistence httpOperation={basicOperation} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^get$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+
+    it('with POST method', async () => {
+      render(<TryItWithPersistence httpOperation={{ ...basicOperation, request: undefined, method: 'POST' }} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^post$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+
+    it('with PATCH method', async () => {
+      render(<TryItWithPersistence httpOperation={{ ...basicOperation, request: undefined, method: 'PATCH' }} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^patch$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+
+    it('with PUT method', async () => {
+      render(<TryItWithPersistence httpOperation={{ ...basicOperation, request: undefined, method: 'PUT' }} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^put$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+  });
+
   describe('Mocking', () => {
     it('Shows mock button', () => {
       render(<TryItWithPersistence httpOperation={basicOperation} mockUrl="https://mock-todos.stoplight.io" />);

Diff for: packages/elements-core/src/components/TryIt/TryIt.tsx

@@ -296,7 +296,7 @@ export const TryIt: React.FC<TryItProps> = ({
             values={bodyParameterValues}
             onChangeValues={setBodyParameterValues}
           />
-        ) : mediaTypeContent ? (
+        ) : mediaTypeContent && textRequestBody !== undefined ? (
           <RequestBody
             examples={mediaTypeContent.examples ?? []}
             requestBody={textRequestBody}

Diff for: packages/elements-core/src/utils/exampleGeneration/exampleGeneration.ts

@@ -57,7 +57,7 @@ export const generateExampleFromMediaTypeContent = (
     console.warn(e);
     return `Example cannot be created for this schema\n${e}`;
   }
-  return '';
+  return undefined;
 };
 
 export const generateExamplesFromJsonSchema = (schema: JSONSchema7 & { 'x-examples'?: unknown }): Example[] => {