chore: fix failing test cases

deriv-com · Jul 29, 2024 · 97f0ee0 · 97f0ee0
1 parent 03faaf3
commit 97f0ee0
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 32 deletions.
diff --git a/packages/core/src/App/Components/Layout/Header/__tests__/platform-switcher.spec.tsx b/packages/core/src/App/Components/Layout/Header/__tests__/platform-switcher.spec.tsx
@@ -4,9 +4,9 @@ import { render, screen } from '@testing-library/react';
 import PlatformSwitcher from '../platform-switcher';
 import { createBrowserHistory } from 'history';
 
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn(() => true),
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({})),
 }));
 
 const withRouter = <T extends object>(Component: React.ComponentType<T>) => {

diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx
@@ -35,8 +35,16 @@ const wrapper = ({ children }: PropsWithChildren) => (
 );
 
 describe('AccountsList', () => {
+    beforeEach(() => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
+    });
+
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
     it('should render account list in mobile view', () => {
-        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false, isMobile: true });
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
         render(<AccountsList accountsActiveTabIndex={0} onTabClickHandler={jest.fn()} />, {
             wrapper,
         });
@@ -66,7 +74,7 @@ describe('AccountsList', () => {
 
     it('should trigger `onTabClickHandler` with proper tab index when the user switches the tab', () => {
         const onTabClickHandler = jest.fn();
-        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false, isMobile: true });
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
 
         render(<AccountsList accountsActiveTabIndex={0} onTabClickHandler={onTabClickHandler} />, {
             wrapper,

diff --git a/packages/wallets/src/components/Base/WalletClipboard/__tests__/WalletClipboard.spec.tsx b/packages/wallets/src/components/Base/WalletClipboard/__tests__/WalletClipboard.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
+import { useDevice } from '@deriv-com/ui';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import WalletClipboard from '../WalletClipboard';
@@ -10,7 +11,7 @@ jest.mock('usehooks-ts', () => ({
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
-    useDevice: () => ({ isDesktop: true }),
+    useDevice: jest.fn(() => ({})),
 }));
 
 describe('WalletClipboard', () => {
@@ -19,6 +20,7 @@ describe('WalletClipboard', () => {
     const renderComponent = () => render(<WalletClipboard textCopy='Sample text to copy' />);
 
     beforeEach(() => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
         mockCopy = jest.fn();
         mockUseCopyToClipboard.mockReturnValue([null, mockCopy]);
     });

diff --git a/packages/wallets/src/components/WalletListCard/__tests__/WalletListCard.spec.tsx b/packages/wallets/src/components/WalletListCard/__tests__/WalletListCard.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
 import { render, screen } from '@testing-library/react';
-import useDevice from '../../../hooks/useDevice';
 import WalletListCard from '../WalletListCard';
 
 jest.mock('@deriv/api-v2', () => ({
@@ -12,8 +11,10 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
-jest.mock('../../../hooks/useDevice');
-const mockedUseDevice = useDevice as jest.MockedFunction<typeof useDevice>;
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isDesktop: true })),
+}));
 
 jest.mock('../../WalletListCardDetails/WalletListCardDetails', () => ({
     __esModule: true,
@@ -25,10 +26,6 @@ jest.mock('../../WalletCurrencyCard', () => ({
 }));
 
 describe('WalletListCard', () => {
-    beforeEach(() => {
-        mockedUseDevice.mockReturnValue({ isDesktop: true, isMobile: false, isTablet: false });
-    });
-
     afterEach(() => {
         jest.clearAllMocks();
     });

diff --git a/...ges/wallets/src/components/WalletListCardActions/__tests__/WalletListCardActions.spec.tsx b/...ges/wallets/src/components/WalletListCardActions/__tests__/WalletListCardActions.spec.tsx
@@ -2,8 +2,8 @@ import React, { PropsWithChildren } from 'react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { useActiveWalletAccount } from '@deriv/api-v2';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
-import useDevice from '../../../hooks/useDevice';
 import WalletListCardActions from '../WalletListCardActions';
 
 jest.mock('@deriv/api-v2', () => ({
@@ -19,15 +19,17 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
-jest.mock('../../../hooks/useDevice');
-const mockedUseDevice = useDevice as jest.MockedFunction<typeof useDevice>;
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({})),
+}));
 
 const history = createMemoryHistory();
 const wrapper = ({ children }: PropsWithChildren) => <Router history={history}>{children}</Router>;
 
 describe('WalletListCardActions', () => {
     beforeEach(() => {
-        mockedUseDevice.mockReturnValue({ isDesktop: true, isMobile: false, isTablet: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
     });
 
     afterEach(() => {
@@ -94,7 +96,7 @@ describe('WalletListCardActions', () => {
     });
 
     it('should render the actions for mobile', () => {
-        mockedUseDevice.mockReturnValue({ isDesktop: false, isMobile: true, isTablet: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false, isMobile: true });
         const { container } = render(<WalletListCardActions />, {
             wrapper,
         });
@@ -104,7 +106,7 @@ describe('WalletListCardActions', () => {
     });
 
     it('should switch account and redirect to the correct page when clicking on one of the actions and wallet is inactive for mobile', () => {
-        mockedUseDevice.mockReturnValue({ isDesktop: false, isMobile: true, isTablet: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false, isMobile: true });
         render(<WalletListCardActions />, {
             wrapper,
         });
@@ -159,7 +161,7 @@ describe('WalletListCardActions', () => {
                 loginid: 'CRW123456',
             },
         });
-        mockedUseDevice.mockReturnValue({ isDesktop: false, isMobile: true, isTablet: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false, isMobile: true });
 
         render(<WalletListCardActions accountsActiveTabIndex={1} />, {
             wrapper,
@@ -184,7 +186,7 @@ describe('WalletListCardActions', () => {
                 loginid: 'VRW123456',
             },
         });
-        mockedUseDevice.mockReturnValue({ isDesktop: false, isMobile: true, isTablet: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false, isMobile: true });
 
         render(<WalletListCardActions accountsActiveTabIndex={1} />, {
             wrapper,

diff --git a/...es/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx b/...es/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
-import useDevice from '../../../../../../../hooks/useDevice';
 import TransferFormAccountCard from '../TransferFormAccountCard';
 
-jest.mock('../../../../../../../hooks/useDevice', () => jest.fn());
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({})),
+}));
 
 describe('TransferFormAccountCard', () => {
     const mockAccount = {
@@ -15,7 +18,7 @@ describe('TransferFormAccountCard', () => {
     };
 
     beforeEach(() => {
-        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
     });
 
     afterEach(() => {

diff --git a/...r/components/TransferFormAccountSelection/__tests__/TransferFormAccountSelection.spec.tsx b/...r/components/TransferFormAccountSelection/__tests__/TransferFormAccountSelection.spec.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
+import { useDevice } from '@deriv-com/ui';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useModal } from '../../../../../../../components/ModalProvider';
-import useDevice from '../../../../../../../hooks/useDevice';
 import TransferFormAccountSelection from '../TransferFormAccountSelection';
 
 jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
     Divider: jest.fn(() => <div data-testid='wallets-divider' />),
+    useDevice: jest.fn(() => ({})),
 }));
 
-jest.mock('../../../../../../../hooks/useDevice', () => jest.fn());
-
 jest.mock('../../../../../../../components/ModalProvider', () => ({
     useModal: jest.fn(),
 }));
@@ -33,7 +33,7 @@ describe('TransferFormAccountSelection', () => {
     };
 
     beforeEach(() => {
-        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
         (useModal as jest.Mock).mockReturnValue({ hide: mockModalHide });
     });
 

diff --git a/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx b/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx
@@ -1,11 +1,14 @@
 import React, { PropsWithChildren } from 'react';
 import { APIProvider, AuthProvider } from '@deriv/api-v2';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import { ModalProvider } from '../../../components/ModalProvider';
-import useDevice from '../../../hooks/useDevice';
 import WalletsListingRoute from '../WalletsListingRoute';
 
-jest.mock('../../../hooks/useDevice', () => jest.fn());
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({})),
+}));
 
 jest.mock('../../../components', () => ({
     ...jest.requireActual('../../../components'),
@@ -29,9 +32,15 @@ const wrapper = ({ children }: PropsWithChildren) => (
 );
 
 describe('WalletsListingRoute', () => {
-    it('renders DesktopWalletsList, WalletsAddMoreCarousel and WalletTourGuide correctly on desktop', async () => {
-        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+    beforeEach(() => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
+    });
 
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders DesktopWalletsList, WalletsAddMoreCarousel and WalletTourGuide correctly on desktop', async () => {
         render(<WalletsListingRoute />, { wrapper });
         expect(screen.getByText('WalletListHeader')).toBeInTheDocument();
         expect(screen.queryByText('WalletsCarousel')).not.toBeInTheDocument();