@kadconsulting/dry
Version:
KAD Reusable Component Library
75 lines • 3.88 kB
JavaScript
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