[WALL] Jim/WALL-2869/add test cases for desktop wallets list component (

binary-com#16528)

* test: add test cases for desktop wallets list component

* chore: sort imports

* test: address review comments

* test: address review comments

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

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();
+    });
+});

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