import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import PaymentGroupPaymentFailedBatchesBanner from 'src/components/payment-group-detail/payment-group-payment-failed-batches-banner';

describe('<PaymentGroupPaymentFailedBatchesBanner>', () => {
    it('renders when no batches are failed', () => {
        const failedPaymentBatches: any = [];
        renderInAppContext(
            <PaymentGroupPaymentFailedBatchesBanner
                failedPaymentBatches={failedPaymentBatches}
            />
        );

        const failedBatchBanner = screen.queryByTestId('AlertContainer');
        expect(failedBatchBanner).toBeNull();
    });

    it('renders when batches are failed', () => {
        const failedPaymentBatches: any = [
            {
                abacusStateId: '3922',
                actionStatus: 'error',
                paymentGroupPaymentId: '409',
                batchNum: 1,
                paymentGroupPaymentBatchId: '20',
                payoneerProgramId: '100176930',
                errorMessage: 'Internal error',
            },
        ];
        renderInAppContext(
            <PaymentGroupPaymentFailedBatchesBanner
                failedPaymentBatches={failedPaymentBatches}
            />
        );

        const failedBatchBanner = screen.getByTestId('AlertContainer');
        expect(failedBatchBanner).toBeDefined();
        expect(
            screen.getByText('Batch 001 has encounterd an error.')
        ).toBeDefined();
        expect(
            screen.getByText(
                'Please contact the Accounting Tech Team to resolve this issue.'
            )
        ).toBeDefined();
    });
});