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

describe('<TopAudienceByAge>', () => {
    const defaultProps: Props = {
        series: [{
            _17: { value: 10, percentValue: 0.1 },
            _18_22: { value: 20, percentValue: 0.2 },
            _23_27: { value: 30, percentValue: 0.3 },
            _28_34: { value: 5, percentValue: 0.05 },
            _35_44: { value: 5, percentValue: 0.05 },
            _45_59: { value: 10, percentValue: 0.1 },
            _60_: { value: 10, percentValue: 0.1 },
            UNKNOWN: { value: 10, percentValue: 0.1 },
            total: 100
        }]
    };
    const renderMocked = (props?: Partial<Props>) => render(<TopAudienceByAge {...defaultProps} {...props} />);

    test('renders empty TopAudienceByAge', () => {
        const component = renderMocked({ series: [] });
        const topAudienceByAge = component.getByTestId(TEST_ID);

        expect(topAudienceByAge).toBeVisible();
    });

    test('renders TopAudienceByAge default graph', () => {
        const component = renderMocked();
        const { container } = component;
        const series = container.getElementsByClassName('highcharts-data-labels')[0];
        const nodeValues = ['10%', '20%', '30%', '5%', '5%', '10%', '10%', '10%'];

        expect(series).toBeVisible();
        expect(series.childElementCount).toBe(8);
        nodeValues.forEach((value, index) => {
            const valueNode = series.childNodes.item(index);
            expect(valueNode).toBeVisible();
            expect(valueNode.textContent).toBe(value);
        });
    });

    test('renders data unavailable placeholder over empty graph', () => {
        const component = renderMocked({
            series: [{
                _17: { value: 0, percentValue: 0 },
                _18_22: { value: 0, percentValue: 0 },
                _23_27: { value: 0, percentValue: 0 },
                _28_34: { value: 0, percentValue: 0 },
                _35_44: { value: 0, percentValue: 0 },
                _45_59: { value: 0, percentValue: 0 },
                _60_: { value: 0, percentValue: 0 },
                UNKNOWN: { value: 0, percentValue: 0 },
                total: 0
            }]
        });
        const { container } = component;
        const placeholder = container.getElementsByClassName(`${TEST_ID}-empty-content`)[0];
        const series = container.getElementsByClassName('highcharts-data-labels')[0];

        expect(placeholder).toBeVisible();
        expect(series).toBeVisible();
    });
});