import React from 'react';
import { render, screen } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { MetadataList, MetadataListProps } from '../metadataList';

describe('<MetadataList>', () => {
    const renderComponent = (props: MetadataListProps) => render(<MetadataList {...props} />);

    const defaultProps: MetadataListProps = { items: [{ label: 'test', value: 'val' }] };

    testComponent(MetadataList, defaultProps as MetadataListProps);

    test('applies style', () => {
        renderComponent({ ...defaultProps, style: { marginTop: 10 } });
        expect(screen.getByTestId('MetadataList')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders list', () => {
        renderComponent(defaultProps);

        const list = screen.getByTestId('MetadataList');
        expect(list).toBeInTheDocument();
        expect(screen.queryAllByRole('separator')).toHaveLength(0);
    });

    test('renders items', () => {
        const labelA = 'label-a';
        const valueA = <span>valueA</span>;
        const labelB = 'label-b';
        const valueB = 'valueB';
        renderComponent({
            items: [
                { label: labelA, value: valueA },
                { label: labelB, value: valueB },
            ],
        });

        expect(screen.getByText(labelA)).toBeInTheDocument();
        expect(screen.getByText(labelB)).toBeInTheDocument();
        expect(screen.getByText('valueA')).toBeInTheDocument();
        expect(screen.getByText('valueB')).toBeInTheDocument();
        expect(screen.getAllByRole('separator')).toHaveLength(1);
    });

    test('rendered items have class/testids', () => {
        const labelA = 'label-a';
        const labelB = 'label-b';
        renderComponent({
            items: [
                {
                    label: labelA,
                    value: labelA,
                    className: `${labelA}-class`,
                    testId: `${labelA}-testid`,
                },
                {
                    label: labelB,
                    value: labelB,
                    className: `${labelB}-class`,
                    testId: `${labelB}-testid`,
                },
            ],
        });

        expect(screen.getByTestId('label-a-testid')).toHaveClass('label-a-class');
        expect(screen.getByTestId('label-b-testid')).toHaveClass('label-b-class');
    });

    test('renders children', () => {
        const labelA = 'label-a';
        const labelB = 'label-b';
        const labelC = 'label-c';
        const labelD = 'label-d';
        render(
            <MetadataList>
                <span>{labelA}</span>
                <span>{labelB}</span>
                <span>{labelC}</span>
                <span>{labelD}</span>
            </MetadataList>
        );

        expect(screen.getByText(labelA)).toBeInTheDocument();
        expect(screen.getByText(labelB)).toBeInTheDocument();
        expect(screen.getByText(labelC)).toBeInTheDocument();
        expect(screen.getByText(labelD)).toBeInTheDocument();
        expect(screen.getAllByRole('separator')).toHaveLength(3);
    });
});