From 97f0ee01d9badd831adee156653a29fef97fd773 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Mon, 29 Jul 2024 14:17:51 +0800 Subject: [PATCH] chore: fix failing test cases --- .../__tests__/platform-switcher.spec.tsx | 6 +++--- .../__tests__/AccountsList.spec.tsx | 12 ++++++++++-- .../__tests__/WalletClipboard.spec.tsx | 4 +++- .../__tests__/WalletListCard.spec.tsx | 11 ++++------- .../__tests__/WalletListCardActions.spec.tsx | 18 ++++++++++-------- .../__tests__/TransferFormAccountCard.spec.tsx | 9 ++++++--- .../TransferFormAccountSelection.spec.tsx | 8 ++++---- .../__tests__/WalletsListingRoute.spec.tsx | 17 +++++++++++++---- 8 files changed, 53 insertions(+), 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 index 9e95a9fef662..47285be26a7b 100644 --- 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 = (Component: React.ComponentType) => { diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx index c56947b51008..e31071f0e637 100644 --- 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(, { 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(, { 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 index d48cf41c1612..ef3c88b3b897 100644 --- 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(); 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 index 188489fcdb92..299216b3e6a9 100644 --- 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; +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/packages/wallets/src/components/WalletListCardActions/__tests__/WalletListCardActions.spec.tsx b/packages/wallets/src/components/WalletListCardActions/__tests__/WalletListCardActions.spec.tsx index 64b99f9a03da..2867a1c1cc2d 100644 --- a/packages/wallets/src/components/WalletListCardActions/__tests__/WalletListCardActions.spec.tsx +++ b/packages/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; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => ({})), +})); const history = createMemoryHistory(); const wrapper = ({ children }: PropsWithChildren) => {children}; 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(, { 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(, { 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(, { 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(, { wrapper, diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx index ea6425b349f1..919d6f01a46a 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/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/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/__tests__/TransferFormAccountSelection.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/__tests__/TransferFormAccountSelection.spec.tsx index 0970124bd11d..748154fec856 100644 --- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountSelection/__tests__/TransferFormAccountSelection.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/Transfer/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(() =>
), + 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 index 12ff868afcb5..d4dd472d70f1 100644 --- 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(, { wrapper }); expect(screen.getByText('WalletListHeader')).toBeInTheDocument(); expect(screen.queryByText('WalletsCarousel')).not.toBeInTheDocument();