import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { contributorList } from 'src/__fixtures__/graphql/contributors';
import {
    CONTRIBUTOR_SCHEDULE_HEADERS,
    ContributorScheduleTable,
    ContributorScheduleTablePropTypes,
} from 'src/components/contributor-schedule-list/contributor-schedule-table';
import { SEARCH_NO_RESULTS_FOUND } from 'src/constants';

describe('<ContributorScheduleTable>', () => {
    const render = (props: ContributorScheduleTablePropTypes) =>
        renderInAppContext(<ContributorScheduleTable {...props} />);
    const { contributors } = contributorList.nrContributors;
    const props = {
        contributorList:
            contributors as ContributorScheduleTablePropTypes['contributorList'],
        isLoading: false,
        renderPagination: jest.fn(),
        filterValues: { limit: 1, offset: 0 },
        setFilterValues: jest.fn(),
    };

    it('renders a table with headers', () => {
        render(props);
        CONTRIBUTOR_SCHEDULE_HEADERS.forEach((header: any) =>
            expect(screen.getByText(header.title)).toBeDefined()
        );
    });

    it('renders a list of contributors', () => {
        render(props);
        const bodyText: any = [];
        document
            .querySelectorAll('div.GridTable-cell')
            .forEach((body: any) => bodyText.push(body.textContent));
        expect(bodyText).toEqual([
            'Abbott, Judith1ec7c1bf-2318-4052-9406-a3e35a620bd3',
            '25',
            'something - (3)alt something - (2)Auto add new',
            'Thomas Edward Yorke3be31516-bde0-4968-9fcf-421ebfc40a8f',
            '0',
            'something - (1)',
            'Zundel, Klaus63e4d0fd-51ae-417b-9aa1-fdb6a9c3bf9b',
            '21',
            '',
            'Haim, Este Arielle9ad6e907-ce55-4429-ba7e-70fb90391f8f',
            '21',
            '',
        ]);
    });

    it('renders a message when there are no contributors', () => {
        render({ ...props, contributorList: [] });
        expect(screen.getByText(SEARCH_NO_RESULTS_FOUND)).toBeDefined();
    });

    it('on click of sorting icon', () => {
        render(props);
        const sortIconsDown = screen.getAllByTestId('ArrowDownGlyphIcon');
        expect(sortIconsDown).toBeDefined();
        expect(sortIconsDown.length).toEqual(2);

        fireEvent.click(sortIconsDown[0]);
        const sortUpIcons = screen.getAllByTestId('ArrowUpGlyphIcon');
        expect(sortUpIcons).toBeDefined();

        fireEvent.click(sortUpIcons[0]);
        expect(sortIconsDown).toBeDefined();
    });

    it('renders link to contributor detail', () => {
        render(props);

        const contributorLinks = screen.getAllByRole('link');
        contributorLinks.forEach((contributorLink, i) => {
            expect(contributorLink.textContent).toEqual(
                contributors[i]['name']
            );
            expect(contributorLink.getAttribute('href')).toContain(
                `/contributor/${contributors[i]['id']}`
            );
        });
    });
});