import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { createRecentStatementPeriod } from 'lib/factories/statementPeriod';
import { capitalize } from 'lodash-es';
import { STATEMENT_PERIOD_STATUSES } from 'src/constants';
import { getStatementPeriodDetail } from 'src/urls/frontend-royalties';
import RecentStatementPeriods from '../recent-statement-periods';

describe('<RecentStatementPeriods />', () => {
    const status = STATEMENT_PERIOD_STATUSES.CURRENT;
    const recentPeriods = [createRecentStatementPeriod()];

    it('renders', () => {
        renderInAppContext(
            <RecentStatementPeriods recentPeriods={recentPeriods} />
        );
        expect(screen.getByText('Recent')).toBeDefined();
        const statementPeriodLink: any = screen.getByText(
            recentPeriods[0].statementPeriodName
        );
        expect(statementPeriodLink.href).toContain(
            `${getStatementPeriodDetail(recentPeriods[0].statementPeriodId)}`
        );
    });

    it('check statement Pperiod status', () => {
        renderInAppContext(
            <RecentStatementPeriods recentPeriods={recentPeriods} />
        );
        expect(screen.getByText(capitalize(status))).toBeDefined();
    });
});