[WALL] Lubega / WALL-2988 / TransactionStatusSuccess unit test (#13062)

* chore: transaction status success unit test

* fix: applied comments

* fix: rerun workflow

packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/__tests__/TransactionStatusSuccess.spec.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { APIProvider } from '@deriv/api';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ModalProvider } from '../../../../../../../components/ModalProvider';
+import TransactionStatusSuccess from '../TransactionStatusSuccess';
+
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn(),
+}));
+const mockUseHistory = useHistory as jest.Mock;
+
+const mockTransactions = [
+    {
+        address_hash: '',
+        address_url: '',
+        amount: 0.0001,
+        description: '',
+        formatted_address_hash: '',
+        formatted_amount: '',
+        formatted_confirmations: '',
+        formatted_transaction_hash: '',
+        id: '',
+        is_deposit: false,
+        is_valid_to_cancel: 1 as const,
+        is_withdrawal: true,
+        status_code: 'LOCKED' as const,
+        status_message: '',
+        status_name: '',
+        submit_date: 123456,
+        transaction_type: 'withdrawal' as const,
+    },
+];
+
+const mockWallet = {
+    account_category: 'wallet' as const,
+    account_type: '',
+    balance: 1,
+    broker: '',
+    created_at: new Date('01/01/1970'),
+    currency: '',
+    currency_config: {
+        code: '',
+        display_code: '',
+        fractional_digits: 1,
+        is_AUD: false,
+        is_BTC: true,
+        is_BUSD: false,
+        is_crypto: true,
+        is_DAI: false,
+        is_deposit_suspended: 0 as const,
+        is_ETH: false,
+        is_EUR: false,
+        is_EURS: false,
+        is_eUSDT: false,
+        is_fiat: false,
+        is_GBP: false,
+        is_IDK: false,
+        is_LTC: false,
+        is_PAX: false,
+        is_suspended: 0 as const,
+        is_TUSD: false,
+        is_tUSDT: false,
+        is_USB: false,
+        is_USD: false,
+        is_USDC: false,
+        is_USDK: false,
+        is_USDT: false,
+        is_withdrawal_suspended: 0 as const,
+        minimum_withdrawal: 0.1,
+        name: '',
+        stake_default: 0.1,
+        transfer_between_accounts: {
+            fees: {},
+            limits: { max: 0.1, min: 0.1 },
+            limits_ctrader: { max: 0.1, min: 0.1 },
+            limits_derivez: { max: 0.1, min: 0.1 },
+            limits_dxtrade: { max: 0.1, min: 0.1 },
+            limits_mt5: { max: 0.1, min: 0.1 },
+        },
+        type: 'crypto' as const,
+    },
+    display_balance: '',
+    dtrade_loginid: undefined,
+    excluded_until: undefined,
+    is_active: true,
+    is_crypto: true,
+    is_disabled: false,
+    is_malta_wallet: false,
+    is_mf: false,
+    is_trading: false,
+    is_virtual: false,
+    is_wallet: true,
+    landing_company_name: '',
+    linked_to: [],
+    loginid: '',
+    platform: 'deriv' as const,
+    wallet_currency_type: '',
+};
+
+describe('TransactionStatusSuccess', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render winthdrawal info for withdrawal transactions', () => {
+        render(
+            <APIProvider>
+                <ModalProvider>
+                    <TransactionStatusSuccess
+                        transactionType='withdrawal'
+                        transactions={mockTransactions}
+                        wallet={mockWallet}
+                    />
+                </ModalProvider>
+            </APIProvider>
+        );
+
+        expect(screen.getByText('Withdrawal')).toBeInTheDocument();
+        expect(screen.getByText('0.0001')).toBeInTheDocument();
+        expect(screen.queryByText('No recent transactions.')).not.toBeInTheDocument();
+        expect(screen.queryByText('View more')).not.toBeInTheDocument();
+    });
+
+    it('should render deposit info for deposit transactions', () => {
+        const mockDeposit = [
+            {
+                address_hash: '',
+                address_url: '',
+                amount: 0.0001,
+                description: '',
+                formatted_address_hash: '',
+                formatted_amount: '',
+                formatted_confirmations: '',
+                formatted_transaction_hash: '',
+                id: '',
+                is_deposit: true,
+                is_valid_to_cancel: 1 as const,
+                is_withdrawal: false,
+                status_code: 'LOCKED' as const,
+                status_message: '',
+                status_name: '',
+                submit_date: 123456,
+                transaction_type: 'withdrawal' as const,
+            },
+        ];
+
+        render(
+            <APIProvider>
+                <ModalProvider>
+                    <TransactionStatusSuccess
+                        transactionType='deposit'
+                        transactions={mockDeposit}
+                        wallet={mockWallet}
+                    />
+                </ModalProvider>
+            </APIProvider>
+        );
+
+        expect(screen.getByText('Deposit')).toBeInTheDocument();
+        expect(screen.getByText('0.0001')).toBeInTheDocument();
+        expect(screen.queryByText('No recent transactions.')).not.toBeInTheDocument();
+        expect(screen.queryByText('View more')).not.toBeInTheDocument();
+    });
+
+    it('should render "No recent transactions" when there are no transactions', () => {
+        render(
+            <APIProvider>
+                <ModalProvider>
+                    <TransactionStatusSuccess transactions={[]} wallet={mockWallet} />
+                </ModalProvider>
+            </APIProvider>
+        );
+
+        expect(screen.getByText('No recent transactions.')).toBeInTheDocument();
+        expect(screen.queryByText('Deposit')).not.toBeInTheDocument();
+        expect(screen.queryByText('Withdrawal')).not.toBeInTheDocument();
+        expect(screen.queryByText('View more')).not.toBeInTheDocument();
+    });
+
+    it('should render correct elements when there are more than 3 transactions', () => {
+        const pushMock = jest.fn();
+        mockUseHistory.mockReturnValue({ push: pushMock });
+
+        for (let i = 0; i < 5; i++) {
+            const newTransaction = {
+                address_hash: '',
+                address_url: '',
+                amount: 0.0001,
+                description: '',
+                formatted_address_hash: '',
+                formatted_amount: '',
+                formatted_confirmations: '',
+                formatted_transaction_hash: '',
+                id: '',
+                is_deposit: false,
+                is_valid_to_cancel: 1 as const,
+                is_withdrawal: true,
+                status_code: 'LOCKED' as const,
+                status_message: '',
+                status_name: '',
+                submit_date: 123456,
+                transaction_type: 'withdrawal' as const,
+            };
+
+            mockTransactions.push(newTransaction);
+        }
+
+        render(
+            <APIProvider>
+                <ModalProvider>
+                    <TransactionStatusSuccess
+                        transactionType='withdrawal'
+                        transactions={mockTransactions}
+                        wallet={mockWallet}
+                    />
+                </ModalProvider>
+            </APIProvider>
+        );
+
+        expect(screen.queryByText('No recent transactions.')).not.toBeInTheDocument();
+        expect(screen.getAllByText('Withdrawal')[0]).toBeInTheDocument();
+        expect(screen.getAllByText('0.0001')[0]).toBeInTheDocument();
+        expect(screen.getByText('View more')).toBeInTheDocument();
+
+        fireEvent.click(screen.getByText('View more'));
+        expect(pushMock).toHaveBeenCalledWith('/wallets/cashier/transactions?showPending');
+    });
+});