import '@testing-library/jest-dom/extend-expect';
import renderWithProvider from 'lib/testing/provider';
import { mockQuery } from 'lib/testing/mocks';
import TopAudience, { TEST_ID } from '../TopAudience';
import { TEST_ID as TEST_ID_BY_AGE } from '../byAge/TopAudienceByAge';
import { TEST_ID as TEST_ID_BY_GENDER } from '../byGender/TopAudienceByGender';

describe('<TopAudience>', () => {
    const selectedSongIds = ['CODE1', 'CODE2'];
    const renderMocked = async () => {
        const container = await renderWithProvider(TopAudience, {
            filter: { selectedSongIds },
            mocks: selectedSongIds.map(isrc =>
                mockQuery('SoundRecordingMetadataQuery', {
                    variables: { isrc }
                }))
        });

        return container;
    };

    test('renders TopAudience', async () => {
        const component = await renderMocked();
        const topAudience = component.getByTestId(TEST_ID);
        const chartByAge = component.getByTestId(TEST_ID_BY_AGE);
        const chartByGender = component.getByTestId(TEST_ID_BY_GENDER);

        expect(topAudience).toBeVisible();
        expect(chartByAge).toBeVisible();
        expect(chartByGender).toBeVisible();
    });
    test('renders charts row', async () => {
        const { container } = await renderMocked();
        const charts = container.getElementsByClassName(`${TEST_ID}-charts`);

        expect(charts.item(0)).toBeVisible();
    });
});