[BOT] Farabi/bot-1499/dbot tours tutorials test coverage

packages/bot-web-ui/src/pages/tutorials/dbot-tours/__tests__/tour-content.spec.tsx

@@ -2,24 +2,18 @@ import React from 'react';
 import { mockStore, StoreProvider } from '@deriv/stores';
 import { render, screen } from '@testing-library/react';
 import { mock_ws } from 'Utils/mock';
-import RootStore from 'Stores/root-store';
 import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
 import OnboardingTourMobile from '../onboarding-tour/onboarding-tour-mobile';
 import { DBOT_ONBOARDING_MOBILE } from '../tour-content';
 
-jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn());
 jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
-jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn());
-jest.mock('@deriv/deriv-charts', () => ({
-    setSmartChartsPublicPath: jest.fn(),
-}));
-describe('Tour Config Data', () => {
-    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined;
 
-    beforeEach(() => {
-        const mock_store = mockStore({});
-        mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+describe('Tour Content', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element;
+    const mock_store = mockStore({});
+    const mock_DBot_store = mockDBotStore(mock_store, mock_ws);
 
+    beforeEach(() => {
         wrapper = ({ children }: { children: JSX.Element }) => (
             <StoreProvider store={mock_store}>
                 <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>

packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-desktop.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DBOT_TABS } from 'Constants/bot-contents';
+import { mock_ws } from 'Utils/mock';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import BotBuilderTourDesktop from '../bot-builder-tour-desktop';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+
+describe('Bot Builder Tour Desktop', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element;
+    const mock_store = mockStore({});
+    const mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+    beforeAll(() => {
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+    it('should render BotBuilderTourDesktop component with tour start dialog', () => {
+        mock_store.ui.is_desktop = true;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<BotBuilderTourDesktop />, {
+            wrapper,
+        });
+
+        expect(screen.getByText("Let's build a Bot!")).toBeInTheDocument();
+    });
+
+    it('should render BotBuilderTourDesktop component with tour end dialog', () => {
+        mock_store.ui.is_desktop = true;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+        mock_DBot_store.dashboard.setActiveTour('bot_builder');
+
+        render(<BotBuilderTourDesktop />, {
+            wrapper,
+        });
+
+        expect(screen.getByText('Congratulations')).toBeInTheDocument();
+    });
+});

packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-mobile.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DBOT_TABS } from 'Constants/bot-contents';
+import { mock_ws } from 'Utils/mock';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import BotBuilderTourMobile from '../bot-builder-tour-mobile';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+
+describe('BotBuilder Tour Mobile', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element;
+    const mock_store = mockStore({});
+    const mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+    beforeAll(() => {
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+    it('should render BotBuilderTourMobile component', () => {
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<BotBuilderTourMobile />, {
+            wrapper,
+        });
+        expect(screen.getByText('Bot Builder guide')).toBeInTheDocument();
+    });
+
+    it('should render BotBuilderTourMobile when active tour is set to bot builder and tour dialog is false', () => {
+        mock_DBot_store.dashboard.active_tour = 'bot_builder';
+        mock_DBot_store.dashboard.setShowMobileTourDialog(false);
+
+        render(<BotBuilderTourMobile />, {
+            wrapper,
+        });
+
+        const start_button = screen.getByRole('button', { name: 'Start' });
+        userEvent.click(start_button);
+
+        expect(screen.getByTestId('botbuilder-tour-mobile')).toBeInTheDocument();
+    });
+});

packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-desktop.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-
 import { observer } from '@deriv/stores';
-
-import { useDBotStore } from 'Stores/useDBotStore';
 import { getSetting } from 'Utils/settings';
-
+import { useDBotStore } from 'Stores/useDBotStore';
 import ReactJoyrideWrapper from '../common/react-joyride-wrapper';
 import TourEndDialog from '../common/tour-end-dialog';
 import TourStartDialog from '../common/tour-start-dialog';

packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-button.spec.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-
 import { fireEvent, render, screen } from '@testing-library/react';
-
 import TourButton from '../tour-button';
 
 const mocked_props = {

packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-end-dialog.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DBOT_TABS } from 'Constants/bot-contents';
+import { mock_ws } from 'Utils/mock';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import TourEndDialog from '../tour-end-dialog';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+
+describe('Tour End Dialog', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element;
+    const mock_store = mockStore({});
+    const mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+    beforeEach(() => {
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+
+    it('render TourEndDialog component for bot builder tour', () => {
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+
+        render(<TourEndDialog />, { wrapper });
+        expect(screen.getByText('Congratulations')).toBeInTheDocument();
+    });
+
+    it('render TourEndDialog component to have title with text size xs', () => {
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+
+        render(<TourEndDialog />, { wrapper });
+
+        const title = screen.getByText('Congratulations');
+        expect(title).toHaveStyle('--text-size: var(--text-size-xs)');
+        expect(screen.getByTestId('tour-success-message')).toBeInTheDocument();
+    });
+
+    it('render TourEndDialog component to have title with text size s on desktop', () => {
+        mock_store.ui.is_desktop = true;
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+
+        render(<TourEndDialog />, { wrapper });
+
+        const title = screen.getByText('Congratulations');
+        expect(title).toHaveStyle('--text-size: var(--text-size-s)');
+        expect(screen.getByTestId('tour-success-message')).toBeInTheDocument();
+    });
+
+    it('render TourEndDialog component to be closed for bot builder tour after clicking OK', () => {
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+
+        render(<TourEndDialog />, { wrapper });
+        const start_button = screen.getByRole('button', { name: 'OK' });
+        userEvent.click(start_button);
+
+        expect(mock_DBot_store.dashboard.is_tour_dialog_visible).toBeFalsy();
+    });
+});

packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-start-dialog.spec.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DBOT_TABS } from 'Constants/bot-contents';
+import { mock_ws } from 'Utils/mock';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import TourStartDialog from '../tour-start-dialog';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+
+describe('Tour Start Dialog', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element;
+    const mock_store = mockStore({});
+    const mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+    beforeEach(() => {
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+
+    it('render TourStartDialog component for onboarding tour', () => {
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.DASHBOARD);
+
+        render(<TourStartDialog />, { wrapper });
+        expect(screen.getByText('Get started on Deriv Bot')).toBeInTheDocument();
+    });
+
+    it('render TourStartDialog component for bot builder tour in mobile', () => {
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<TourStartDialog />, { wrapper });
+        expect(screen.getByText('Bot Builder guide')).toBeInTheDocument();
+    });
+
+    it('render TourStartDialog component for bot builder tour in desktop', () => {
+        mock_store.ui.is_desktop = true;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<TourStartDialog />, { wrapper });
+        expect(screen.getByText("Let's build a Bot!")).toBeInTheDocument();
+    });
+
+    it('render TourStartDialog component with active tour as bot builder and dialog closed when clicking start', () => {
+        mock_store.ui.is_desktop = true;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<TourStartDialog />, { wrapper });
+
+        const start_button = screen.getByRole('button', { name: 'Start' });
+        userEvent.click(start_button);
+        expect(mock_DBot_store.dashboard.active_tour).toEqual('bot_builder');
+        expect(mock_DBot_store.dashboard.is_tour_dialog_visible).toBeFalsy();
+    });
+
+    it('render TourStartDialog component with show_mobile_tour_dialog as false when clicking start in mobile', () => {
+        mock_store.ui.is_desktop = false;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<TourStartDialog />, { wrapper });
+
+        const start_button = screen.getByRole('button', { name: 'Start' });
+        userEvent.click(start_button);
+        expect(mock_DBot_store.dashboard.show_mobile_tour_dialog).toBeFalsy();
+    });
+
+    it('render TourStartDialog component with dialog closed when clicking skip', () => {
+        mock_store.ui.is_desktop = true;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<TourStartDialog />, { wrapper });
+
+        const start_button = screen.getByRole('button', { name: 'Skip' });
+        userEvent.click(start_button);
+        expect(mock_DBot_store.dashboard.is_tour_dialog_visible).toBeFalsy();
+    });
+
+    it('render TourStartDialog component with show_mobile_tour_dialog as false when clicking skip in mobile', () => {
+        mock_store.ui.is_desktop = false;
+        mock_DBot_store.dashboard.setTourDialogVisibility(true);
+        mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER);
+
+        render(<TourStartDialog />, { wrapper });
+
+        const start_button = screen.getByRole('button', { name: 'Skip' });
+        userEvent.click(start_button);
+        expect(mock_DBot_store.dashboard.show_mobile_tour_dialog).toBeFalsy();
+    });
+});

packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-steps.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import { mock_ws } from 'Utils/mock';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import TourSteps from '../tour-steps';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/services/tradeEngine/utils/helpers', () => ({
+    getUUID: jest.fn(() => 'unique-id'),
+}));
+
+describe('Tour Steps', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element;
+    const mock_store = mockStore({});
+    const mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+    beforeEach(() => {
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+
+    it('render TourSteps component', () => {
+        render(<TourSteps content={[]} label={'Import or choose your bot'} step_index={1} />, { wrapper });
+        expect(screen.getByText('Import or choose your bot')).toBeInTheDocument();
+    });
+
+    it('render TourSteps with media files', () => {
+        render(<TourSteps content={[]} label='Import bot media' step_index={1} media='media.mp4' />);
+        const video_element = screen.getByText('Import bot media');
+        expect(video_element).toBeInTheDocument();
+    });
+
+    it('render with content if has_localize_component is true', () => {
+        const localize_component = <p key='localize-key'>Localized content</p>;
+        render(<TourSteps content={[localize_component]} label='Localized' step_index={1} has_localize_component />);
+        expect(screen.getByText('Localized content')).toBeInTheDocument();
+    });
+});