import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import TopCountriesHeader, { Props, CLASSNAME } from '../Header';

describe('<TopCountriesHeader>', () => {
    const defaultProps: Props = {
        index: 1,
        title: 'Test Title',
    };

    const renderMocked = (props?: Partial<Props>) =>
        render(<TopCountriesHeader {...defaultProps} {...props} />);

    test('renders TopCountriesHeader', () => {
        const component = renderMocked();
        const { container } = component;
        const headerComponent = container.getElementsByClassName(CLASSNAME)[0];
        const color = container.getElementsByClassName('bg-dataviz-1')[0];
        const title = component.getByText('Test Title');

        expect(headerComponent).toBeVisible();
        expect(title).toBeVisible();
        expect(color).toBeVisible();
    });
});