@octopusdeploy/design-system-components/dist/src/components/Tooltip/__testing__/Tooltip.spec.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const vitest_axe_1 = require("vitest-axe");
const Tooltip_1 = require("../Tooltip");
(0, vitest_1.describe)("Tooltip", () => {
    (0, vitest_1.it)("is accessible", async () => {
        const component = renderTooltip({ content: "test", children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "anchor" }) });
        await component.shouldBeAccessible();
    });
    (0, vitest_1.it)("should show tooltip when mouse hover over", async () => {
        const tooltipContent = "test";
        const component = renderTooltip({ content: tooltipContent, children: (0, jsx_runtime_1.jsx)("button", { children: "hover over me" }) });
        const containerElement = testing_library_1.domQueries.getButton("hover over me");
        await component.shouldShowTooltipWhenHoverContainerElement(tooltipContent, containerElement);
    });
});
function renderTooltip({ content, children }) {
    const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: content, children: children }));
    return getTooltipInteractions(container);
}
function getTooltipInteractions(container) {
    return {
        shouldBeAccessible: async () => {
            const results = await (0, vitest_axe_1.axe)(container);
            (0, vitest_1.expect)(results).toHaveNoViolations();
        },
        shouldShowTooltipWhenHoverContainerElement: async (content, containerElement) => {
            await containerElement.hover();
            (0, vitest_1.expect)(await react_1.screen.findByText(content)).toBeInTheDocument();
        },
    };
}