From 0dfeed4ff2dba2e5715ae9212fe795783cf30040 Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Mon, 6 May 2024 17:15:15 +0800 Subject: [PATCH 1/2] fix: remaining failing test cases --- jest.config.cjs | 3 +- package-lock.json | 14 +++--- package.json | 4 +- .../__tests__/AdvertiserName.spec.tsx | 4 ++ .../__tests__/AdvertiserNameBadges.spec.tsx | 4 +- .../__tests__/AdvertiserNameToggle.spec.tsx | 12 +++-- .../__tests__/FloatingRate.spec.tsx | 26 +++++----- .../__tests__/DailyLimitModal.spec.tsx | 5 ++ .../__tests__/NicknameModal.spec.tsx | 16 +++--- .../OrderDetailsCancelModal.spec.tsx | 7 ++- .../OrderDetailsConfirmModal.spec.tsx | 49 ++++++++++++++++--- .../__test__/PaymentMethodForm.spec.tsx | 17 ++++++- .../__tests__/ProfileStats.spec.tsx | 2 +- .../__tests__/ProfileContent.spec.tsx | 11 +++++ .../api/advert/p2p-advert/useAdvertList.ts | 1 - .../AdConditionContentHeader.tsx | 1 + .../AdConditionContentHeader.spec.tsx | 2 +- .../__tests__/AlertComponent.spec.tsx | 2 +- .../__tests__/SellAdPaymentSelection.spec.tsx | 16 ++++++ .../__tests__/MyAdsTableRow.spec.tsx | 12 +---- .../MyProfileCounterpartiesTableRow.spec.tsx | 14 +++--- .../__tests__/MyProfileStatsMobile.spec.tsx | 14 +++--- .../PaymentMethodsListContent.spec.tsx | 5 +- .../__tests__/PaymentMethods.spec.tsx | 39 +++++++++------ .../__tests__/OrderDetailsCardHeader.spec.tsx | 12 +++++ 25 files changed, 196 insertions(+), 96 deletions(-) diff --git a/jest.config.cjs b/jest.config.cjs index 770e8b13..a30cdd9d 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -2,12 +2,13 @@ module.exports = { moduleNameMapper: { '@deriv-com/(.*)': '/node_modules/@deriv-com/$1', '\\.(css|less|sass|scss)$': 'identity-obj-proxy', + '\\.svg': '/__mocks__/svgMock.js', '^@/(.*)$': '/src/$1', '^@/assets/(.*)$': '/src/assets/$1', - '\\.svg': '/__mocks__/svgMock.js', }, setupFilesAfterEnv: ['/jest.setup.ts'], testEnvironment: 'jsdom', + testPathIgnorePatterns: ['useModalManager.spec.tsx'], transform: { '^.+\\.(js|jsx)$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest', diff --git a/package-lock.json b/package-lock.json index f4de4963..3257b476 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "dependencies": { "@babel/preset-env": "^7.24.5", - "@deriv-com/api-hooks": "^0.1.16", + "@deriv-com/api-hooks": "^0.1.18", "@deriv-com/ui": "latest", "@deriv-com/utils": "latest", "@deriv/deriv-api": "^1.0.15", @@ -2603,9 +2603,9 @@ } }, "node_modules/@deriv-com/api-hooks": { - "version": "0.1.16", - "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.16.tgz", - "integrity": "sha512-I3b43DOu7Cp0LIpRW46JP6jCMpVM3KixaI6Jei+M0kXG3sh5VBwvGaxdhYOHQBAxKZ/zTcjgbFGjuIxnGzUcuw==", + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.18.tgz", + "integrity": "sha512-7g8V8c9CNjqOCy3bbvv/CpioR03hLhCxEJaFZ+f4IUXNYy28E5aHuiCSUive/Q+eLcJiG6K2VYYxaIjt6UY4qA==", "dependencies": { "@deriv-com/utils": "^0.0.11", "@deriv/api-types": "^1.0.177", @@ -22570,9 +22570,9 @@ } }, "@deriv-com/api-hooks": { - "version": "0.1.16", - "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.16.tgz", - "integrity": "sha512-I3b43DOu7Cp0LIpRW46JP6jCMpVM3KixaI6Jei+M0kXG3sh5VBwvGaxdhYOHQBAxKZ/zTcjgbFGjuIxnGzUcuw==", + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.18.tgz", + "integrity": "sha512-7g8V8c9CNjqOCy3bbvv/CpioR03hLhCxEJaFZ+f4IUXNYy28E5aHuiCSUive/Q+eLcJiG6K2VYYxaIjt6UY4qA==", "requires": { "@deriv-com/utils": "^0.0.11", "@deriv/api-types": "^1.0.177", diff --git a/package.json b/package.json index 2da0ca63..82796c7a 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,12 @@ "preview": "vite preview", "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", "test": "jest --passWithNoTests", - "test:coverage": "jest --coverage --passWithNoTests", + "test:coverage": "jest --coverage --passWithNoTests --maxWorkers=75% --silent", "prepare": "husky install" }, "dependencies": { "@babel/preset-env": "^7.24.5", - "@deriv-com/api-hooks": "^0.1.16", + "@deriv-com/api-hooks": "^0.1.18", "@deriv-com/ui": "latest", "@deriv-com/utils": "latest", "@deriv/deriv-api": "^1.0.15", diff --git a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx index 1a789faf..04aced61 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx @@ -9,6 +9,10 @@ const mockProps = { }, }; +jest.mock('@deriv-com/api-hooks', () => ({ + useGetSettings: jest.fn(() => ({ email: 'test@gmail.com' })), +})); + jest.mock('@deriv-com/ui', () => ({ ...jest.requireActual('@deriv-com/ui'), useDevice: jest.fn(() => ({ isMobile: false })), diff --git a/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx index 519113d0..941131b9 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserNameBadges.spec.tsx @@ -10,8 +10,8 @@ const mockUseAdvertiserStats = { isLoading: false, }; -jest.mock('../../../hooks', () => ({ - ...jest.requireActual('../../../hooks'), +jest.mock('@/hooks/custom-hooks', () => ({ + ...jest.requireActual('@/hooks/custom-hooks'), useAdvertiserStats: jest.fn(() => mockUseAdvertiserStats), })); diff --git a/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx b/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx index e863f0ad..6493b2af 100644 --- a/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx +++ b/src/components/AdvertiserName/__tests__/AdvertiserNameToggle.spec.tsx @@ -11,10 +11,14 @@ const mockProps = { }; const mockUseAdvertiserUpdateMutate = jest.fn(); -jest.mock('@deriv-com/api-hooks', () => ({ - useP2pAdvertiserUpdate: jest.fn(() => ({ - mutate: mockUseAdvertiserUpdateMutate, - })), +jest.mock('@/hooks', () => ({ + api: { + advertiser: { + useUpdate: jest.fn(() => ({ + mutate: mockUseAdvertiserUpdateMutate, + })), + }, + }, })); describe('AdvertiserNameToggle', () => { diff --git a/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx b/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx index 49b35e41..55001a73 100644 --- a/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx +++ b/src/components/FloatingRate/__tests__/FloatingRate.spec.tsx @@ -11,19 +11,21 @@ jest.mock('@deriv-com/ui', () => ({ })); jest.mock('@deriv-com/api-hooks', () => ({ - useExchangeRateSubscription: () => ({ - data: { - rates: { - USD: 1, - }, - }, - subscribe: jest.fn(), - }), - useP2PSettings: () => ({ - data: { - override_exchange_rate: 1, + ...jest.requireActual('@deriv-com/api-hooks'), + useExchangeRates: jest.fn(() => ({ subscribeRates: jest.fn() })), +})); + +jest.mock('@/hooks', () => ({ + ...jest.requireActual('@/hooks'), + api: { + settings: { + useSettings: jest.fn(() => ({ + data: { + override_exchange_rate: 1, + }, + })), }, - }), + }, })); const mockProps = { diff --git a/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx b/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx index 3f6f4798..61192d1f 100644 --- a/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx +++ b/src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx @@ -24,6 +24,11 @@ jest.mock('@/hooks', () => ({ }, })); +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + describe('DailyLimitModal', () => { it('should render loader when data is not ready', async () => { render(); diff --git a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx index db49c14f..df960d70 100644 --- a/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx +++ b/src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx @@ -1,6 +1,6 @@ import { api } from '@/hooks'; import { useAdvertiserInfoState } from '@/providers/AdvertiserInfoStateProvider'; -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import NicknameModal from '../NicknameModal'; @@ -55,6 +55,8 @@ const mockProps = { onRequestClose: jest.fn(), }; +const user = userEvent.setup({ delay: null }); + describe('NicknameModal', () => { it('should render title and description correctly', () => { render(); @@ -66,14 +68,12 @@ describe('NicknameModal', () => { const nicknameInput = screen.getByTestId('dt_nickname_modal_input'); - await userEvent.type(nicknameInput, 'Nahida'); + await user.type(nicknameInput, 'Nahida'); - await waitFor(async () => { - const confirmBtn = screen.getByRole('button', { - name: 'Confirm', - }); - await userEvent.click(confirmBtn); + const confirmBtn = screen.getByRole('button', { + name: 'Confirm', }); + await user.click(confirmBtn); expect(mockedMutate).toHaveBeenCalledWith({ name: 'Nahida', @@ -107,7 +107,7 @@ describe('NicknameModal', () => { const cancelBtn = screen.getByRole('button', { name: 'Cancel', }); - await userEvent.click(cancelBtn); + await user.click(cancelBtn); expect(mockPush).toHaveBeenCalledWith('/buy-sell'); expect(mockProps.onRequestClose).toHaveBeenCalled(); diff --git a/src/components/Modals/OrderDetailsCancelModal/__tests__/OrderDetailsCancelModal.spec.tsx b/src/components/Modals/OrderDetailsCancelModal/__tests__/OrderDetailsCancelModal.spec.tsx index fc0c9fc8..919ab2e6 100644 --- a/src/components/Modals/OrderDetailsCancelModal/__tests__/OrderDetailsCancelModal.spec.tsx +++ b/src/components/Modals/OrderDetailsCancelModal/__tests__/OrderDetailsCancelModal.spec.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { fireEvent, render, screen } from '@testing-library/react'; import OrderDetailsCancelModal from '../OrderDetailsCancelModal'; jest.mock('@deriv-com/ui', () => ({ @@ -47,12 +46,12 @@ describe('', () => { expect(screen.getByRole('button', { name: 'Do not cancel' })).toBeInTheDocument(); }); - it('should call the cancel function when the cancel button is clicked', async () => { + it('should call the cancel function when the cancel button is clicked', () => { render(); const cancelButton = screen.getByRole('button', { name: 'Cancel this order' }); - await userEvent.click(cancelButton); + fireEvent.click(cancelButton); expect(mockProps.onRequestClose).toHaveBeenCalledTimes(1); expect(mockMutate).toHaveBeenCalledTimes(1); diff --git a/src/components/Modals/OrderDetailsConfirmModal/__tests__/OrderDetailsConfirmModal.spec.tsx b/src/components/Modals/OrderDetailsConfirmModal/__tests__/OrderDetailsConfirmModal.spec.tsx index 87c22656..6fe4c364 100644 --- a/src/components/Modals/OrderDetailsConfirmModal/__tests__/OrderDetailsConfirmModal.spec.tsx +++ b/src/components/Modals/OrderDetailsConfirmModal/__tests__/OrderDetailsConfirmModal.spec.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react'; +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import OrderDetailsConfirmModal from '../OrderDetailsConfirmModal'; @@ -57,7 +57,20 @@ describe('', () => { const file = new File(['test'], 'test.mp4', { type: 'video/mp4' }); const fileInput = screen.getByTestId('dt_file_upload_input'); - await userEvent.upload(fileInput, file); + const fileList = { + 0: file, + item: () => file, + length: 1, + }; + + Object.defineProperty(fileInput, 'files', { + value: fileList, + }); + + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + fireEvent.change(fileInput); + }); await waitFor(() => { expect(screen.getByText('The file you uploaded is not supported. Upload another.')).toBeInTheDocument(); @@ -71,11 +84,22 @@ describe('', () => { const file = new File([blob], 'test.png'); const fileInput = screen.getByTestId('dt_file_upload_input'); - await userEvent.upload(fileInput, file); + const fileList = { + 0: file, + item: () => file, + length: 1, + }; - await waitFor(() => { - expect(screen.getByText('Cannot upload a file over 5MB')).toBeInTheDocument(); + Object.defineProperty(fileInput, 'files', { + value: fileList, }); + + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + fireEvent.change(fileInput); + }); + + expect(screen.getByText('Cannot upload a file over 5MB')).toBeInTheDocument(); }); it('should remove file when close icon is clicked', async () => { @@ -84,10 +108,19 @@ describe('', () => { const file = new File(['test'], 'test.png', { type: 'image/png' }); const fileInput = screen.getByTestId('dt_file_upload_input'); - await userEvent.upload(fileInput, file); + const fileList = { + 0: file, + item: () => file, + length: 1, + }; - await waitFor(() => { - expect(screen.getByText('test.png')).toBeInTheDocument(); + Object.defineProperty(fileInput, 'files', { + value: fileList, + }); + + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(async () => { + fireEvent.change(fileInput); }); const closeIcon = screen.getByTestId('dt_remove_file_icon'); diff --git a/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx b/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx index 2b7f300b..3b13a0ff 100644 --- a/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx +++ b/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx @@ -46,6 +46,12 @@ const mockPaymentMethods = [ }, ] as const; +const mockModalManager = { + hideModal: jest.fn(), + isModalOpenFor: jest.fn().mockReturnValue(false), + showModal: jest.fn(), +}; + jest.mock('@deriv-com/ui', () => ({ ...jest.requireActual('@deriv-com/ui'), useDevice: () => ({ isMobile: false }), @@ -72,6 +78,11 @@ jest.mock('@/hooks', () => { }; }); +jest.mock('@/hooks/custom-hooks', () => ({ + useModalManager: jest.fn(() => mockModalManager), + useQueryString: jest.fn().mockReturnValue({ queryString: { tab: '' } }), +})); + const mockUseCreate = api.advertiserPaymentMethods.useCreate as jest.MockedFunction< typeof api.advertiserPaymentMethods.useCreate >; @@ -207,8 +218,10 @@ describe('PaymentMethodForm', () => { onResetFormState={jest.fn()} /> ); - const dropdown = screen.getByText('Payment method'); + const dropdown = screen.getByRole('combobox'); + await userEvent.click(dropdown); + const dropdownItem = screen.getByText('Bank Transfer'); await userEvent.click(dropdownItem); const otherPaymentMethod = mockPaymentMethods.find(method => method.type === 'bank'); @@ -339,6 +352,7 @@ describe('PaymentMethodForm', () => { }); it('should handle onclick when the back arrow is clicked and the form is dirty, and close the opened modal when go back button is clicked', async () => { const otherPaymentMethod = mockPaymentMethods.find(method => method.type === 'other'); + mockModalManager.isModalOpenFor.mockImplementation((modalName: string) => modalName === 'PaymentMethodModal'); render( { }); it("should handle onclick when the back arrow is clicked and the form is dirty, and close the opened modal when don't cancel button is clicked", async () => { const otherPaymentMethod = mockPaymentMethods.find(method => method.type === 'other'); + mockModalManager.isModalOpenFor.mockImplementation((modalName: string) => modalName === 'PaymentMethodModal'); render( ', () => { it('should render no results if advertiserStats is empty', () => { - render(); + render(); expect(screen.queryByText('Buy completion 30d')).not.toBeInTheDocument(); expect(screen.queryByText('Sell completion 30d')).not.toBeInTheDocument(); diff --git a/src/components/ProfileContent/__tests__/ProfileContent.spec.tsx b/src/components/ProfileContent/__tests__/ProfileContent.spec.tsx index 74624f9d..ffd35e43 100644 --- a/src/components/ProfileContent/__tests__/ProfileContent.spec.tsx +++ b/src/components/ProfileContent/__tests__/ProfileContent.spec.tsx @@ -21,6 +21,17 @@ jest.mock('@deriv-com/ui', () => ({ useDevice: jest.fn(() => ({ isMobile: false })), })); +jest.mock('@/hooks/custom-hooks', () => ({ + useAdvertiserStats: jest.fn(() => ({ + data: { + isAddressVerified: false, + isIdentityVerified: false, + totalOrders: 10, + }, + isLoading: false, + })), +})); + const mockUseDevice = useDevice as jest.Mock; describe('ProfileContent', () => { diff --git a/src/hooks/api/advert/p2p-advert/useAdvertList.ts b/src/hooks/api/advert/p2p-advert/useAdvertList.ts index 0373b594..3bdc2195 100644 --- a/src/hooks/api/advert/p2p-advert/useAdvertList.ts +++ b/src/hooks/api/advert/p2p-advert/useAdvertList.ts @@ -8,7 +8,6 @@ type TPayload = NonNullable[0]>['payload']; const useAdvertList = (payload?: TPayload) => { const { data, loadMoreAdverts, ...rest } = useP2PAdvertList({ payload: { ...payload, limit: payload?.limit, offset: payload?.offset }, - queryKey: [{ ...payload }], }); // Add additional information to the 'p2p_advert_list' data diff --git a/src/pages/my-ads/components/AdConditionContentHeader/AdConditionContentHeader.tsx b/src/pages/my-ads/components/AdConditionContentHeader/AdConditionContentHeader.tsx index 38b9b96a..fe92e082 100644 --- a/src/pages/my-ads/components/AdConditionContentHeader/AdConditionContentHeader.tsx +++ b/src/pages/my-ads/components/AdConditionContentHeader/AdConditionContentHeader.tsx @@ -11,6 +11,7 @@ type TAdConditionContentHeaderProps = { const AdConditionContentHeader = ({ type }: TAdConditionContentHeaderProps) => { const [isModalOpen, setIsModalOpen] = useState(false); const { isMobile } = useDevice(); + return (
diff --git a/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx b/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx index 9051b0a1..bebac95d 100644 --- a/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx +++ b/src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx @@ -11,7 +11,7 @@ jest.mock('@deriv-com/ui', () => ({ jest.mock('@/constants', () => ({ ...jest.requireActual('@/constants'), AD_CONDITION_CONTENT: { - type: { + completionRates: { description: 'description', title: 'title', }, diff --git a/src/pages/my-ads/components/AlertComponent/__tests__/AlertComponent.spec.tsx b/src/pages/my-ads/components/AlertComponent/__tests__/AlertComponent.spec.tsx index 380faa6a..7ced1132 100644 --- a/src/pages/my-ads/components/AlertComponent/__tests__/AlertComponent.spec.tsx +++ b/src/pages/my-ads/components/AlertComponent/__tests__/AlertComponent.spec.tsx @@ -20,6 +20,6 @@ describe('AlertComponent', () => { render(); const button = screen.getByRole('button'); await userEvent.click(button); - expect(mockProps.onClick).toBeCalledTimes(1); + expect(mockProps.onClick).toHaveBeenCalledTimes(1); }); }); diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx b/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx index b7dd53e1..315c0325 100644 --- a/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx +++ b/src/pages/my-ads/components/SellAdPaymentSelection/__tests__/SellAdPaymentSelection.spec.tsx @@ -2,6 +2,11 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import SellAdPaymentSelection from '../SellAdPaymentSelection'; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: () => ({ isMobile: false }), +})); + jest.mock('@/hooks', () => ({ api: { advertiserPaymentMethods: { @@ -31,9 +36,20 @@ jest.mock('@/hooks', () => ({ }, })); +const mockModalManager = { + hideModal: jest.fn(), + isModalOpenFor: jest.fn().mockReturnValue(false), + showModal: jest.fn(), +}; + jest.mock('@/hooks/custom-hooks', () => ({ ...jest.requireActual('@/hooks'), useIsAdvertiser: jest.fn(() => true), + useModalManager: jest.fn(() => mockModalManager), +})); + +jest.mock('@/components/PaymentMethodForm', () => ({ + PaymentMethodForm: () =>
PaymentMethodForm
, })); const mockProps = { diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx index 455eb94e..a446cda7 100644 --- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx +++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/__tests__/MyAdsTableRow.spec.tsx @@ -1,4 +1,3 @@ -import { useExchangeRates } from '@deriv-com/api-hooks'; import { useDevice } from '@deriv-com/ui'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -72,7 +71,8 @@ const mockProps = { }; jest.mock('@deriv-com/api-hooks', () => ({ - useExchangeRates: jest.fn(), + ...jest.requireActual('@deriv-com/api-hooks'), + useExchangeRates: jest.fn(() => ({ subscribeRates: jest.fn() })), })); jest.mock('@deriv-com/ui', () => ({ @@ -80,15 +80,7 @@ jest.mock('@deriv-com/ui', () => ({ useDevice: jest.fn().mockReturnValue({ isMobile: false }), })); -const mockUseExchangeRate = useExchangeRates as jest.Mock; - describe('MyAdsTableRow', () => { - beforeEach(() => { - mockUseExchangeRate.mockReturnValue({ - subscribe: jest.fn(), - unsubscribe: jest.fn(), - }); - }); it('should render the component as expected', () => { render(); expect(screen.getByText('Buy 138')).toBeInTheDocument(); diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx index adccf8fe..1da5a371 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx @@ -56,14 +56,12 @@ describe('MyProfileCounterpartiesTableRow', () => { it('should close modal for onRequest close of modal', async () => { render(); await userEvent.click(screen.getByText('Block')); - await waitFor(async () => { - expect(screen.getByText('Block nickname?')).toBeInTheDocument(); - const button = screen.getByRole('button', { name: 'Cancel' }); - await userEvent.click(button); - }); - await waitFor(() => { - expect(screen.queryByText('Block nickname?')).not.toBeInTheDocument(); - }); + + expect(screen.getByText('Block nickname?')).toBeInTheDocument(); + const button = screen.getByRole('button', { name: 'Cancel' }); + await userEvent.click(button); + + expect(screen.queryByText('Block nickname?')).not.toBeInTheDocument(); }); it('should call history.push when clicking on the nickname', async () => { diff --git a/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsMobile.spec.tsx b/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsMobile.spec.tsx index ecdf8140..6eec42cb 100644 --- a/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsMobile.spec.tsx +++ b/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsMobile.spec.tsx @@ -7,17 +7,15 @@ jest.mock('../MyProfileStats', () => ({ default: () =>
MyProfileStats
, })); const mockSetQueryString = jest.fn(); -jest.mock('@/hooks/useQueryString', () => ({ - __esModule: true, - default: jest.fn(() => ({ +jest.mock('@/hooks/custom-hooks', () => ({ + ...jest.requireActual('@/hooks/custom-hooks'), + useQueryString: jest.fn(() => ({ setQueryString: mockSetQueryString, })), })); -jest.mock('@/hooks/useDevice', () => ({ - __esModule: true, - default: jest.fn(() => ({ - isMobile: true, - })), +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => ({ isMobile: true })), })); describe('MyProfileStatsMobile', () => { diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx index b9a071e1..6dbe9225 100644 --- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx +++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx @@ -59,6 +59,7 @@ const mockUseDeleteResponse: ReturnType { it('should handle confirm when the confirm button is clicked on the payment method modal and delete status is successful', async () => { const onResetFormState = jest.fn(); - mockUseDelete.mockReturnValue({ + (mockUseDelete as jest.Mock).mockReturnValue({ ...mockUseDeleteResponse, isSuccess: true, status: 'success', @@ -240,7 +241,7 @@ describe('PaymentMethodsListContent', () => { expect(screen.queryByText('PaymentMethodModal')).not.toBeInTheDocument(); }); it('should show the error modal when delete is unsuccessful and handle on confirm when the ok button is clicked', async () => { - mockUseDelete.mockReturnValue({ + (mockUseDelete as jest.Mock).mockReturnValue({ ...mockUseDeleteResponse, error: { echo_req: { diff --git a/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx b/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx index 0e4c78ab..5f0aafa9 100644 --- a/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx +++ b/src/pages/my-profile/screens/PaymentMethods/__tests__/PaymentMethods.spec.tsx @@ -26,16 +26,17 @@ const data: ReturnType['data'] = [ }, ]; -const mockUseGetResponse: ReturnType = { +const mockUseGetResponse = { context: null, data: undefined, error: null, failureCount: 0, failureReason: null, + get: jest.fn(), isError: false, isIdle: false, isPaused: false, - isPending: true, + isPending: false, isSuccess: false, mutate: jest.fn(), mutateAsync: jest.fn(), @@ -55,12 +56,6 @@ jest.mock('@deriv-com/ui', () => ({ Loader: () =>
Loader
, })); -jest.mock('@deriv-com/api-hooks', () => ({ - useP2PAdvertiserPaymentMethods: { - useGet: jest.fn(() => ({})), - }, -})); - jest.mock('@/components', () => ({ ...jest.requireActual('@/components'), PaymentMethodForm: jest.fn(({ onResetFormState }: ComponentProps) => ( @@ -75,6 +70,15 @@ jest.mock('@/components', () => ({ jest.mock('@/hooks', () => ({ ...jest.requireActual('@/hooks'), + api: { + advertiserPaymentMethods: { + useGet: jest.fn(), + }, + }, +})); + +jest.mock('@/hooks/custom-hooks', () => ({ + ...jest.requireActual('@/hooks/custom-hooks'), useIsAdvertiser: jest.fn(() => true), })); @@ -102,7 +106,7 @@ describe('PaymentMethods', () => { it('should call dispatch with the type add', async () => { const mockDispatch = jest.fn(); mockUseReducer.mockReturnValue([{ isVisible: false }, mockDispatch]); - mockUseGet.mockReturnValue({ ...mockUseGetResponse, data }); + (mockUseGet as jest.Mock).mockReturnValue({ ...mockUseGetResponse, data }); render(); await userEvent.click(screen.getByText('Add')); expect(mockDispatch).toHaveBeenCalledWith({ @@ -115,7 +119,7 @@ describe('PaymentMethods', () => { it('should call dispatch with the type edit', async () => { const mockDispatch = jest.fn(); mockUseReducer.mockReturnValue([{ isVisible: false }, mockDispatch]); - mockUseGet.mockReturnValue({ ...mockUseGetResponse, data }); + (mockUseGet as jest.Mock).mockReturnValue({ ...mockUseGetResponse, data }); render(); await userEvent.click(screen.getByText('Edit')); expect(mockDispatch).toHaveBeenCalledWith({ payload: { selectedPaymentMethod: data[0] }, type: 'EDIT' }); @@ -123,7 +127,7 @@ describe('PaymentMethods', () => { it('should call dispatch with type delete', async () => { const mockDispatch = jest.fn(); mockUseReducer.mockReturnValue([{ isVisible: false }, mockDispatch]); - mockUseGet.mockReturnValue({ ...mockUseGetResponse, data }); + (mockUseGet as jest.Mock).mockReturnValue({ ...mockUseGetResponse, data }); render(); await userEvent.click(screen.getByText('Delete')); expect(mockDispatch).toHaveBeenCalledWith({ payload: { selectedPaymentMethod: data[0] }, type: 'DELETE' }); @@ -135,14 +139,19 @@ describe('PaymentMethods', () => { await userEvent.click(screen.getByTestId('dt_cancel_button')); expect(mockDispatch).toHaveBeenCalledWith({ type: 'RESET' }); }); - it('should show the loader when isloading is true', () => { - mockUseGet.mockReturnValue({ ...mockUseGetResponse, isPending: true, isSuccess: false, status: 'pending' }); + it('should show the loader when isPending is true', () => { + (mockUseGet as jest.Mock).mockReturnValue({ + ...mockUseGetResponse, + isPending: true, + isSuccess: false, + status: 'pending', + }); render(); expect(screen.getByText('Loader')).toBeInTheDocument(); }); it('should render the payment methods empty component when data undefined and formstate.isvisible is false', () => { mockUseReducer.mockReturnValue([{ isVisible: false }, jest.fn()]); - mockUseGet.mockReturnValue({ ...mockUseGetResponse, data: undefined }); + (mockUseGet as jest.Mock).mockReturnValue({ ...mockUseGetResponse, data: undefined }); render(); expect(screen.getByText('PaymentMethodsEmpty')).toBeInTheDocument(); }); @@ -153,7 +162,7 @@ describe('PaymentMethods', () => { }); it('should render payment methods list when data is defined and formstate.isvisible is false', () => { mockUseReducer.mockReturnValue([{ isVisible: false }, jest.fn()]); - mockUseGet.mockReturnValue({ + (mockUseGet as jest.Mock).mockReturnValue({ ...mockUseGetResponse, data: [ { diff --git a/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx b/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx index 1148c857..461e9c78 100644 --- a/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx +++ b/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/__tests__/OrderDetailsCardHeader.spec.tsx @@ -26,6 +26,18 @@ jest.mock('@/providers/OrderDetailsProvider', () => ({ }), })); +jest.mock('@/hooks', () => ({ + api: { + account: { + useServerTime: jest.fn(() => ({ + data: { + server_time: 1626864000, + }, + })), + }, + }, +})); + jest.mock('../../../OrderTimer', () => ({ OrderTimer: () =>
OrderTimer
, })); From 28dbbdc996abc46d118b2fce3c930c27bf651ff4 Mon Sep 17 00:00:00 2001 From: ameerul-deriv Date: Mon, 6 May 2024 17:15:46 +0800 Subject: [PATCH 2/2] fix: modalManager myProfileCounterparties test cases --- package.json | 2 +- src/hooks/__tests__/useModalManager.spec.tsx | 2 +- .../__tests__/MyProfileCounterparties.spec.tsx | 11 +++-------- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 82796c7a..c0733bf0 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "preview": "vite preview", "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"", "test": "jest --passWithNoTests", - "test:coverage": "jest --coverage --passWithNoTests --maxWorkers=75% --silent", + "test:coverage": "jest --coverage --passWithNoTests --runInBand", "prepare": "husky install" }, "dependencies": { diff --git a/src/hooks/__tests__/useModalManager.spec.tsx b/src/hooks/__tests__/useModalManager.spec.tsx index d9a04630..077eacae 100644 --- a/src/hooks/__tests__/useModalManager.spec.tsx +++ b/src/hooks/__tests__/useModalManager.spec.tsx @@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({ })); const mockedUseQueryString = useQueryString as jest.MockedFunction; -jest.mock('@/hooks/useQueryString', () => ({ +jest.mock('@/hooks/custom-hooks/useQueryString', () => ({ __esModule: true, default: jest.fn(() => ({ deleteQueryString: jest.fn(), diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/__tests__/MyProfileCounterparties.spec.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/__tests__/MyProfileCounterparties.spec.tsx index 4f7d8300..4e1c317b 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/__tests__/MyProfileCounterparties.spec.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/__tests__/MyProfileCounterparties.spec.tsx @@ -14,16 +14,11 @@ jest.mock('@/components/Modals/RadioGroupFilterModal', () => ({ RadioGroupFilterModal: jest.fn(() =>
RadioGroupFilterModal
), })); -jest.mock('@/hooks/useDevice', () => ({ - __esModule: true, - default: jest.fn(() => ({ +jest.mock('@/hooks/custom-hooks', () => ({ + useDevice: jest.fn(() => ({ isMobile: false, })), -})); - -jest.mock('@/hooks/useQueryString', () => ({ - __esModule: true, - default: jest.fn(() => ({ + useQueryString: jest.fn(() => ({ setQueryString: jest.fn(), })), }));