diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/__tests__/icon-radio.spec.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/__tests__/icon-radio.spec.tsx
new file mode 100644
index 000000000000..5851f7dbc242
--- /dev/null
+++ b/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 }) => (
+
+
+ {children}
+
+
+ );
+ });
+
+ it('should render the text passed as prop', () => {
+ const { container } = render(
+ }
+ text='test'
+ google_drive_connected={false}
+ onDriveConnect={() => {
+ // empty
+ }}
+ />,
+ { wrapper }
+ );
+ expect(container).toHaveTextContent('test');
+ });
+
+ it('should render Google Drive as disconnected', () => {
+ const { container } = render(
+ }
+ 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(
+ }
+ 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(
+ }
+ text='Google Drive'
+ google_drive_connected={true}
+ onDriveConnect={onDriveConnectCB}
+ />,
+ { wrapper }
+ );
+ await userEvent.click(screen.getByText('Disconnect'));
+ expect(onDriveConnectCB).toHaveBeenCalled();
+ });
+});
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/icon-radio.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/icon-radio.tsx
index 43252ec061d1..0299e3d52670 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/icon-radio.tsx
+++ b/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';