From ae6f134cf9b41eaa278ec8e225b4c43214034cdf Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:01:56 +0800
Subject: [PATCH] [WALL] Jim/WALL-2869/add test cases for desktop wallets list
 component (#16528)

* test: add test cases for desktop wallets list component

* chore: sort imports

* test: address review comments

* test: address review comments
---
 .../DesktopWalletsList/DesktopWalletsList.tsx |  2 +-
 .../__tests__/DesktopWalletsList.spec.tsx     | 55 +++++++++++++++++++
 .../WalletsCardLoader/WalletsCardLoader.tsx   |  2 +-
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx

diff --git a/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
index 3ca54664fbf9..175293136738 100644
--- a/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
+++ b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
@@ -10,7 +10,7 @@ const DesktopWalletsList = () => {
     const { data: activeWallet, isInitializing } = useActiveWalletAccount();
 
     return (
-        <div className='wallets-desktop-wallets-list'>
+        <div className='wallets-desktop-wallets-list' data-testid='dt_desktop-wallets-list'>
             {isInitializing && <WalletsCardLoader />}
             {!isInitializing && (
                 <WalletsContainer
diff --git a/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx b/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx
new file mode 100644
index 000000000000..9675cf8dd9f2
--- /dev/null
+++ b/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx
@@ -0,0 +1,55 @@
+import React, { PropsWithChildren } from 'react';
+import { APIProvider, useActiveWalletAccount } from '@deriv/api-v2';
+import { render, screen } from '@testing-library/react';
+import WalletsAuthProvider from '../../../AuthProvider';
+import { ModalProvider } from '../../ModalProvider';
+import DesktopWalletsList from '../DesktopWalletsList';
+
+jest.mock('@deriv/api-v2', () => ({
+    ...jest.requireActual('@deriv/api-v2'),
+    useActiveWalletAccount: jest.fn(),
+}));
+
+const wrapper = ({ children }: PropsWithChildren) => {
+    return (
+        <APIProvider>
+            <WalletsAuthProvider>
+                <ModalProvider>{children}</ModalProvider>
+            </WalletsAuthProvider>
+        </APIProvider>
+    );
+};
+
+describe('DesktopWalletsList', () => {
+    it('renders the component', () => {
+        const mockUseActiveWalletAccount = {
+            isInitializing: true,
+        };
+        (useActiveWalletAccount as jest.Mock).mockReturnValue(mockUseActiveWalletAccount);
+        render(<DesktopWalletsList />, { wrapper });
+        expect(screen.getByTestId('dt_desktop-wallets-list')).toBeInTheDocument();
+    });
+    it('renders the component when authorization is not initializing', () => {
+        const mockUseActiveWalletAccount = {
+            data: {
+                is_active: true,
+                is_virtual: false,
+                loginid: 'CRW1',
+            },
+            isInitializing: false,
+        };
+        (useActiveWalletAccount as jest.Mock).mockReturnValue(mockUseActiveWalletAccount);
+
+        render(<DesktopWalletsList />, { wrapper });
+        expect(screen.getByTestId('dt_wallets_container')).toBeInTheDocument();
+    });
+    it('displays loader while authorization is initializing', () => {
+        const mockUseActiveWalletAccount = {
+            isInitializing: true,
+        };
+        (useActiveWalletAccount as jest.Mock).mockReturnValue(mockUseActiveWalletAccount);
+
+        render(<DesktopWalletsList />, { wrapper });
+        expect(screen.getByTestId('dt_wallets_card_loader')).toBeInTheDocument();
+    });
+});
diff --git a/packages/wallets/src/components/SkeletonLoader/WalletsCardLoader/WalletsCardLoader.tsx b/packages/wallets/src/components/SkeletonLoader/WalletsCardLoader/WalletsCardLoader.tsx
index 7e0c5f17f9c7..82d00bf4f711 100644
--- a/packages/wallets/src/components/SkeletonLoader/WalletsCardLoader/WalletsCardLoader.tsx
+++ b/packages/wallets/src/components/SkeletonLoader/WalletsCardLoader/WalletsCardLoader.tsx
@@ -3,7 +3,7 @@ import './WalletsCardLoader.scss';
 
 const WalletsCardLoader = () => {
     return (
-        <div className='wallets-card-loader'>
+        <div className='wallets-card-loader' data-testid='dt_wallets_card_loader'>
             <div className='wallets-skeleton wallets-card-loader__item wallets-card-loader__item-expanded' />
         </div>
     );