adilallo
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import "@testing-library/jest-dom/vitest";
|
|
import Tooltip from "../../app/components/Tooltip";
|
|
import { componentTestSuite } from "../utils/componentTestSuite";
|
|
|
|
type TooltipProps = React.ComponentProps<typeof Tooltip>;
|
|
|
|
componentTestSuite<TooltipProps>({
|
|
component: Tooltip,
|
|
name: "Tooltip",
|
|
props: {
|
|
children: <button>Hover me</button>,
|
|
text: "Tooltip text",
|
|
} as TooltipProps,
|
|
requiredProps: ["children", "text"],
|
|
optionalProps: {
|
|
position: "bottom",
|
|
disabled: true,
|
|
},
|
|
primaryRole: "button",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: true,
|
|
disabledState: false, // Tooltip disabled state is handled in behavioral tests
|
|
errorState: false,
|
|
},
|
|
});
|
|
|
|
describe("Tooltip (behavioral tests)", () => {
|
|
it("shows tooltip on hover", async () => {
|
|
const user = userEvent.setup();
|
|
render(
|
|
<Tooltip text="Tooltip text">
|
|
<button>Hover me</button>
|
|
</Tooltip>,
|
|
);
|
|
|
|
const button = screen.getByRole("button", { name: "Hover me" });
|
|
await user.hover(button);
|
|
|
|
const tooltip = screen.getByRole("tooltip");
|
|
expect(tooltip).toBeInTheDocument();
|
|
expect(tooltip).toHaveTextContent("Tooltip text");
|
|
});
|
|
|
|
it("hides tooltip when disabled", () => {
|
|
render(
|
|
<Tooltip text="Tooltip text" disabled>
|
|
<button>Hover me</button>
|
|
</Tooltip>,
|
|
);
|
|
|
|
const tooltip = screen.queryByRole("tooltip");
|
|
expect(tooltip).not.toBeInTheDocument();
|
|
});
|
|
});
|