chore: adding test coverage

Author: Hubert Koster

src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx

@@ -3,14 +3,39 @@ import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
 import { TSocketEndpointNames } from '@site/src/configs/websocket/types';
 import useAuthContext from '@site/src/hooks/useAuthContext';
+import useSubscription from '@site/src/hooks/useSubscription';
+import useWS from '@site/src/hooks/useWs';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
 import userEvent from '@testing-library/user-event';
 import RequestJSONBox from '..';
 
+const fakeHookObject = {
+  clear: jest.fn(),
+  send: jest.fn(),
+  full_response: {
+    tick: 1,
+    echo_req: { tick: 1 },
+  },
+};
+
 jest.mock('@site/src/hooks/useAuthContext');
 
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<() => Partial<IAuthContext>>;
 
+jest.mock('@site/src/hooks/useSubscription');
+
+const mockUseSubscription = useSubscription as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useSubscription>>
+>;
+
+mockUseSubscription.mockImplementation(() => fakeHookObject);
+
+jest.mock('@site/src/hooks/useWs');
+
+const mockuseWS = useWS as jest.MockedFunction<() => Partial<ReturnType<typeof useWS>>>;
+
+mockuseWS.mockImplementation(() => fakeHookObject);
+
 describe('RequestResponseRenderer', () => {
   const mockProps = {
     handleChange: jest.fn(),

src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx

@@ -2,21 +2,49 @@ import React from 'react';
 import PlaygroundSection from '..';
 import { render, screen } from '@testing-library/react';
 
+const fake_full_response = {
+  msg_type: 'test',
+};
+
 describe('PlaygroundSection', () => {
   it('should render the loader', async () => {
-    render(<PlaygroundSection loader response_state={false} data={null} error={null} />);
+    render(
+      <PlaygroundSection
+        loader
+        response_state={false}
+        full_response={fake_full_response}
+        error={null}
+        name=''
+      />,
+    );
     const loader = await screen.findByTestId('circles-loading');
     expect(loader).toBeVisible();
   });
 
   it('should render the PlaygroundConsole', async () => {
-    render(<PlaygroundSection loader={false} response_state={false} data={null} error={null} />);
+    render(
+      <PlaygroundSection
+        loader={false}
+        response_state={false}
+        full_response={fake_full_response}
+        error={null}
+        name=''
+      />,
+    );
     const playground_section = await screen.findByTestId('dt_playground_section');
     expect(playground_section).toBeVisible();
   });
 
   it('should render the ReactJson', async () => {
-    render(<PlaygroundSection loader={false} response_state data={null} error={null} />);
+    render(
+      <PlaygroundSection
+        loader={false}
+        response_state
+        full_response={fake_full_response}
+        error={null}
+        name=''
+      />,
+    );
 
     const playground_section = await screen.findByTestId('dt_playground_section');
     expect(playground_section).toBeVisible();

src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx

@@ -12,18 +12,28 @@ const ReactJson = React.lazy(() => import('react-json-view'));
 type TPlaygroundSection<T extends TSocketEndpointNames> = {
   loader: boolean;
   response_state: boolean;
-  data: TSocketResponseData<T>;
+  full_response: TSocketResponseData<T>;
   error: unknown;
+  name: string;
 };
 
 const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNames>({
   loader,
   response_state,
-  data,
+  full_response,
   error,
+  name,
 }: TPlaygroundSection<T>) => {
   if (loader) return <Loader />;
 
+  const key = full_response['msg_type'] ?? name;
+  const echo_req_json = {
+    echo_req: full_response['echo_req'],
+    msg_type: full_response['msg_type'],
+    req_id: full_response['req_id'],
+  };
+  const main_object_json = { [key]: full_response[key] };
+
   return (
     <div
       id='playground-console'
@@ -34,8 +44,11 @@ const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableE
         <React.Fragment>
           <Suspense fallback={<Loader />}>
             <div data-testid='dt_json_view'>
-              {data !== null ? (
-                <ReactJson src={{ data }} theme='tube' />
+              {full_response !== null ? (
+                <div className={styles.reactJsonContainer}>
+                  <ReactJson src={echo_req_json} theme='tube' />
+                  <ReactJson src={main_object_json} theme='tube' />
+                </div>
               ) : (
                 <ReactJson src={{ error }} theme='tube' />
               )}

src/features/Apiexplorer/RequestResponseRenderer/index.tsx

@@ -21,7 +21,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
-  const { data, is_loading, send, clear, error } = useWS<T>(name);
+  const { full_response, is_loading, send, clear, error } = useWS<T>(name);
   const [toggle_modal, setToggleModal] = useState(false);
   const [response_state, setResponseState] = useState(false);
 
@@ -66,8 +66,9 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
         <PlaygroundSection
           loader={is_loading}
           response_state={response_state}
-          data={data}
+          full_response={full_response}
           error={error}
+          name={name}
         />
       )}
     </div>

src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx

@@ -55,6 +55,10 @@ mockUseSubscription.mockImplementation(() => ({
   subscribe: mockSubscribe,
   unsubscribe: mockUnsubscribe,
   error: 'random error',
+  full_response: {
+    tick: 1,
+    echo_req: { tick: 1 },
+  },
 }));
 
 const request_data = `{

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -21,7 +21,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
-  const { data, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
+  const { full_response, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
 
@@ -66,8 +66,9 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
         <PlaygroundSection
           loader={is_loading}
           response_state={response_state}
-          data={data}
+          full_response={full_response}
           error={error}
+          name={name}
         />
       )}
     </div>

src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx

@@ -32,6 +32,10 @@ const mockClear = jest.fn();
 mockuseWS.mockImplementation(() => ({
   clear: mockClear,
   send: jest.fn(),
+  full_response: {
+    tick: 1,
+    echo_req: { tick: 1 },
+  },
 }));
 
 jest.mock('@site/src/hooks/useDynamicImportJSON');