import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import SelectTruncatedText, {
    SelectTruncatedTextProps,
    TooltipPlacement,
} from 'src/components/shared/select-truncated-text';

describe('<SelectTruncatedText>', () => {
    const render = (props: SelectTruncatedTextProps) =>
        renderInAppContext(<SelectTruncatedText {...props} />);

    it("on hover doesn't render tooltip when text is not truncated", () => {
        const props = {
            maxWidth: 300,
            testId: 'SelectTruncatedText-tooltip',
            text: 'Testing',
        };
        render(props);

        const element = screen.getByText('Testing');
        fireEvent.mouseEnter(element);

        const tooltip = screen.queryByRole('tooltip');
        expect(tooltip).toBeNull();
    });

    it('on hover renders tooltip when text is truncated', async () => {
        const props = {
            maxWidth: 45,
            testId: 'SelectTruncatedText-tooltip',
            text: 'AWAL Manual Adjustments Nov 24 - Lil Peep Reclass.xlsx',
        };
        render(props);
        const element = await screen.findByText(
            'AWAL Manual Adjustments Nov 24 - Lil Peep Reclass.xlsx'
        );
        fireEvent.mouseEnter(element);

        const tooltip = await screen.findByTestId(
            'SelectTruncatedText-tooltip'
        );
        expect(tooltip).toBeVisible();
    });

    const placements: TooltipPlacement[] = ['right', 'left', 'bottom', 'top'];

    describe.each(placements)('when placement is set to "%s"', placement => {
        it('renders tooltip in that position', async () => {
            const props = {
                text: 'AWAL Manual Adjustments Nov 24 - Lil Peep Reclass.xlsx',
                maxWidth: 300,
                placement,
            };
            render(props);

            const element = await screen.findByText(
                'AWAL Manual Adjustments Nov 24 - Lil Peep Reclass.xlsx'
            );
            fireEvent.mouseEnter(element);

            const tooltip = await screen.findByTestId('Tooltip');
            expect(tooltip).toHaveClass('Tooltip');
        });
    });
});