chore: write test case for icon-radio.tsx

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/__tests__/icon-radio.spec.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+import { mockStore, StoreProvider } from '@deriv/stores';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render, screen } from '@testing-library/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import userEvent from '@testing-library/user-event';
+import { mock_ws } from 'Utils/mock';
+import RootStore from 'Stores/root-store';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import IconRadio from '../icon-radio';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => ({
+    saveRecentWorkspace: jest.fn(),
+    unHighlightAllBlocks: jest.fn(),
+}));
+jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn());
+
+describe('IconRadio', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined;
+
+    beforeAll(() => {
+        const mock_store = mockStore({});
+        mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+
+    it('should render the text passed as prop', () => {
+        const { container } = render(
+            <IconRadio
+                icon={<Icon icon={'IcGoogleDrive'} size={48} />}
+                text='test'
+                google_drive_connected={false}
+                onDriveConnect={() => {
+                    // empty
+                }}
+            />,
+            { wrapper }
+        );
+        expect(container).toHaveTextContent('test');
+    });
+
+    it('should render Google Drive as disconnected', () => {
+        const { container } = render(
+            <IconRadio
+                icon={<Icon icon={'IcGoogleDrive'} size={48} />}
+                text='Google Drive'
+                google_drive_connected={false}
+                onDriveConnect={() => {
+                    // empty
+                }}
+            />,
+            { wrapper }
+        );
+        expect(container).toHaveTextContent('Connect');
+    });
+
+    it('should fire gdrive connect callback', async () => {
+        const onDriveConnectCB = jest.fn();
+        render(
+            <IconRadio
+                icon={<Icon icon={'IcGoogleDrive'} size={48} />}
+                text='Google Drive'
+                google_drive_connected={false}
+                onDriveConnect={onDriveConnectCB}
+            />,
+            { wrapper }
+        );
+        await userEvent.click(screen.getByText('Connect'));
+        expect(onDriveConnectCB).toHaveBeenCalled();
+    });
+
+    it('should fire gdrive disconnect callback', async () => {
+        const onDriveConnectCB = jest.fn();
+        render(
+            <IconRadio
+                icon={<Icon icon={'IcGoogleDrive'} size={48} />}
+                text='Google Drive'
+                google_drive_connected={true}
+                onDriveConnect={onDriveConnectCB}
+            />,
+            { wrapper }
+        );
+        await userEvent.click(screen.getByText('Disconnect'));
+        expect(onDriveConnectCB).toHaveBeenCalled();
+    });
+});

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/icon-radio.tsx

@@ -4,10 +4,10 @@ import { Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
 type TIconRadio = {
-    google_drive_connected: boolean;
-    icon: string;
+    google_drive_connected?: boolean;
+    icon: React.ReactElement<{ className: string }, string>;
     text: string;
-    onDriveConnect: () => void;
+    onDriveConnect?: () => void;
 };
 const IconRadio = ({ icon, text, google_drive_connected, onDriveConnect }: TIconRadio) => {
     const is_drive_radio = text === 'Google Drive';