@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
56 lines (55 loc) • 2.77 kB
JavaScript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Button } from '../Button';
import { Tooltip } from './index';
describe('Tooltip', () => {
describe('Keyboard interactions', () => {
it('should display when target is focused with `Tab`', async () => {
const user = userEvent.setup();
render(React.createElement(TooltipTests, null));
await user.tab();
const tooltip = tooltips()[0];
expect(tooltip).not.toHaveClass('invisible');
});
it('should display when `Space` is pressed while target is focused', async () => {
const user = userEvent.setup();
render(React.createElement(TooltipTests, null));
const target = targets()[1];
const tooltip = tooltips()[1];
await user.click(target);
expect(tooltip).not.toHaveClass('invisible');
});
});
describe('Rendering', () => {
it('should invert placement so it stays on screen if it would normally be placed off screen', async () => {
const user = userEvent.setup();
render(React.createElement(TooltipTests, null));
let tooltip = tooltips()[2];
let arrow = arrows()[2];
await user.click(tooltip);
expect(arrow).toHaveStyle('top: -4px');
tooltip = tooltips()[3];
arrow = arrows()[3];
await user.click(tooltip);
expect(arrow).toHaveStyle('left: -4px');
});
});
});
const TooltipTests = () => {
return (React.createElement("div", null,
React.createElement(Tooltip, { content: "Tooltip content" },
React.createElement(Button, null, "Default tooltip")),
React.createElement(Tooltip, { content: "Tooltip content", trigger: "click" },
React.createElement(Button, null, "Click tooltip")),
React.createElement(Tooltip, { content: "Tooltip content", placement: "bottom", trigger: "click" },
React.createElement(Button, null, "Bottom placed tooltip")),
React.createElement(Tooltip, { content: "Tooltip content", placement: "right", trigger: "click" },
React.createElement(Button, null, "Right placed tooltip")),
React.createElement(Tooltip, { content: "Tooltip content", placement: "auto", trigger: "click" },
React.createElement(Button, null, "Auto placed tooltip"))));
};
const arrows = () => screen.getAllByTestId('flowbite-tooltip-arrow');
const targets = () => screen.getAllByTestId('flowbite-tooltip-target');
const tooltips = () => screen.getAllByTestId('flowbite-tooltip');