import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import SourceDropdownContainer from './SourceDropdownContainer';

describe('SourceDropdownContainer', () => {
    it('Render a dropdown container with child component(s)', async () => {
        const children = <span id="dropdown-content">Hello world</span>;

        const { baseElement } = render(
            <SourceDropdownContainer isCollapsed={false} onExpand={jest.fn()}>
                {children}
            </SourceDropdownContainer>,
        );

        const content = baseElement.querySelector(`#dropdown-content`) as HTMLSpanElement;
        expect(content).toBeTruthy();
    });

    it('Render collapsed state with single button to re-expand no children', async () => {
        const children = <span id="dropdown-content">Hello world</span>;

        const { baseElement } = render(
            <SourceDropdownContainer isCollapsed={true} onExpand={jest.fn()}>
                {children}
            </SourceDropdownContainer>,
        );

        const content = baseElement.querySelector(`#dropdown-content`) as HTMLSpanElement;
        expect(content).toBeFalsy();

        const expandButton = screen.getByRole('button', { name: /Expand browse options/i });
        expect(expandButton).toBeTruthy();
    });

    it('Will envoke onExpand callback function when expand button is pressed', async () => {
        const onExpand = jest.fn();
        const children = <span id="dropdown-content">Hello world</span>;

        render(
            <SourceDropdownContainer isCollapsed={true} onExpand={onExpand}>
                {children}
            </SourceDropdownContainer>,
        );

        const expandButton = screen.getByRole('button', { name: /Expand browse options/i });
        fireEvent.click(expandButton);

        expect(onExpand).toHaveBeenCalled();
    });
});