import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { testContribution as contributionsData } from 'lib/mockNrContributionsData';
import { CatalogContributions } from 'src/data/queries/contributions';
import CatalogTable, { CLASSNAME } from '../catalogTable';

describe('<CatalogTable>', () => {
    const sortData = jest.fn();
    const renderTable = (data: CatalogContributions[]) =>
        renderInAppContext(
            <CatalogTable
                loading={false}
                contributions={data}
                totalContributions={1}
                onClearFilters={jest.fn()}
                onSort={sortData}
                sortBy={{ key: 'lastModifiedAt', direction: 'desc' }}
                filtersApplied={false}
                page={0}
                pageSize={20}
                handlePageChange={jest.fn()}
                handlePageSizeChange={jest.fn()}
            />
        );

    test('has classname', () => {
        const { container } = renderTable([contributionsData]);
        const classname = container.getElementsByClassName(CLASSNAME).item(0);

        expect(classname).toBeVisible();
    });

    test('renders default sorted column', () => {
        const { container } = renderTable([contributionsData]);
        const lastModCell = container
            .getElementsByClassName('cell-lastModifiedAt')
            .item(0);

        expect(lastModCell && lastModCell.classList).toContain('sorted');
    });

    test('invokes sortData when column header clicked to sort column', () => {
        const { container } = renderTable([contributionsData]);
        const releaseYearCol = container.querySelector('.col-firstReleaseYear');

        if (releaseYearCol) fireEvent.click(releaseYearCol);

        expect(sortData).toHaveBeenCalledWith([
            { direction: 'desc', key: 'firstReleaseYear' },
        ]);
    });

    test('renders total count of contributions', () => {
        const { container } = renderTable([contributionsData]);
        const contributionsCount = container.querySelector(
            '#SuitePaginationTooltip'
        );

        expect(contributionsCount).toBeVisible();
        expect(contributionsCount).toHaveTextContent('1');
    });

    test('formats lastModifiedAt date correctly', () => {
        const { container } = renderTable([contributionsData]);
        const lastModifiedAt = container
            .getElementsByClassName('cell-lastModifiedAt')
            .item(0);
        expect(lastModifiedAt).toHaveTextContent('12 Apr 2022');
    });
});