feat: modify tests, add check for passkey modal, modify modal for tab…

…let view
binary-com · Jun 27, 2024 · eab7a54 · eab7a54
1 parent 886ad9c
commit eab7a54
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 75 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
@@ -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<typeof mockStore> = mockDefault) => {
+        const Component = ({ children }: { children: JSX.Element }) => (
             <StoreProvider store={mock}>{children}</StoreProvider>
         );
+        return Component;
+    };
 
+    it('should render correctly', () => {
         const { container } = render(<AfterSignupFlow />, {
-            wrapper,
+            wrapper: wrapper(),
         });
         expect(container).toBeInTheDocument();
     });
@@ -46,12 +49,8 @@ describe('AfterSignupFlow', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         render(<AfterSignupFlow />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         expect(mockedOpenRealAccountSignup).not.toBeCalled();
@@ -82,12 +81,8 @@ describe('AfterSignupFlow', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         render(<AfterSignupFlow />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         expect(mockedOpenRealAccountSignup).toBeCalled();
@@ -118,12 +113,8 @@ describe('AfterSignupFlow', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         render(<AfterSignupFlow />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         expect(mockedOpenRealAccountSignup).toBeCalled();
@@ -154,12 +145,8 @@ describe('AfterSignupFlow', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         render(<AfterSignupFlow />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         expect(mockedOpenRealAccountSignup).not.toBeCalled();

diff --git a/...unt-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal-content.spec.tsx b/...unt-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<typeof mockStore> = mockDefault) => {
+        const Component = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        return Component;
+    };
+
     beforeEach(() => {
         jest.clearAllMocks();
     });
 
     it('Should render correctly in desktop', () => {
-        const mock = mockStore({});
-
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         const { container } = render(<SetupRealAccountOrGoToDemoModalContent />, {
-            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 }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         const { container } = render(<SetupRealAccountOrGoToDemoModalContent is_responsive />, {
-            wrapper,
+            wrapper: wrapper(),
         });
 
         const title = screen.getByText(/start your trading journey/i);
@@ -77,14 +74,10 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         const mockTrack = Analytics.trackEvent;
 
         const { container } = render(<SetupRealAccountOrGoToDemoModalContent />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         const setup_btn = screen.getByRole('button', {
@@ -126,14 +119,10 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         const mockTrack = Analytics.trackEvent;
 
         const { container } = render(<SetupRealAccountOrGoToDemoModalContent />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         const setup_btn = screen.getByRole('button', {
@@ -171,14 +160,10 @@ describe('SetupRealAccountOrGoToDemoModalContent', () => {
             },
         });
 
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         const mockTrack = Analytics.trackEvent;
 
         const { container } = render(<SetupRealAccountOrGoToDemoModalContent />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         const demo_btn = screen.getByRole('button', {

diff --git a/...eal-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal.spec.tsx b/...eal-account-or-go-to-demo-modal/__tests__/setup-real-account-or-go-to-demo-modal.spec.tsx
@@ -18,30 +18,29 @@ 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<typeof mockStore> = mockDefault) => {
+        const Component = ({ children }: { children: JSX.Element }) => (
             <StoreProvider store={mock}>{children}</StoreProvider>
         );
+        return Component;
+    };
 
+    it('should render correctly', () => {
         const { container } = render(<SetupRealAccountOrGoToDemoModal />, {
-            wrapper,
+            wrapper: wrapper(),
         });
         expect(container).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 }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
-        );
-
         const mockTrack = Analytics.trackEvent;
 
         render(<SetupRealAccountOrGoToDemoModal />, {
-            wrapper,
+            wrapper: wrapper(mock),
         });
 
         expect(mockTrack).toBeCalledTimes(1);

diff --git a/...modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.scss b/...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/.../modals/setup-real-account-or-go-to-demo-modal/setup-real-account-or-go-to-demo-modal.tsx b/.../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 (
         <Fragment>
-            <DesktopWrapper>
-                <Modal is_open={is_setup_real_account_or_go_to_demo_modal_visible} width='400px' has_close_icon={false}>
-                    <SetupRealAccountOrGoToDemoModalContent />
-                </Modal>
-            </DesktopWrapper>
-            <MobileWrapper>
+            {isMobile ? (
                 <MobileDialog
                     portal_element_id='modal_root'
                     visible={is_setup_real_account_or_go_to_demo_modal_visible}
@@ -39,7 +36,11 @@ const SetupRealAccountOrGoToDemoModal = observer(() => {
                 >
                     <SetupRealAccountOrGoToDemoModalContent is_responsive />
                 </MobileDialog>
-            </MobileWrapper>
+            ) : (
+                <Modal is_open={is_setup_real_account_or_go_to_demo_modal_visible} width='400px' has_close_icon={false}>
+                    <SetupRealAccountOrGoToDemoModalContent />
+                </Modal>
+            )}
         </Fragment>
     );
 });

diff --git 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);