import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { NrDeliveryJobStatus } from 'src/data/globalTypes';
import { DeliveryJobs } from 'src/data/queries';
import JobsTable, { CLASSNAME } from '../jobsTable';

const jobsData: DeliveryJobs = {
    cmo: 'PPL',
    contributorId: '705503f2-7dd6-426d-9637-efd26900d5ec',
    jobId: '767',
    lastUpdated: '2022-04-12T09:15:49.257Z',
    lastUpdatedBy: 'Someone',
    numberOfClaims: 235,
    name: 'Pineda, Allan',
    orderId: '187',
    orderCreatedAt: '2022-04-09T09:15:49.257Z',
    orderCreatedBy: 'Person',
    status: NrDeliveryJobStatus.COMPLETE,
};

describe('<JobsTable>', () => {
    const sortData = jest.fn();
    const renderTable = (data: DeliveryJobs[]) =>
        renderInAppContext(
            <JobsTable
                loading={false}
                jobs={data}
                totalJobs={1}
                onSort={sortData}
                sortBy={{ key: 'lastUpdated', direction: 'desc' }}
                onClearFilters={jest.fn()}
                filtersApplied={false}
                page={0}
                pageSize={20}
                handlePageChange={jest.fn()}
                handlePageSizeChange={jest.fn()}
            />
        );

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

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

    test('renders total count of jobs', () => {
        const { container } = renderTable([jobsData]);
        const jobsCount = container.querySelector('#SuitePaginationTooltip');
        expect(jobsCount).toBeVisible();
        expect(jobsCount).toHaveTextContent('1');
    });

    test('renders correct row', () => {
        const { container } = renderTable([jobsData]);
        const element = container.getElementsByClassName('cell-jobId').item(0);
        expect(element).toHaveTextContent('767');
    });

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

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

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