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

Fix test cases + issues with svg?react not being recognised in test cases

jest.config.cjs

@@ -1,17 +1,16 @@
 module.exports = {
-    testEnvironment: 'jsdom',
-    transform: {
-        '^.+\\.tsx?$': 'ts-jest',
-        '^.+\\.(js|jsx)$': 'babel-jest',
-        '^.+\\.svg$': '<rootDir>/__mocks__/svgReactTransformer.cjs',
-    },
     moduleNameMapper: {
-        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
         '@deriv-com/(.*)': '<rootDir>/node_modules/@deriv-com/$1',
-        '^@/assets/(.*)\\.svg\\?react$': '<rootDir>/__mocks__/svgReactTransformer.cjs',
-        '^@/assets/(.*)$': '<rootDir>/src/assets/$1',
+        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
         '^@/(.*)$': '<rootDir>/src/$1',
+        '^@/assets/(.*)$': '<rootDir>/src/assets/$1',
     },
-    transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui|@sendbird/chat)).+\\.js$'],
     setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.(js|jsx)$': 'babel-jest',
+        '^.+\\.svg$': 'jest-transform-stub',
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    transformIgnorePatterns: ['/node_modules/(?!(@deriv-com/ui|@sendbird/chat)).+\\.js$'],
 };

package.json

@@ -22,6 +22,7 @@
         "@deriv/quill-design": "^1.2.24",
         "@deriv/quill-icons": "^1.18.10",
         "@sendbird/chat": "^4.11.3",
+        "@svgr/rollup": "^8.1.0",
         "@tanstack/react-query": "^5.28.14",
         "@tanstack/react-table": "^8.15.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -30,6 +31,7 @@
         "downshift": "^9.0.0",
         "history": "^4.10.1",
         "html2canvas": "^1.4.1",
+        "jest-transform-stub": "^2.0.0",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "qrcode.react": "^3.1.0",

src/components/Modals/AdErrorTooltipModal/__tests__/AdErrorTooltipModal.spec.tsx

@@ -13,14 +13,6 @@ const mockProps = {
     visibilityStatus: [],
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    useAuthorize: () => ({
-        data: {
-            local_currencies: ['USD'],
-        },
-    }),
-}));
-
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: () => ({ isMobile: false }),

src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

@@ -41,6 +41,7 @@ const BlockUnblockUserModal = ({
 
     return (
         <Modal
+            ariaHideApp={false}
             className='block-unblock-user-modal'
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}

src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx

@@ -6,9 +6,9 @@ const mockOnRequestClose = jest.fn();
 const mockUseBlockMutate = jest.fn();
 const mockUseUnblockMutate = jest.fn();
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         counterparty: {
             useBlock: jest.fn(() => ({
                 mutate: mockUseBlockMutate,

src/components/Modals/DailyLimitModal/DailyLimitModal.tsx

@@ -76,6 +76,7 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM
     return (
         // TODO: below modal will be rewritten to use @deriv/ui modal
         <Modal
+            ariaHideApp={false}
             className='daily-limit-modal'
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}

src/components/Modals/DailyLimitModal/__tests__/DailyLimitModal.spec.tsx

@@ -10,30 +10,30 @@ let mockUseAdvertiserUpdate = {
         daily_sell_limit: 200,
     },
     error: undefined,
-    isLoading: true,
+    isPending: true,
     isSuccess: false,
     mutate: mockUseAdvertiserUpdateMutate,
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         advertiser: {
             useUpdate: jest.fn(() => mockUseAdvertiserUpdate),
         },
     },
 }));
 
 describe('DailyLimitModal', () => {
-    it('should render loader when data is not ready', () => {
+    it('should render loader when data is not ready', async () => {
         render(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);
 
         expect(screen.getByTestId('dt_derivs-loader')).toBeVisible();
     });
     it('should render the correct title and behaviour', async () => {
         mockUseAdvertiserUpdate = {
             ...mockUseAdvertiserUpdate,
-            isLoading: false,
+            isPending: false,
             isSuccess: false,
         };
         render(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);
@@ -55,7 +55,7 @@ describe('DailyLimitModal', () => {
     it('should render the successful limits increase', async () => {
         mockUseAdvertiserUpdate = {
             ...mockUseAdvertiserUpdate,
-            isLoading: false,
+            isPending: false,
             isSuccess: true,
         };
         render(<DailyLimitModal currency='USD' isModalOpen onRequestClose={mockOnRequestClose} />);

src/components/Modals/MyAdsDeleteModal/__tests__/MyAdsDeleteModal.spec.tsx

@@ -17,8 +17,8 @@ const mockUseGet = {
     isLoading: false,
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    p2p: {
+jest.mock('@/hooks', () => ({
+    api: {
         advert: {
             useGet: jest.fn(() => mockUseGet),
         },

src/components/Modals/NicknameModal/NicknameModal.tsx

@@ -40,7 +40,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
 
     useEffect(() => {
         if (isSuccess) {
-            onRequestClose;
+            onRequestClose();
             setHasCreatedAdvertiser(true);
         } else if (isError) {
             debouncedReset();
@@ -90,7 +90,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
                         color='black'
                         onClick={() => {
                             history.push(BUY_SELL_URL);
-                            onRequestClose;
+                            onRequestClose();
                         }}
                         size='lg'
                         textSize={textSize}

src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx

@@ -29,9 +29,9 @@ jest.mock('@deriv-com/ui', () => ({
     }),
 }));
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         advertiser: {
             useCreate: jest.fn(() => ({
                 error: undefined,
@@ -78,7 +78,7 @@ describe('NicknameModal', () => {
         expect(mockedMutate).toHaveBeenCalledWith({
             name: 'Nahida',
         });
-        expect(mockUseAdvertiserInfoState().setHasCreatedAdvertiser).toBeCalledWith(true);
+        expect(mockUseAdvertiserInfoState().setHasCreatedAdvertiser).toHaveBeenCalledWith(true);
     });
     it('should invoke reset when there is an error from creating advertiser', async () => {
         (mockedUseAdvertiserCreate as jest.Mock).mockImplementationOnce(() => ({
@@ -89,11 +89,9 @@ describe('NicknameModal', () => {
             reset: mockedReset,
         }));
 
-        await (() => {
-            render(<NicknameModal {...mockProps} />);
-        });
+        render(<NicknameModal {...mockProps} />);
 
-        expect(mockedReset).toBeCalled();
+        expect(mockedReset).toHaveBeenCalled();
     });
     it('should close the modal when Cancel button is clicked', async () => {
         (mockedUseAdvertiserCreate as jest.Mock).mockImplementationOnce(() => ({
@@ -111,7 +109,7 @@ describe('NicknameModal', () => {
         });
         await userEvent.click(cancelBtn);
 
-        expect(mockPush).toBeCalledWith('/buy-sell');
-        expect(mockProps.onRequestClose).toBeCalledWith(false);
+        expect(mockPush).toHaveBeenCalledWith('/buy-sell');
+        expect(mockProps.onRequestClose).toHaveBeenCalled();
     });
 });

src/components/Modals/OrderDetailsComplainModal/__tests__/OrderDetailsComplainModal.spec.tsx

@@ -14,9 +14,9 @@ const mockUseDispute = {
     mutate: jest.fn(),
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    ...jest.requireActual('@deriv/api-v2'),
-    p2p: {
+jest.mock('@/hooks', () => ({
+    ...jest.requireActual('@/hooks'),
+    api: {
         orderDispute: {
             useDispute: () => mockUseDispute,
         },

src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx

@@ -1,6 +1,6 @@
 import html2canvas from 'html2canvas';
 import { useDevice } from '@deriv-com/ui';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ShareAdsModal from '../ShareAdsModal';
 
@@ -24,8 +24,8 @@ const mockUseGet = {
     isLoading: false,
 };
 
-jest.mock('@deriv/api-v2', () => ({
-    p2p: {
+jest.mock('@/hooks', () => ({
+    api: {
         advert: {
             useGet: jest.fn(() => mockUseGet),
         },
@@ -50,8 +50,8 @@ jest.mock('@deriv-com/ui', () => ({
 }));
 
 const mockCopyFn = jest.fn();
-jest.mock('@/hooks', () => ({
-    ...jest.requireActual('@/hooks'),
+jest.mock('@/hooks/custom-hooks', () => ({
+    ...jest.requireActual('@/hooks/custom-hooks'),
     useCopyToClipboard: jest.fn(() => [true, mockCopyFn, jest.fn()]),
 }));
 
@@ -77,21 +77,26 @@ describe('ShareAdsModal', () => {
     });
 
     it('should call onCopy function when clicking on copy icon', async () => {
-        jest.useFakeTimers();
+        mockUseDevice.mockReturnValue({
+            isDesktop: false,
+            isMobile: true,
+        });
 
         render(<ShareAdsModal {...mockProps} />);
+
         const copyButton = screen.getByRole('button', { name: 'Copy link' });
         await userEvent.click(copyButton);
-        await act(async () => {
-            jest.runAllTimers();
-            await Promise.resolve();
-        });
 
         expect(mockCopyFn).toHaveBeenCalledWith(
             `${window.location.href}advertiser/${mockUseGet.data.advertiser_details.id}?advert_id=${mockProps.id}`
         );
     });
     it('should call html2canvas function when clicking on Download this QR code button', async () => {
+        mockUseDevice.mockReturnValue({
+            isDesktop: false,
+            isMobile: true,
+        });
+
         render(<ShareAdsModal {...mockProps} />);
 
         const downloadButton = screen.getByRole('button', { name: 'Download this QR code' });

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx

@@ -2,9 +2,9 @@ import { THooks } from 'types';
 import { FlyoutMenu } from '@/components';
 import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
 import { Button, Checkbox } from '@deriv-com/ui';
-import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg?react';
-import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg?react';
-import IcCashierOther from '../../../public/ic-cashier-other.svg?react';
+import { ReactComponent as IcCashierBankTransfer } from '../../../public/ic-cashier-bank-transfer.svg';
+import { ReactComponent as IcCashierEwallet } from '../../../public/ic-cashier-ewallet.svg';
+import { ReactComponent as IcCashierOther } from '../../../public/ic-cashier-other.svg';
 import './PaymentMethodCardHeader.scss';
 
 type TPaymentMethodCardHeaderProps = {

src/components/PaymentMethodCard/__tests__/PaymentMethodCardHeader.spec.tsx

@@ -1,8 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { PaymentMethodCardHeader } from '../PaymentMethodCardHeader';
 
-jest.mock('../../../public/ic-cashier-ewallet.svg?react', () => 'span');
-
 describe('PaymentMethodCardHeader', () => {
     it('should render the component correctly', () => {
         render(

src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx

@@ -3,9 +3,9 @@ import clsx from 'clsx';
 import { THooks } from 'types';
 import { TGenericSizes } from '@/utils';
 import { Text } from '@deriv-com/ui';
-import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg?react';
-import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg?react';
-import IcCashierOther from '../../public/ic-cashier-other.svg?react';
+import { ReactComponent as IcCashierBankTransfer } from '../../public/ic-cashier-bank-transfer.svg';
+import { ReactComponent as IcCashierEwallet } from '../../public/ic-cashier-ewallet.svg';
+import { ReactComponent as IcCashierOther } from '../../public/ic-cashier-other.svg';
 
 type TPaymentMethodWithIconProps = {
     className?: string;

src/pages/orders/components/ChatFooterIcon/ChatFooterIcon.tsx

@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { Button } from '@deriv-com/ui';
-import AttachmentIcon from '../../../../public/ic-attachment.svg?react';
-import SendMessageIcon from '../../../../public/ic-send-message.svg?react';
+import { ReactComponent as AttachmentIcon } from '../../../../public/ic-attachment.svg';
+import { ReactComponent as SendMessageIcon } from '../../../../public/ic-send-message.svg';
 
 type TChatFooterIconProps = {
     length: number;

src/pages/orders/components/ChatMessages/ChatMessages.tsx

@@ -5,7 +5,7 @@ import { CHAT_FILE_TYPE, CHAT_MESSAGE_TYPE } from '@/constants';
 import { useSendbird } from '@/hooks/custom-hooks';
 import { convertToMB, formatMilliseconds } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
-import PDFIcon from '../../../../public/ic-pdf.svg?react';
+import { ReactComponent as PDFIcon } from '../../../../public/ic-pdf.svg';
 import { ChatMessageReceipt } from '../ChatMessageReceipt';
 import { ChatMessageText } from '../ChatMessageText';
 import './ChatMessages.scss';