import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render, waitForElement, getByText, fireEvent } from '@testing-library/react';
import { EMPTY_CHAR } from 'src/components/metric';
import TopPlaylistHeader, { Props, CLASSNAME, TERM_STREAMS } from '../Header';
// import { TEST_ID } from 'src/components/topAudience/TopAudience';

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

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

    test('renders TopPlaylistHeader', () => {
        const component = renderMocked();
        const { container } = component;
        const headerComponent = container.getElementsByClassName(CLASSNAME)[0];
        const color = container.getElementsByClassName('color-dataviz-1')[0];
        const title = component.getByText('Test Title');
        const percentage = component.getByText('74.2%');
        const streams = component.getByText(TERM_STREAMS);

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

    test('renders header with title on hover', () => {
        const component = renderMocked();
        const percentage = component.getByTitle('Test Title');
        expect(percentage).toBeVisible();
    });

    test('does not render percentage if value is incorrect', () => {
        const { container } = renderMocked({ value: NaN });
        const percentage = container.getElementsByClassName(`${CLASSNAME}-percentage`);
        expect(percentage.item(0)).toBeVisible();
        expect(percentage[0].textContent).toBe(EMPTY_CHAR);
    });

    test('renders help icon', () => {
        const { container } = renderMocked();
        const helpIcon = container.getElementsByClassName('frc-help-icon Icons-info');
        expect(helpIcon.length).toEqual(1);
    });

    test('help icon shows tooltip when hovered', async () => {
        const { container, baseElement } = renderMocked();
        const helpIcon = container.getElementsByClassName('frc-help-icon Icons-info');

        fireEvent.mouseOver(helpIcon[0]);
        const streams = await waitForElement(
            () => getByText(baseElement, 'topPlaylists.topPlaylistsToolTip'),
            { container }
        );
        expect(streams).toBeVisible();
    });
});