import React from 'react';
import { render as domRender } from '@testing-library/react';

import InfoTable, { Props, CLASSNAME, TESTID_TITLE } from '../infoTable';

describe('<InfoTable>', () => {
    const title = 'TABLE TITLE';
    const subject = {
        prop1: 'data1',
        prop2: { prop: 'data2' }
    };

    const render = (props: Props = {}) =>
        domRender(<InfoTable subject={subject} title={title} {...props} />);

    test('renders subject props', () => {
        const { getByText } = render();
        const prop1 = getByText(subject.prop1);
        const prop2 = getByText(JSON.stringify(subject.prop2, null, 2), {
            normalizer: val => val.split('\r').join()
        });

        expect(prop1).toBeVisible();
        expect(prop2).toBeVisible();
    });

    test('renders title', () => {
        const { getByText } = render();
        const element = getByText(title);
        expect(element).toBeVisible();
    });

    test('has classname', () => {
        const { container } = render();
        const element = container.getElementsByClassName(CLASSNAME).item(0);
        expect(element).toBeVisible();
    });

    describe('without title', () => {
        test('does not render title element', () => {
            const { queryByTestId } = render({ title: undefined });
            const element = queryByTestId(TESTID_TITLE);
            expect(element).toBeNull();
        });
    });
});