diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/__tests__/tour-content.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/__tests__/tour-content.spec.tsx index 0680db5d90a3..68bde01a3ac6 100644 --- a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/__tests__/tour-content.spec.tsx +++ b/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 }) => ( diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-desktop.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-desktop.spec.tsx new file mode 100644 index 000000000000..02573dff352b --- /dev/null +++ b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-desktop.spec.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { mockStore, StoreProvider } from '@deriv/stores'; +import { render, screen } from '@testing-library/react'; +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 }) => ( + + + {children} + + + ); + }); + 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(, { + 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(, { + wrapper, + }); + + expect(screen.getByText('Congratulations')).toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-handler.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-handler.spec.tsx new file mode 100644 index 000000000000..9a678ac54303 --- /dev/null +++ b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-handler.spec.tsx @@ -0,0 +1,43 @@ +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 BotBuilderTourHandler from '../index'; + +jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn()); + +jest.mock('../bot-builder-tour-desktop', () => jest.fn(() =>
BotBuilderTourDesktop
)); +jest.mock('../bot-builder-tour-mobile', () => jest.fn(() =>
BotBuilderTourMobile
)); + +describe('BotBuilderTourHandler', () => { + 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 }) => ( + + + {children} + + + ); + }); + + it('should render BotBuilderTourDesktop when is_mobile is false', () => { + render(, { + wrapper, + }); + + expect(screen.getByText('BotBuilderTourDesktop')).toBeInTheDocument(); + expect(screen.queryByText('BotBuilderTourMobile')).not.toBeInTheDocument(); + }); + + it('should render BotBuilderTourMobile when is_mobile is true', () => { + render(); + + expect(screen.getByText('BotBuilderTourMobile')).toBeInTheDocument(); + expect(screen.queryByText('BotBuilderTourDesktop')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-mobile.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-mobile.spec.tsx new file mode 100644 index 000000000000..a06089db7840 --- /dev/null +++ b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/__tests__/bot-builder-tour-mobile.spec.tsx @@ -0,0 +1,75 @@ +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 }) => ( + + + {children} + + + ); + }); + it('should render BotBuilderTourMobile component', () => { + mock_DBot_store.dashboard.setTourDialogVisibility(true); + mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER); + + render(, { + 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(, { + wrapper, + }); + + const start_button = screen.getByRole('button', { name: 'Start' }); + userEvent.click(start_button); + + expect(screen.getByTestId('botbuilder-tour-mobile')).toBeInTheDocument(); + }); + + it('should render BotBuilderTourMobile steps with Next and Previous buttons', () => { + render(, { + wrapper, + }); + + const next_button = screen.getByRole('button', { name: 'Next' }); + userEvent.click(next_button); + expect(screen.getByRole('button', { name: 'Previous' })).toBeInTheDocument(); + + const previous_button = screen.getByRole('button', { name: 'Previous' }); + userEvent.click(previous_button); + expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument(); + }); + + it('should render BotBuilderTourMobile steps with Next and Previous buttons', () => { + render(, { + wrapper, + }); + + const next_button = screen.getByRole('button', { name: 'Next' }); + userEvent.click(next_button); + userEvent.click(next_button); + + expect(screen.getByRole('button', { name: 'Finish' })).toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-desktop.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-desktop.tsx index 995370054d17..ba04969ca413 100644 --- a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-desktop.tsx +++ b/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'; diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-button.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-button.spec.tsx index 960e55f7bdf8..9cd8e41ccd4b 100644 --- a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-button.spec.tsx +++ b/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 = { diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-end-dialog.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-end-dialog.spec.tsx new file mode 100644 index 000000000000..bbd1295ed139 --- /dev/null +++ b/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 }) => ( + + + {children} + + + ); + }); + + it('render TourEndDialog component for bot builder tour', () => { + mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER); + mock_DBot_store.dashboard.setTourDialogVisibility(true); + + render(, { 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(, { 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(, { 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(, { wrapper }); + const start_button = screen.getByRole('button', { name: 'OK' }); + userEvent.click(start_button); + + expect(mock_DBot_store.dashboard.is_tour_dialog_visible).toBeFalsy(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-start-dialog.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-start-dialog.spec.tsx new file mode 100644 index 000000000000..cdfa51f907c4 --- /dev/null +++ b/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 }) => ( + + + {children} + + + ); + }); + + it('render TourStartDialog component for onboarding tour', () => { + mock_DBot_store.dashboard.setTourDialogVisibility(true); + mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.DASHBOARD); + + render(, { 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(, { 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(, { 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(, { 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(, { 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(, { 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(, { wrapper }); + + const start_button = screen.getByRole('button', { name: 'Skip' }); + userEvent.click(start_button); + expect(mock_DBot_store.dashboard.show_mobile_tour_dialog).toBeFalsy(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-steps.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/common/__tests__/tour-steps.spec.tsx new file mode 100644 index 000000000000..dd4aaf5b25b6 --- /dev/null +++ b/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 }) => ( + + + {children} + + + ); + }); + + it('render TourSteps component', () => { + render(, { wrapper }); + expect(screen.getByText('Import or choose your bot')).toBeInTheDocument(); + }); + + it('render TourSteps with media files', () => { + render(); + 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 =

Localized content

; + render(); + expect(screen.getByText('Localized content')).toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-desktop.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-desktop.spec.tsx new file mode 100644 index 000000000000..174ef0f5e0ad --- /dev/null +++ b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-desktop.spec.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { mockStore, StoreProvider } from '@deriv/stores'; +import { render, screen } from '@testing-library/react'; +import { DBOT_TABS } from 'Constants/bot-contents'; +import { mock_ws } from 'Utils/mock'; +import { getSetting } from 'Utils/settings'; +import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore'; +import OnboardingTourDesktop from '../onboarding-tour-desktop'; + +jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn()); + +jest.mock('Utils/settings', () => ({ + getSetting: jest.fn(), +})); + +describe('Onboarding Tour Desktop', () => { + 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 }) => ( + + + {children} + + + ); + }); + + it('should render OnboardingTourDesktop component', () => { + render(, { + wrapper, + }); + + expect(screen.getByText('Get started on Deriv Bot')).toBeInTheDocument(); + }); + + it('should render Onboarding tour when no onboarding token and active tab is 0', () => { + (getSetting as jest.Mock).mockReturnValueOnce(null); + mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.DASHBOARD); + + render(, { + wrapper, + }); + + expect(mock_DBot_store.dashboard.is_tour_dialog_visible).toBeTruthy(); + }); + + it('should render ReactJoyrideWrapper when there is an active tour', () => { + render(, { + wrapper, + }); + + mock_DBot_store.dashboard.setActiveTour('onboarding'); + expect(screen.getByText('Get started on Deriv Bot')).toBeInTheDocument(); + }); + + it('should not render Onboarding tour when token is set and active tab is not 0', () => { + (getSetting as jest.Mock).mockReturnValueOnce('onboarding_tour_token'); + mock_DBot_store.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER); + + render(, { + wrapper, + }); + + expect(screen.queryByText('Get started on Deriv Bot')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-handler.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-handler.spec.tsx new file mode 100644 index 000000000000..03c2efeeb03d --- /dev/null +++ b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-handler.spec.tsx @@ -0,0 +1,43 @@ +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 OnboardingTourHandler from '../index'; + +jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn()); + +jest.mock('../onboarding-tour-desktop', () => jest.fn(() =>
OnboardingTourDesktop
)); +jest.mock('../onboarding-tour-mobile', () => jest.fn(() =>
OnboardingTourMobile
)); + +describe('OnboardingTourHandler', () => { + 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 }) => ( + + + {children} + + + ); + }); + + it('should render OnboardingTourDesktop when is_mobile is false', () => { + render(, { + wrapper, + }); + + expect(screen.getByText('OnboardingTourDesktop')).toBeInTheDocument(); + expect(screen.queryByText('OnboardingTourMobile')).not.toBeInTheDocument(); + }); + + it('should render OnboardingTourMobile when is_mobile is true', () => { + render(); + + expect(screen.getByText('OnboardingTourMobile')).toBeInTheDocument(); + expect(screen.queryByText('OnboardingTourDesktop')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-mobile.spec.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-mobile.spec.tsx new file mode 100644 index 000000000000..5fc1d3f95175 --- /dev/null +++ b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/__tests__/onboarding-tour-mobile.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 { mock_ws } from 'Utils/mock'; +import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore'; +import OnboardingTourMobile from '../onboarding-tour-mobile'; + +jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn()); + +describe('Onboarding Tour Mobile', () => { + 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 }) => ( + + + {children} + + + ); + }); + it('should render OnboardingTourMobile component', () => { + render(, { + wrapper, + }); + expect(screen.getByText('Get started on Deriv Bot')).toBeInTheDocument(); + }); + + it('should render OnboardingTourMobile steps when clicking start', () => { + render(, { + wrapper, + }); + + const start_button = screen.getByRole('button', { name: 'Start' }); + userEvent.click(start_button); + expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument(); + }); + + it('should render OnboardingTourMobile steps with previous button from second step', () => { + render(, { + wrapper, + }); + + const start_button = screen.getByRole('button', { name: 'Start' }); + userEvent.click(start_button); + + const next_button = screen.getByRole('button', { name: 'Next' }); + userEvent.click(next_button); + expect(screen.getByRole('button', { name: 'Previous' })).toBeInTheDocument(); + + const previous_button = screen.getByRole('button', { name: 'Previous' }); + userEvent.click(previous_button); + expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument(); + }); + + it('should close OnboardingTourMobile when clicking on skip', () => { + render(, { + wrapper, + }); + + const skip_button = screen.getByRole('button', { name: 'Skip' }); + userEvent.click(skip_button); + expect(mock_DBot_store.dashboard.active_tour).toBe(''); + }); +});