8f075f1792
Skeleton, Breadcrumbs, Link, Button, Image, Meter, NumberField Floating components: Tooltip (hover/focus), Popover (click, with focus trap and dismiss), HoverCard (hover with safe area). Simple components: Alert (role=alert), Badge (role=status), Skeleton (loading placeholder with data attributes). Navigation: Breadcrumbs (nav>ol>li with separators), Link (accessible anchor with disabled), Button (with disabled click suppression). Data/Form: Image (Img+Fallback with loading status), Meter (like Progress for known ranges), NumberField (spinbutton with inc/dec). 302 tests across 46 files, typecheck clean, build produces 176 files.
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { fireEvent, render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { HoverCard } from "../../../src/components/hover-card/index";
|
|
|
|
describe("HoverCard", () => {
|
|
it("content not rendered when closed", () => {
|
|
render(() => (
|
|
<HoverCard>
|
|
<HoverCard.Trigger>Hover</HoverCard.Trigger>
|
|
<HoverCard.Content data-testid="content">Details</HoverCard.Content>
|
|
</HoverCard>
|
|
));
|
|
expect(screen.queryByTestId("content")).toBeNull();
|
|
});
|
|
it("opens with defaultOpen", () => {
|
|
render(() => (
|
|
<HoverCard defaultOpen>
|
|
<HoverCard.Trigger>Hover</HoverCard.Trigger>
|
|
<HoverCard.Content data-testid="content">Details</HoverCard.Content>
|
|
</HoverCard>
|
|
));
|
|
expect(screen.getByTestId("content")).toBeTruthy();
|
|
});
|
|
it("closes on Escape", () => {
|
|
render(() => (
|
|
<HoverCard defaultOpen>
|
|
<HoverCard.Trigger>Hover</HoverCard.Trigger>
|
|
<HoverCard.Content data-testid="content">Details</HoverCard.Content>
|
|
</HoverCard>
|
|
));
|
|
fireEvent.keyDown(document, { key: "Escape" });
|
|
expect(screen.queryByTestId("content")).toBeNull();
|
|
});
|
|
it("content has data-state", () => {
|
|
render(() => (
|
|
<HoverCard defaultOpen>
|
|
<HoverCard.Trigger>Hover</HoverCard.Trigger>
|
|
<HoverCard.Content data-testid="content">Details</HoverCard.Content>
|
|
</HoverCard>
|
|
));
|
|
expect(screen.getByTestId("content").getAttribute("data-state")).toBe("open");
|
|
});
|
|
it("controlled mode", () => {
|
|
render(() => (
|
|
<HoverCard open={true} onOpenChange={() => {}}>
|
|
<HoverCard.Trigger>Hover</HoverCard.Trigger>
|
|
<HoverCard.Content data-testid="content">Details</HoverCard.Content>
|
|
</HoverCard>
|
|
));
|
|
expect(screen.getByTestId("content")).toBeTruthy();
|
|
});
|
|
it("content is positioned", () => {
|
|
render(() => (
|
|
<HoverCard defaultOpen>
|
|
<HoverCard.Trigger>Hover</HoverCard.Trigger>
|
|
<HoverCard.Content data-testid="content">Details</HoverCard.Content>
|
|
</HoverCard>
|
|
));
|
|
expect(screen.getByTestId("content").style.position).toBeTruthy();
|
|
});
|
|
});
|