diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx new file mode 100644 index 000000000000..dabd75a7f0a5 --- /dev/null +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx @@ -0,0 +1,200 @@ +import React from 'react'; +import { SetupRealAccountOrGoToDemoModalContent } from '../setup-real-account-or-go-to-demo-modal-content'; +import { render, screen } from '@testing-library/react'; +import { Analytics } from '@deriv-com/analytics'; +import { useContentFlag } from '@deriv/hooks'; +import { StoreProvider, mockStore } from '@deriv/stores'; +import userEvent from '@testing-library/user-event'; +import { Jurisdiction } from '@deriv/shared'; + +jest.mock('@deriv/hooks', () => ({ + ...jest.requireActual('@deriv/hooks'), + useContentFlag: jest.fn(() => ({ is_cr_demo: true, is_eu_demo: false })), +})); + +jest.mock('@deriv-com/analytics', () => ({ + ...jest.requireActual('@deriv-com/analytics'), + Analytics: { + trackEvent: jest.fn(), + }, +})); + +describe('SetupRealAccountOrGoToDemoModalContent', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('Should render correctly in desktop', () => { + const mock = mockStore({}); + + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + const { container } = render(, { + wrapper, + }); + + const title = screen.getByText(/start your trading journey/i); + + expect(container).toBeInTheDocument(); + expect(title).toBeInTheDocument(); + }); + + it('Should render correctly in responsive', () => { + const mock = mockStore({}); + + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + const { container } = render(, { + wrapper, + }); + + const title = screen.getByText(/start your trading journey/i); + + expect(container).toBeInTheDocument(); + expect(title).toBeInTheDocument(); + }); + + it('User click "setup real account" button when is_cr_demo = true', () => { + (useContentFlag as jest.Mock).mockReturnValue({ is_cr_demo: true, is_eu_demo: false }); + + const mockedOpenRealAccountSignup = jest.fn(); + const mockedSetIsFromSignupAccount = jest.fn(); + const mockedSetIsSetupRealAccountOrGoToDemoModalVisible = jest.fn(); + + const mock = mockStore({ + ui: { + is_from_signup_account: true, + openRealAccountSignup: mockedOpenRealAccountSignup, + setIsFromSignupAccount: mockedSetIsFromSignupAccount, + }, + traders_hub: { + is_setup_real_account_or_go_to_demo_modal_visible: true, + setIsSetupRealAccountOrGoToDemoModalVisible: mockedSetIsSetupRealAccountOrGoToDemoModalVisible, + }, + }); + + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + const mockTrack = Analytics.trackEvent; + + const { container } = render(, { + wrapper, + }); + + const setup_btn = screen.getByRole('button', { + name: /set up your real account/i, + }); + + expect(container).toBeInTheDocument(); + + userEvent.click(setup_btn); + + expect(mockTrack).toBeCalledTimes(1); + + expect(mockedOpenRealAccountSignup).toBeCalledTimes(1); + expect(mockedOpenRealAccountSignup).toBeCalledWith(Jurisdiction.SVG); + + expect(mockedSetIsFromSignupAccount).toBeCalledTimes(1); + expect(mockedSetIsFromSignupAccount).toBeCalledWith(false); + + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledTimes(1); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledWith(false); + }); + + it('User click "setup real account" button when is_eu_demo = true', () => { + (useContentFlag as jest.Mock).mockReturnValue({ is_cr_demo: false, is_eu_demo: true }); + + const mockedOpenRealAccountSignup = jest.fn(); + const mockedSetIsFromSignupAccount = jest.fn(); + const mockedSetIsSetupRealAccountOrGoToDemoModalVisible = jest.fn(); + + const mock = mockStore({ + ui: { + is_from_signup_account: true, + openRealAccountSignup: mockedOpenRealAccountSignup, + setIsFromSignupAccount: mockedSetIsFromSignupAccount, + }, + traders_hub: { + is_setup_real_account_or_go_to_demo_modal_visible: true, + setIsSetupRealAccountOrGoToDemoModalVisible: mockedSetIsSetupRealAccountOrGoToDemoModalVisible, + }, + }); + + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + const mockTrack = Analytics.trackEvent; + + const { container } = render(, { + wrapper, + }); + + const setup_btn = screen.getByRole('button', { + name: /set up your real account/i, + }); + + expect(container).toBeInTheDocument(); + + userEvent.click(setup_btn); + + expect(mockTrack).toBeCalledTimes(1); + + expect(mockedOpenRealAccountSignup).toBeCalledTimes(1); + expect(mockedOpenRealAccountSignup).toBeCalledWith(Jurisdiction.MALTA_INVEST); + + expect(mockedSetIsFromSignupAccount).toBeCalledTimes(1); + expect(mockedSetIsFromSignupAccount).toBeCalledWith(false); + + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledTimes(1); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledWith(false); + }); + + it('User click "take me to demo" button', () => { + const mockedSetIsFromSignupAccount = jest.fn(); + const mockedSetIsSetupRealAccountOrGoToDemoModalVisible = jest.fn(); + + const mock = mockStore({ + ui: { + is_from_signup_account: true, + setIsFromSignupAccount: mockedSetIsFromSignupAccount, + }, + traders_hub: { + is_setup_real_account_or_go_to_demo_modal_visible: true, + setIsSetupRealAccountOrGoToDemoModalVisible: mockedSetIsSetupRealAccountOrGoToDemoModalVisible, + }, + }); + + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + const mockTrack = Analytics.trackEvent; + + const { container } = render(, { + wrapper, + }); + + const demo_btn = screen.getByRole('button', { + name: /take me to demo/i, + }); + + expect(container).toBeInTheDocument(); + + userEvent.click(demo_btn); + + expect(mockTrack).toBeCalledTimes(1); + + expect(mockedSetIsFromSignupAccount).toBeCalledTimes(1); + expect(mockedSetIsFromSignupAccount).toBeCalledWith(false); + + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledTimes(1); + expect(mockedSetIsSetupRealAccountOrGoToDemoModalVisible).toBeCalledWith(false); + }); +}); diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx index 7317906051c3..cde21c94f939 100644 --- a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal-content.tsx @@ -50,6 +50,7 @@ export const SetupRealAccountOrGoToDemoModalContent = observer(({ is_responsive cta_name: 'go_demo', }); + setIsFromSignupAccount(false); setIsSetupRealAccountOrGoToDemoModalVisible(false); };