import React, { PropsWithChildren } from 'react';
import { fireEvent, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import OverlayTriggerPopover, {
    CLASS_NAME,
    Props,
} from '../overlayTriggerPopover';

describe('<OverlayTriggerPopover>', () => {
    const defaultProps: PropsWithChildren<Props> = {
        id: 'popover-content-123',
        PopoverContent: () => (
            <div data-testid="popoverContent">im the passed content</div>
        ),
        children: (
            <div data-testid="triggerComponent">
                hover to show popover content
            </div>
        ),
    };

    const renderComponent = (customProps?: Partial<Props>) =>
        renderInAppContext(
            <OverlayTriggerPopover {...defaultProps} {...customProps} />
        );

    test('renders incoming trigger element and popover content on hover', async () => {
        const { getByTestId } = renderComponent();

        const wrapperEl = getByTestId(`${CLASS_NAME}-Wrapper`);
        const childEl = getByTestId('triggerComponent');

        expect(wrapperEl).toBeInTheDocument();
        expect(childEl).toBeInTheDocument();

        if (childEl) fireEvent.mouseEnter(childEl);

        const popoverContentEl = getByTestId('popoverContent');

        await waitFor(() => {
            expect(popoverContentEl).toBeInTheDocument();
        });
        expect(popoverContentEl).toHaveTextContent('im the passed content');
    });
});