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

describe('<TopAudienceByGender>', () => {
    const defaultProps: Props = {
        series: [{
            male: { value: 30, percentValue: 0.3 },
            female: { value: 40, percentValue: 0.4 },
            unknown: { value: 30, percentValue: 0.3 },
            total: 100
        }]
    };
    const renderMocked = (props?: Partial<Props>) => render(<TopAudienceByGender {...defaultProps} {...props} />);

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

        expect(topAudienceByGender).toBeVisible();
    });

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

        expect(series).toBeVisible();
        expect(series.childElementCount).toBe(3);
        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: [{
                male: { value: 0, percentValue: 0 },
                female: { 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();
    });
});