import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';

import {
    RunTimerTooltip,
    RunTimerTooltipProps,
} from 'src/components/shared/run-timer-tooltip';

describe('<RunTimerTooltip>', () => {
    const defaultProps: RunTimerTooltipProps = {
        children: <div>RUN TIMER</div>,
        avgRunTime: 100.23,
        p95RunningTime: 200.32,
    };

    const render = (props: RunTimerTooltipProps = defaultProps) =>
        renderInAppContext(<RunTimerTooltip {...props} />);

    it('renders with default props', async () => {
        render();

        const tooltip = screen.getByTestId('RunTimerTooltip');

        expect(tooltip).toHaveTextContent('RUN TIMER');

        fireEvent.mouseOver(tooltip);

        const message = await screen.findByRole('tooltip');

        expect(message).toHaveTextContent(
            'This process has been running for 0s.'
        );
        expect(message).toHaveTextContent(
            'It usually takes between 100s and 200s to complete.'
        );
    });

    it('renders with a specific `testId`', () => {
        render({
            ...defaultProps,
            testId: 'CustomRunTimerTooltip',
        });

        const tooltip = screen.getByTestId('CustomRunTimerTooltip');

        expect(tooltip).toHaveTextContent('RUN TIMER');
    });

    it('calls `onProgress`', async () => {
        const onProgressMock = jest.fn();

        render({
            ...defaultProps,
            onProgress: onProgressMock,
        });

        await waitFor(() => {
            expect(onProgressMock).toHaveBeenCalled();
        });
    });
});