import React from 'react';
import { render } from '@testing-library/react';
import Segment from '../../../segment';
import { MainNavToggle, Props } from '../mainNavToggle';

vi.mock('../../../segment');

describe('<MainNavToggle>', () => {
    const defaultProps: Props = {
        onChange: vi.fn(),
        collapsed: false,
    };

    beforeEach(() => {
        vi.spyOn(Segment, 'trackEvent');
    });

    afterEach(() => {
        vi.resetAllMocks();
    });

    const renderComponent = (props: Partial<Props>) =>
        render(<MainNavToggle {...defaultProps} {...props} />);

    test('renders its default state', () => {
        const { getByTestId } = renderComponent({});

        expect(getByTestId('MainNavToggle')).toBeInTheDocument();
        expect(getByTestId('MainNavToggle-button')).toBeInTheDocument();
        expect(getByTestId('MainNavToggle')).not.toHaveClass('collapsed');
        expect(getByTestId('PlayPauseGlyphIcon')).toBeInTheDocument();
    });

    test('renders its collapsed state', () => {
        const { getByTestId } = renderComponent({ collapsed: true });

        expect(getByTestId('MainNavToggle')).toHaveClass('collapsed');
    });

    test('calls onChange when the button is clicked and changes its state', () => {
        const { getByTestId } = renderComponent({});

        expect(getByTestId('MainNavToggle')).not.toHaveClass('collapsed');

        getByTestId('MainNavToggle-button').click();

        expect(defaultProps.onChange).toHaveBeenCalled();
    });

    describe('calls Segment.trackEvent when the button is clicked', () => {
        test('when the menu is collapsed and set to be expanded', () => {
            const { getByTestId } = renderComponent({});

            getByTestId('MainNavToggle-button').click();

            expect(Segment.trackEvent).toHaveBeenCalledWith('Click - MainNavToggle - collapse');
        });

        test('when the menu is expanded and set to be collapsed', () => {
            const { getByTestId } = renderComponent({ collapsed: true });

            getByTestId('MainNavToggle-button').click();

            expect(Segment.trackEvent).toHaveBeenCalledWith('Click - MainNavToggle - expand');
        });
    });
});