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 (
{/* 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('', () => {
it('renders', () => {
- render();
+ render(
+
+ );
- 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('', () => {
it('applies correct size', () => {
render();
- 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 = ({ account, activeWallet, type = 'modal' }) => {
+const TransferFormAccountCard: React.FC = ({ account, activeWallet, type = 'modal' }) => {
const { isMobile } = useDevice();
const isInput = type === 'input';
const isModal = type === 'modal';
@@ -74,4 +74,4 @@ const WalletTransferFormAccountCard: React.FC = ({ 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();
+
+ 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(
+
+ );
+
+ 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(
+
+ );
+
+ 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(
+
+ );
+
+ 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(
+
+ );
+
+ 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(
+
+ );
+
+ 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(
+
+ );
+
+ expect(screen.getByText('Demo')).toBeInTheDocument();
+
+ rerender(
+
+ );
+
+ expect(screen.queryByText('Demo')).not.toBeInTheDocument();
+ });
+});