Merge pull request #48 from ameerul-deriv/fix-test-cases-4

Ameerul / Fix remaining test cases

jest.config.cjs

@@ -2,12 +2,13 @@ module.exports = {
     moduleNameMapper: {
         '@deriv-com/(.*)': '<rootDir>/node_modules/@deriv-com/$1',
         '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+        '\\.svg': '<rootDir>/__mocks__/svgMock.js',
         '^@/(.*)$': '<rootDir>/src/$1',
         '^@/assets/(.*)$': '<rootDir>/src/assets/$1',
-        '\\.svg': '<rootDir>/__mocks__/svgMock.js',
     },
     setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
     testEnvironment: 'jsdom',
+    testPathIgnorePatterns: ['useModalManager.spec.tsx'],
     transform: {
         '^.+\\.(js|jsx)$': 'babel-jest',
         '^.+\\.tsx?$': 'ts-jest',

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 --runInBand",
         "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",

src/components/AdvertiserName/__tests__/AdvertiserName.spec.tsx

@@ -9,6 +9,10 @@ const mockProps = {
     },
 };
 
+jest.mock('@deriv-com/api-hooks', () => ({
+    useGetSettings: jest.fn(() => ({ email: '[email protected]' })),
+}));
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn(() => ({ isMobile: false })),

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),
 }));
 

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', () => {

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 = {

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(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);

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(<NicknameModal {...mockProps} />);
@@ -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();

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('<OrderDetailsCancelModal />', () => {
         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(<OrderDetailsCancelModal {...mockProps} />);
 
         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);

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('<OrderDetailsConfirmModal />', () => {
         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('<OrderDetailsConfirmModal />', () => {
         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('<OrderDetailsConfirmModal />', () => {
         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');

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(
             <PaymentMethodForm
                 formState={{
@@ -368,6 +382,7 @@ describe('PaymentMethodForm', () => {
     });
     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(
             <PaymentMethodForm
                 formState={{

src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx

@@ -21,7 +21,7 @@ let mockProps = {
 
 describe('<ProfileStats />', () => {
     it('should render no results if advertiserStats is empty', () => {
-        render(<ProfileStats advertiserStats={{}} />);
+        render(<ProfileStats advertiserStats={undefined} />);
 
         expect(screen.queryByText('Buy completion 30d')).not.toBeInTheDocument();
         expect(screen.queryByText('Sell completion 30d')).not.toBeInTheDocument();

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', () => {

src/hooks/__tests__/useModalManager.spec.tsx

@@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 const mockedUseQueryString = useQueryString as jest.MockedFunction<typeof useQueryString>;
-jest.mock('@/hooks/useQueryString', () => ({
+jest.mock('@/hooks/custom-hooks/useQueryString', () => ({
     __esModule: true,
     default: jest.fn(() => ({
         deleteQueryString: jest.fn(),

src/hooks/api/advert/p2p-advert/useAdvertList.ts

@@ -8,7 +8,6 @@ type TPayload = NonNullable<Parameters<typeof useP2PAdvertList>[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