import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    getAdvancePaymentDetail,
    getCustomPaymentDetail,
} from 'src/urls/frontend-royalties';
import PaymentDescription, {
    PaymentDescriptionProps,
} from '../payment-description';

describe('<PaymentDescriptor>', () => {
    const render = (props: PaymentDescriptionProps) =>
        renderInAppContext(<PaymentDescription {...props} />);

    it('renders with link (advance)', () => {
        const props = {
            paymentName: 'Test Payment Name',
            referencePaymentTypeId: '1',
            worksheetPaymentContractAdvanceId: '101',
        };
        render(props);
        const links = screen.getAllByRole('link');
        expect(links[0].textContent).toEqual(props.paymentName);
        expect(links[0].getAttribute('href')).toContain(
            getAdvancePaymentDetail(props.worksheetPaymentContractAdvanceId)
        );
    });

    it('renders with link (custom)', () => {
        const props = {
            paymentName: 'Custom Payment Name',
            worksheetPaymentCustomId: '555',
        };
        render(props);
        const links = screen.getAllByRole('link');
        expect(links[0].textContent).toEqual(props.paymentName);
        expect(links[0].getAttribute('href')).toContain(
            getCustomPaymentDetail(props.worksheetPaymentCustomId!)
        );
    });

    it('renders without link', () => {
        const props = {
            paymentName: 'Test Payment Name 2',
            referencePaymentTypeId: '2',
        };
        render(props);
        expect(screen.queryAllByRole('link').length).toEqual(0);
        expect(screen.getByText(props.paymentName)).toBeInTheDocument();
    });
});