From 6ff803b34ba8a435d40a851288251cda14fe66d6 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Tue, 14 May 2024 15:31:56 +0800 Subject: [PATCH] chore: TransferFormAccountCard unit test --- .../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 (
{/* 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(); + }); +});