import React from 'react';
import { screen, render } from '@testing-library/react';
import { renderWithReduxRouter } from '../../testUtils';
import ImagesTable from '../../../SmartComponents/ImagesTable/ImagesTable';
import ImageBuildStatus from '../../../PresentationalComponents/ImagesTable/ImageBuildStatus';
import Upload from '../../../PresentationalComponents/ImagesTable/Upload';
import '@testing-library/jest-dom';

const store = {
    composes: {
        'c1cfa347-4c37-49b5-8e73-6aa1d1746cfa': {
            image_status: {
                status: 'running',
                upload_status: {
                    type: 'aws',
                    status: 'success'
                }
            },
            distribution: 'fedora-31',
            architecture: 'x86_64',
            image_type: 'ami',
            upload_type: 'aws',
        },
        '61b0effa-c901-4ee5-86b9-2010b47f1b22': {
            image_status: {
                status: 'failure',
                upload_status: {
                    type: 'gcp',
                    status: 'failure'
                }
            },
            distribution: 'fedora-31',
            architecture: 'x86_64',
            image_type: 'vhd',
            upload_type: 'gcp',
        },
        '551de6f6-1533-4b46-a69f-7924051f9bc6': {
            image_status: {
                status: 'running',
                upload_status: {
                    type: 'aws',
                    status: ''
                }
            },
            distribution: 'fedora-31',
            architecture: 'x86_64',
            image_type: 'vhd',
            upload_type: 'azure',
        }
    }
};

describe('Images Table', () => {
    beforeEach(() => {
        renderWithReduxRouter(<ImagesTable />, store);
    });

    test('render ImagesTable', () => {
        // check action loads
        screen.getByTestId('create-image-action');

        // make sure the empty-state message isn't present
        const emptyState = screen.queryByTestId('empty-state');
        expect(emptyState).not.toBeInTheDocument();

        // check table
        const table = screen.getByTestId('images-table');
        expect(table.rows).toHaveLength(4);
        for (const row of table.rows) {
            const col1 = row.cells[0].textContent;
            if (col1 === 'Image') // skip header
            {continue;}

            const compose = store.composes[col1];
            expect(compose).toBeTruthy();

            // render the expected <ImageBuildStatus /> and compare the text content
            let testElement = document.createElement('testElement');
            render(<ImageBuildStatus status={ compose.image_status.status } />, { container: testElement });
            expect(row.cells[3]).toHaveTextContent(testElement.textContent);

            // do the same for the upload/target column
            render(<Upload uploadType={ compose.upload_type } />, { container: testElement });
            expect(row.cells[1]).toHaveTextContent(testElement.textContent);
        }
    });
});