chore: test cases

Author: sanjam-deriv

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

@@ -78,24 +78,6 @@ describe('SubscribeRenderer', () => {
     expect(button).toBeVisible();
   });
 
-  it('should call subscribe and unsubscribe when pressing the send request button', async () => {
-    render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
-    const button = await screen.findByRole('button', { name: /Send Request/i });
-    expect(button).toBeVisible();
-
-    await userEvent.click(button);
-    expect(mockSubscribe).toBeCalledTimes(1);
-    expect(mockSubscribe).toBeCalledWith({ ticks: 'R_50', subscribe: 1 });
-  });
-
-  it('should call unsubscribe when pressing the clear button', async () => {
-    render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
-    const button = await screen.findByRole('button', { name: 'Clear' });
-    expect(button).toBeVisible();
-
-    await userEvent.click(button);
-  });
-
   it('should throw an error if incorrect json is being parsed', async () => {
     const consoleOutput = [];
     const mockedError = (output) => consoleOutput.push(output);
@@ -110,3 +92,28 @@ describe('SubscribeRenderer', () => {
     );
   });
 });
+
+it('should call subscribe and unsubscribe when pressing the send request button', async () => {
+  jest.spyOn(React, 'useRef').mockReturnValue({
+    current: {
+      unsubscribe: mockUnsubscribe,
+    },
+  });
+  render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
+  const button = await screen.findByRole('button', { name: /Send Request/i });
+  expect(button).toBeVisible();
+
+  await userEvent.click(button);
+  expect(mockUnsubscribe).toBeCalledTimes(1);
+  expect(mockSubscribe).toBeCalledTimes(1);
+  expect(mockSubscribe).toBeCalledWith({ ticks: 'R_50', subscribe: 1 });
+});
+
+it('should call unsubscribe when pressing the clear button', async () => {
+  render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
+  const button = await screen.findByRole('button', { name: 'Clear' });
+  expect(button).toBeVisible();
+
+  await userEvent.click(button);
+  expect(mockUnsubscribe).toBeCalledTimes(1);
+});

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -30,7 +30,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   const [toggle_modal, setToggleModal] = useState(false);
   const [is_not_valid, setIsNotValid] = useState(false);
 
-  const subscribe_ref: any = useRef();
+  const subscribe_ref: React.MutableRefObject<{ unsubscribe: () => void }> = useRef();
 
   useEffect(() => {
     if (error && error.code === 'AuthorizationRequired') {
@@ -42,7 +42,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     };
   }, [error]);
 
-  const parseRequestJSON = () => {
+  const parseRequestJSON = useCallback(() => {
     let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
 
     try {
@@ -54,13 +54,13 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     }
 
     return request_data;
-  };
+  }, [reqData]);
 
   const handleClick = useCallback(() => {
     if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
     subscribe_ref.current = subscribe(parseRequestJSON());
     setResponseState(true);
-  }, [subscribe, unsubscribe]);
+  }, [parseRequestJSON, subscribe]);
 
   const handleClear = () => {
     subscribe_ref.current?.unsubscribe?.();