From 7dac1a467ce28242fa062266e72047a3b4b7de21 Mon Sep 17 00:00:00 2001
From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com>
Date: Wed, 15 May 2024 20:43:41 +0800
Subject: [PATCH] chore: TransferFormAccountCard unit test (#15140)

---
 .../WalletsAppLinkedWithWalletIcon.tsx        |   2 +-
 .../WalletsAppLinkedWithWalletIcon.spec.tsx   |   8 +-
 .../TransferFormAccountCard.tsx               |   4 +-
 .../TransferFormAccountCard.spec.tsx          | 169 ++++++++++++++++++
 4 files changed, 177 insertions(+), 6 deletions(-)
 create mode 100644 packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx

diff --git a/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/WalletsAppLinkedWithWalletIcon.tsx b/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/WalletsAppLinkedWithWalletIcon.tsx
index ef79bcf1ab84..175a9d4db536 100644
--- a/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/WalletsAppLinkedWithWalletIcon.tsx
+++ b/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/WalletsAppLinkedWithWalletIcon.tsx
@@ -15,7 +15,7 @@ const WalletsAppLinkedWithWalletIcon = ({ appIcon, currency, isDemo = false, siz
     return (
         <div
             className={`wallets-app-linked-with-wallet-icon wallets-app-linked-with-wallet-icon--${size}`}
-            data-testid='wallets-app-linked-with-wallet-icon'
+            data-testid='dt_wallets_app_linked_with_wallet_icon'
         >
             {/* Wallet Icon */}
             <div className='wallets-app-linked-with-wallet-icon__wallet-icon'>
diff --git a/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/__tests__/WalletsAppLinkedWithWalletIcon.spec.tsx b/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/__tests__/WalletsAppLinkedWithWalletIcon.spec.tsx
index b816500c9146..67891bb443cf 100644
--- a/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/__tests__/WalletsAppLinkedWithWalletIcon.spec.tsx
+++ b/packages/wallets/src/components/WalletsAppLinkedWithWalletIcon/__tests__/WalletsAppLinkedWithWalletIcon.spec.tsx
@@ -4,9 +4,11 @@ import WalletsAppLinkedWithWalletIcon from '../WalletsAppLinkedWithWalletIcon';
 
 describe('<WalletsAppLinkedWithWalletIcon/>', () => {
     it('renders', () => {
-        render(<WalletsAppLinkedWithWalletIcon appIcon='IcWalletOptionsLight' currency='LTC' size='large' />);
+        render(
+            <WalletsAppLinkedWithWalletIcon appIcon='IcWalletOptionsLight' currency='USD' isDemo size={undefined} />
+        );
 
-        const divElement = screen.getByTestId('wallets-app-linked-with-wallet-icon');
+        const divElement = screen.getByTestId('dt_wallets_app_linked_with_wallet_icon');
 
         expect(divElement).toBeInTheDocument();
     });
@@ -25,7 +27,7 @@ describe('<WalletsAppLinkedWithWalletIcon/>', () => {
     it('applies correct size', () => {
         render(<WalletsAppLinkedWithWalletIcon appIcon='IcWalletOptionsLight' currency='LTC' size='large' />);
 
-        const divElement = screen.getByTestId('wallets-app-linked-with-wallet-icon');
+        const divElement = screen.getByTestId('dt_wallets_app_linked_with_wallet_icon');
 
         expect(divElement).toHaveClass('wallets-app-linked-with-wallet-icon--large');
     });
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/TransferFormAccountCard.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/TransferFormAccountCard.tsx
index c39a5f215032..c87d38a2e63c 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/TransferFormAccountCard.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/TransferFormAccountCard.tsx
@@ -18,7 +18,7 @@ type TProps = {
     type?: 'input' | 'modal';
 };
 
-const WalletTransferFormAccountCard: React.FC<TProps> = ({ account, activeWallet, type = 'modal' }) => {
+const TransferFormAccountCard: React.FC<TProps> = ({ account, activeWallet, type = 'modal' }) => {
     const { isMobile } = useDevice();
     const isInput = type === 'input';
     const isModal = type === 'modal';
@@ -74,4 +74,4 @@ const WalletTransferFormAccountCard: React.FC<TProps> = ({ account, activeWallet
     );
 };
 
-export default WalletTransferFormAccountCard;
+export default TransferFormAccountCard;
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx
new file mode 100644
index 000000000000..c553dbd46ff1
--- /dev/null
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAccountCard/__tests__/TransferFormAccountCard.spec.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import useDevice from '../../../../../../../hooks/useDevice';
+import { getTradingAppIcon } from '../../../../../helpers';
+import TransferFormAccountCard from '../TransferFormAccountCard';
+
+jest.mock('../../../../../../../hooks/useDevice', () => jest.fn());
+
+jest.mock('../../../../../helpers', () => ({
+    getTradingAppIcon: jest.fn(),
+}));
+
+describe('TransferFormAccountCard', () => {
+    const mockAccount = {
+        account_category: 'wallet',
+        account_type: 'type1',
+        accountName: 'Test Account',
+        displayBalance: '1000 USD',
+        landingCompanyName: 'SVG',
+        mt5_group: 'group1',
+    };
+
+    const mockActiveWallet = {
+        currency: 'USD',
+        landingCompanyName: 'SVG',
+    };
+
+    beforeEach(() => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+        (getTradingAppIcon as jest.Mock).mockReturnValue('appIcon');
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render without crashing', () => {
+        render(<TransferFormAccountCard account={undefined} activeWallet={undefined} type={undefined} />);
+
+        expect(screen.queryByText('Test Account')).not.toBeInTheDocument();
+        expect(screen.queryByText('Balance: 1000 USD')).not.toBeInTheDocument();
+    });
+
+    it('should render content for demo account card correctly', () => {
+        const mockNewAccount = { ...mockAccount, currencyConfig: {}, demo_account: true };
+
+        render(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='modal'
+            />
+        );
+
+        expect(screen.getByText('Test Account')).toBeInTheDocument();
+        expect(screen.getByText('Balance: 1000 USD')).toBeInTheDocument();
+        expect(screen.getByText('Demo')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_wallets_app_linked_with_wallet_icon')).not.toBeInTheDocument();
+    });
+
+    it('should render content for real account card correctly', () => {
+        const mockNewAccount = { ...mockAccount, currencyConfig: { display_code: 'USD' }, demo_account: false };
+
+        render(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='modal'
+            />
+        );
+
+        expect(screen.getByText('Test Account')).toBeInTheDocument();
+        expect(screen.getByText('Balance: 1000 USD')).toBeInTheDocument();
+        expect(screen.getByText('SVG')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_wallets_app_linked_with_wallet_icon')).not.toBeInTheDocument();
+    });
+
+    it('should render content for non-wallet account card correctly', () => {
+        const mockNewAccount = {
+            ...mockAccount,
+            account_category: 'trading',
+        };
+
+        render(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='modal'
+            />
+        );
+
+        expect(screen.getByText('Test Account')).toBeInTheDocument();
+        expect(screen.getByText('Balance: 1000 USD')).toBeInTheDocument();
+        expect(screen.getByText('SVG')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_wallets_app_linked_with_wallet_icon')).toBeInTheDocument();
+    });
+
+    it('should display content for demo account in mobile input type correctly', () => {
+        const mockNewAccount = { ...mockAccount, demo_account: true };
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+
+        render(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='input'
+            />
+        );
+
+        expect(screen.getByText('Test Account')).toBeInTheDocument();
+        expect(screen.getByText('Balance: 1000 USD')).toBeInTheDocument();
+        expect(screen.getByText('Demo')).toBeInTheDocument();
+    });
+
+    it('should display content for real account in mobile input type correctly', () => {
+        const mockNewAccount = { ...mockAccount, demo_account: false };
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
+
+        render(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='input'
+            />
+        );
+
+        expect(screen.getByText('Test Account')).toBeInTheDocument();
+        expect(screen.getByText('Balance: 1000 USD')).toBeInTheDocument();
+        expect(screen.getByText('SVG')).toBeInTheDocument();
+    });
+
+    it('should display different layouts for modal and input types', () => {
+        const mockNewAccount = { ...mockAccount, demo_account: true };
+
+        const { rerender } = render(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='modal'
+            />
+        );
+
+        expect(screen.getByText('Demo')).toBeInTheDocument();
+
+        rerender(
+            <TransferFormAccountCard
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                account={mockNewAccount}
+                // @ts-expect-error - since this is a mock, we only need partial properties of the hook
+                activeWallet={mockActiveWallet}
+                type='input'
+            />
+        );
+
+        expect(screen.queryByText('Demo')).not.toBeInTheDocument();
+    });
+});