import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render, fireEvent, act } from '@testing-library/react';
import { DOWNLOADS, STREAMS } from 'src/constants/graphs';
import { SectionDataComponentProps, SectionDataProps } from 'src/definitions';
import HeaderMenu, { CLASSNAME, TERM_DOWNLOADS, TERM_STREAMS } from '../CompareSectionHeader';

describe('<CompareSectionHeader>', () => {
    let defaultProps: SectionDataComponentProps;
    const renderMocked = (userProps?: Partial<SectionDataComponentProps>) => {
        defaultProps = { sectionData: { selectedMetric: STREAMS }, setSectionData: jest.fn() };
        const component = render(<HeaderMenu {...defaultProps} {...userProps} />);
        return component;
    };

    test('renders CompareSectionHeader', () => {
        const component = renderMocked();
        const { container } = component;
        const headerComponent = container.getElementsByClassName(CLASSNAME)[0];
        const streamsButton = component.getByText(TERM_STREAMS);
        const downloadsButton = component.getByText(TERM_DOWNLOADS);

        expect(headerComponent).toBeVisible();
        expect(streamsButton).toBeVisible();
        expect(downloadsButton).toBeVisible();
    });

    test('handles Downloads button click', () => {
        const component = renderMocked();
        const downloadsButton = component.getByText(TERM_DOWNLOADS);

        act(() => {
            fireEvent.click(downloadsButton);
        });

        const expectedResult: Partial<SectionDataProps> = { selectedMetric: DOWNLOADS };
        expect(defaultProps.setSectionData).toHaveBeenCalledWith(expectedResult);
    });
});