From 2f80792b52faca1640f23f3e3605aafe49210886 Mon Sep 17 00:00:00 2001 From: sergei-deriv Date: Thu, 27 Jun 2024 18:11:25 +0300 Subject: [PATCH] feat: modify tests, add check for passkey modal, modify modal for tablet view --- .../__tests__/after-signup-flow.spec.tsx | 35 +++++---------- ...count-or-go-to-demo-modal-content.spec.tsx | 43 ++++++------------- ...-real-account-or-go-to-demo-modal.spec.tsx | 43 ++++++++++++++----- ...etup-real-account-or-go-to-demo-modal.scss | 6 +-- ...setup-real-account-or-go-to-demo-modal.tsx | 17 ++++---- .../src/App/Containers/Modals/app-modals.jsx | 5 ++- 6 files changed, 73 insertions(+), 76 deletions(-) diff --git a/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx b/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx index d33c0878ad3e..d8e024753c01 100644 --- a/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx +++ b/packages/appstore/src/components/after-signup-flow/__tests__/after-signup-flow.spec.tsx @@ -11,15 +11,18 @@ jest.mock('@deriv/hooks', () => ({ })); describe('AfterSignupFlow', () => { - it('should render correctly', () => { - const mock = mockStore({}); + const mockDefault = mockStore({}); - const wrapper = ({ children }: { children: JSX.Element }) => ( + const wrapper = (mock: ReturnType = mockDefault) => { + const Component = ({ children }: { children: JSX.Element }) => ( {children} ); + return Component; + }; + it('should render correctly', () => { const { container } = render(, { - wrapper, + wrapper: wrapper(), }); expect(container).toBeInTheDocument(); }); @@ -46,12 +49,8 @@ describe('AfterSignupFlow', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - render(, { - wrapper, + wrapper: wrapper(mock), }); expect(mockedOpenRealAccountSignup).not.toBeCalled(); @@ -82,12 +81,8 @@ describe('AfterSignupFlow', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - render(, { - wrapper, + wrapper: wrapper(mock), }); expect(mockedOpenRealAccountSignup).toBeCalled(); @@ -118,12 +113,8 @@ describe('AfterSignupFlow', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - render(, { - wrapper, + wrapper: wrapper(mock), }); expect(mockedOpenRealAccountSignup).toBeCalled(); @@ -154,12 +145,8 @@ describe('AfterSignupFlow', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - render(, { - wrapper, + wrapper: wrapper(mock), }); expect(mockedOpenRealAccountSignup).not.toBeCalled(); 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 index dabd75a7f0a5..e78aa385d0ea 100644 --- 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 @@ -20,19 +20,22 @@ jest.mock('@deriv-com/analytics', () => ({ })); describe('SetupRealAccountOrGoToDemoModalContent', () => { + const mockDefault = mockStore({}); + + const wrapper = (mock: ReturnType = mockDefault) => { + const Component = ({ children }: { children: JSX.Element }) => ( + {children} + ); + return Component; + }; + beforeEach(() => { jest.clearAllMocks(); }); it('Should render correctly in desktop', () => { - const mock = mockStore({}); - - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - const { container } = render(, { - wrapper, + wrapper: wrapper(), }); const title = screen.getByText(/start your trading journey/i); @@ -42,14 +45,8 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => { }); it('Should render correctly in responsive', () => { - const mock = mockStore({}); - - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - const { container } = render(, { - wrapper, + wrapper: wrapper(), }); const title = screen.getByText(/start your trading journey/i); @@ -77,14 +74,10 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - const mockTrack = Analytics.trackEvent; const { container } = render(, { - wrapper, + wrapper: wrapper(mock), }); const setup_btn = screen.getByRole('button', { @@ -126,14 +119,10 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - const mockTrack = Analytics.trackEvent; const { container } = render(, { - wrapper, + wrapper: wrapper(mock), }); const setup_btn = screen.getByRole('button', { @@ -171,14 +160,10 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => { }, }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - const mockTrack = Analytics.trackEvent; const { container } = render(, { - wrapper, + wrapper: wrapper(mock), }); const demo_btn = screen.getByRole('button', { 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.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.spec.tsx index 20b92a019939..4afb3380862f 100644 --- a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal.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.spec.tsx @@ -1,8 +1,13 @@ import React from 'react'; import SetupRealAccountOrGoToDemoModal from '../setup-real-account-or-go-to-demo-modal'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { Analytics } from '@deriv-com/analytics'; import { StoreProvider, mockStore } from '@deriv/stores'; +import { useDevice } from '@deriv-com/ui'; + +jest.mock('@deriv-com/ui', () => ({ + useDevice: jest.fn(() => ({ isMobile: false })), +})); jest.mock('@deriv-com/analytics', () => ({ ...jest.requireActual('@deriv-com/analytics'), @@ -11,6 +16,12 @@ jest.mock('@deriv-com/analytics', () => ({ }, })); +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + Modal: jest.fn(() =>
desktop modal
), + MobileDialog: jest.fn(() =>
responsive modal
), +})); + jest.mock('../setup-real-account-or-go-to-demo-modal-content', () => ({ __esModule: true, default: () => undefined, @@ -18,30 +29,42 @@ jest.mock('../setup-real-account-or-go-to-demo-modal-content', () => ({ })); describe('SetupRealAccountOrGoToDemoModal', () => { - it('should render correctly', () => { - const mock = mockStore({}); + const mockDefault = mockStore({}); - const wrapper = ({ children }: { children: JSX.Element }) => ( + const wrapper = (mock: ReturnType = mockDefault) => { + const Component = ({ children }: { children: JSX.Element }) => ( {children} ); + return Component; + }; + it('should render correctly in desktop', () => { const { container } = render(, { - wrapper, + wrapper: wrapper(), }); + expect(container).toBeInTheDocument(); + expect(screen.getByText(/desktop modal/i)).toBeInTheDocument(); + }); + + it('should render correctly in responsive', () => { + (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true }); + + const { container } = render(, { + wrapper: wrapper(), + }); + + expect(container).toBeInTheDocument(); + expect(screen.getByText(/responsive modal/i)).toBeInTheDocument(); }); it('Analytics should be called one time if "is_setup_real_account_or_go_to_demo_modal_visible" = true', () => { const mock = mockStore({ traders_hub: { is_setup_real_account_or_go_to_demo_modal_visible: true } }); - const wrapper = ({ children }: { children: JSX.Element }) => ( - {children} - ); - const mockTrack = Analytics.trackEvent; render(, { - wrapper, + wrapper: wrapper(mock), }); expect(mockTrack).toBeCalledTimes(1); diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss index 007cb5f23f9d..b1f1a8a8204b 100644 --- a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss @@ -4,7 +4,7 @@ align-items: center; padding: 2.4rem; - @include mobile { + @include mobile-screen { padding: 1.6rem; width: 100%; } @@ -17,7 +17,7 @@ font-family: 'Ubuntu', sans-serif; margin-block-start: 2.4rem; - @include mobile { + @include mobile-screen { margin-block-start: 1.6rem; } } @@ -29,7 +29,7 @@ margin-block-start: 2.4rem; width: 100%; - @include mobile { + @include mobile-screen { margin-block-start: 4rem; } } diff --git a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx index e47f8e3f21ec..77b34aeadf1b 100644 --- a/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx +++ b/packages/appstore/src/components/modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx @@ -1,11 +1,13 @@ import React, { Fragment, useEffect } from 'react'; import { Analytics } from '@deriv-com/analytics'; +import { useDevice } from '@deriv-com/ui'; import { observer, useStore } from '@deriv/stores'; -import { DesktopWrapper, MobileWrapper, Modal, MobileDialog } from '@deriv/components'; +import { Modal, MobileDialog } from '@deriv/components'; import { SetupRealAccountOrGoToDemoModalContent } from './setup-real-account-or-go-to-demo-modal-content'; import './setup-real-account-or-go-to-demo-modal.scss'; const SetupRealAccountOrGoToDemoModal = observer(() => { + const { isMobile } = useDevice(); const { traders_hub } = useStore(); const { is_setup_real_account_or_go_to_demo_modal_visible } = traders_hub; @@ -23,12 +25,7 @@ const SetupRealAccountOrGoToDemoModal = observer(() => { return ( - - - - - - + {isMobile ? ( { > - + ) : ( + + + + )} ); }); diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx index 3783ffeb94d9..ac330591b46c 100644 --- a/packages/core/src/App/Containers/Modals/app-modals.jsx +++ b/packages/core/src/App/Containers/Modals/app-modals.jsx @@ -97,7 +97,7 @@ const AppModals = observer(() => { mt5_login_list, should_show_effortless_login_modal, } = client; - const { content_flag } = traders_hub; + const { content_flag, is_setup_real_account_or_go_to_demo_modal_visible } = traders_hub; const { is_from_derivgo } = common; const { is_account_needed_modal_on, @@ -156,7 +156,8 @@ const AppModals = observer(() => { !should_show_appropriateness_warning_modal && !should_show_risk_warning_modal && !is_from_signup_account && - !is_real_acc_signup_on; + !is_real_acc_signup_on && + !is_setup_real_account_or_go_to_demo_modal_visible; if (temp_session_signup_params && is_onboarding) { toggleAccountSignupModal(true);