write test cases for below code
import React from 'react';
import {
    ChargesTable,
    paymentTableSelectors,
    PaymentChargesTableAction
} from '@txp-core/payment-transactions-table';
import { Table } from '@ids-ts/table';
import { useTXPStateRead, useTXPStateWrite } from '@txp-core/runtime';
import { useFormatMessage } from '@txp-core/intl';
import { TransactionSelectors } from '@txp-core/transactions-core';
import { enabled } from '@txp-core/enabled';
import { TransactionTypes, getTxnUrl } from '@txp-core/transactions-utils';
import { toLocalizedMoneyString, toLocalDateFormat } from '@txp-core/basic-utils';
import TransactionsTableHeader from './TransactionTableHeaders';
import styles from 'src/js/staticLayout/Grid.module.css';
import Checkbox, { CheckboxOnChangeEventType } from '@ids-ts/checkbox';
import style from './Tables.module.css';
import { useTrowserHooks } from '@txp-core/trowser';
import LinkButton from '@txp-core/link-button';
import PaymentField from 'src/js/billpayment/modules/TransactionTables/PaymentField';

export interface txnType {
    txnTypeId: number;
    txnTypeLongName: string;
}

export interface OutstandingTableDataTypes {
    txnId: number;
    txnType: txnType;
    date: string;
    amount: string;
    referenceNumber: number;
    dueDate: string;
    openBalance: string;
    linkedPaymentAmount: string;
    isLinkedPaymentAmount?: boolean;
}

export const OutstandingTransactionsTable = () => {
    const formatMessage = useFormatMessage();
    const customerId = useTXPStateRead(TransactionSelectors.getContactId);
    const outstandingTableLines = useTXPStateRead(paymentTableSelectors.getCharges) || [];
    const onPaymentFieldUpdated = useTXPStateWrite(
        PaymentChargesTableAction.chargesTableDataUpdate
    );
    const { closeTrowser } = useTrowserHooks();

    const Items = (props: { item: OutstandingTableDataTypes; idx: number }) => {
        const { item, idx } = props;

        const txnUrl = getTxnUrl(`${item.txnType.txnTypeId}`, item.txnId);
        const referenceNumber = item?.referenceNumber ? `# ${item?.referenceNumber}` : '';

        const handleCheckboxChange = (event: CheckboxOnChangeEventType, txnId: number) => {
            if (event.target.checked) {
                const value = outstandingTableLines.filter((x) => x.txnId === txnId)[0].openBalance;

                onPaymentFieldUpdated(txnId, {
                    linkedPaymentAmount: value.toString(),
                    isLinkedPaymentAmount: true
                });
            } else {
                onPaymentFieldUpdated(txnId, {
                    linkedPaymentAmount: ''
                });
            }
        };

        const handlePaymentFieldChange = (inputValue: string) => {
            onPaymentFieldUpdated(item.txnId, {
                linkedPaymentAmount: inputValue,
                isLinkedPaymentAmount: true
            });
        };

        const handleNavigate = () =>
            closeTrowser?.({ navigateTo: txnUrl, skipTrowserCloseDelay: true });
        return (
            <>
                <Table.Row key={idx} className='tableRow'>
                    <Table.Cell className={style.checkbox}>
                        <Checkbox
                            aria-label={formatMessage({
                                id: 'charges_credits_table_select_rows',
                                defaultMessage: 'Select rows'
                            })}
                            style={{
                                cursor: 'pointer'
                            }}
                            checked={!!item.linkedPaymentAmount}
                            onChange={(event) => handleCheckboxChange(event, item.txnId)}
                            title='Toggle Row Selected'
                        />
                    </Table.Cell>
                    <Table.Cell className={styles.leftAlign}>
                        <LinkButton
                            onClick={handleNavigate}
                            text={`${item.txnType.txnTypeLongName} ${referenceNumber}`}
                        />{' '}
                        ({toLocalDateFormat(item.date)})
                    </Table.Cell>
                    <Table.Cell className={styles.leftAlign}>
                        {toLocalDateFormat(item.dueDate)}
                    </Table.Cell>
                    <Table.Cell className={styles.rightAlign}>
                        {toLocalizedMoneyString(item.amount)}
                    </Table.Cell>
                    <Table.Cell className={styles.rightAlign}>
                        {toLocalizedMoneyString(item.openBalance)}
                    </Table.Cell>
                    <Table.Cell>
                        <PaymentField
                            paymentAmount={item.linkedPaymentAmount}
                            txnId={item.txnId}
                            rowId={idx.toString()}
                            handleOnPaymentChange={handlePaymentFieldChange}
                        />
                    </Table.Cell>
                </Table.Row>
            </>
        );
    };

    return (
        <div className={styles.gridWrapper}>
            {customerId && (
                <ChargesTable header={<TransactionsTableHeader dueDateFlag />}>
                    {(item: OutstandingTableDataTypes, idx: number) => (
                        <Items item={item} idx={idx} />
                    )}
                </ChargesTable>
            )}
        </div>
    );
};

export default enabled(
    {
        'environment.txnType': [TransactionTypes.PURCHASE_BILL_PAYMENT]
    },
    OutstandingTransactionsTable
);