@kadconsulting/dry/dist/src/components/Tooltip/Tooltip.test.js

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import Tooltip from './Tooltip';
const defaultProps = {
    title: 'Test Title',
    text: 'Test Text',
    children: _jsx("button", { children: "Hover me" }),
    position: 'top',
    tooltipOn: false,
    useMouseOver: true,
};
describe('Tooltip', () => {
    it('renders children correctly', () => {
        render(_jsx(Tooltip, { ...defaultProps }));
        expect(screen.getByText('Hover me')).toBeInTheDocument();
    });
    it('shows tooltip on mouse enter and hides on mouse leave', async () => {
        render(_jsx(Tooltip, { ...defaultProps }));
        const button = screen.getByText('Hover me');
        fireEvent.mouseEnter(button);
        await waitFor(() => {
            expect(screen.getByText('Test Title')).toBeInTheDocument();
            expect(screen.getByText('Test Text')).toBeInTheDocument();
        });
        fireEvent.mouseLeave(button);
        await waitFor(() => {
            expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
            expect(screen.queryByText('Test Text')).not.toBeInTheDocument();
        });
    });
    it('does not show tooltip on mouse enter when useMouseOver is false', async () => {
        render(_jsx(Tooltip, { ...defaultProps, useMouseOver: false }));
        const button = screen.getByText('Hover me');
        fireEvent.mouseEnter(button);
        await waitFor(() => {
            expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
            expect(screen.queryByText('Test Text')).not.toBeInTheDocument();
        });
    });
    it('shows tooltip when tooltipOn is true', () => {
        render(_jsx(Tooltip, { ...defaultProps, tooltipOn: true }));
        expect(screen.getByText('Test Title')).toBeInTheDocument();
        expect(screen.getByText('Test Text')).toBeInTheDocument();
    });
    it('applies correct position classes', () => {
        const { rerender } = render(_jsx(Tooltip, { ...defaultProps, position: 'top' }));
        fireEvent.mouseEnter(screen.getByText('Hover me'));
        expect(screen.getByText('Test Title').parentElement?.parentElement).toHaveStyle('bottom: calc(100% + 8px)');
        rerender(_jsx(Tooltip, { ...defaultProps, position: 'bottom' }));
        expect(screen.getByText('Test Title').parentElement?.parentElement).toHaveStyle('top: calc(100% + 8px)');
    });
    it('applies correct arrow styles', () => {
        const { rerender } = render(_jsx(Tooltip, { ...defaultProps, position: 'left' }));
        fireEvent.mouseEnter(screen.getByText('Hover me'));
        const arrow = screen.getByText('Test Title').parentElement?.previousSibling;
        expect(arrow).toHaveStyle('right: -5px');
        rerender(_jsx(Tooltip, { ...defaultProps, position: 'right' }));
        expect(arrow).toHaveStyle('left: -5px');
    });
    it('handles long content correctly', () => {
        const longTitle = 'This is a very long title that should wrap';
        const longText = 'This is a very long text content that should also wrap properly within the tooltip';
        render(_jsx(Tooltip, { ...defaultProps, title: longTitle, text: longText, tooltipOn: true }));
        expect(screen.getByText(longTitle)).toBeInTheDocument();
        expect(screen.getByText(longText)).toBeInTheDocument();
    });
    it('works with custom content', () => {
        render(_jsx(Tooltip, { ...defaultProps, tooltipOn: true, children: _jsx("div", { "data-testid": 'custom-content', children: "Custom Content" }) }));
        expect(screen.getByTestId('custom-content')).toBeInTheDocument();
        expect(screen.getByText('Test Title')).toBeInTheDocument();
        expect(screen.getByText('Test Text')).toBeInTheDocument();
    });
});
//# sourceMappingURL=Tooltip.test.js.map