78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { fireEvent, render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Popover } from "../../../src/components/popover/index";
|
|
|
|
describe("Popover", () => {
|
|
it("content has role=dialog when open", () => {
|
|
render(() => (
|
|
<Popover defaultOpen>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content>Content</Popover.Content>
|
|
</Popover>
|
|
));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
});
|
|
it("trigger has correct ARIA", () => {
|
|
render(() => (
|
|
<Popover>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content>Content</Popover.Content>
|
|
</Popover>
|
|
));
|
|
const trigger = screen.getByText("Open");
|
|
expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
|
|
expect(trigger.getAttribute("aria-expanded")).toBe("false");
|
|
});
|
|
it("click trigger opens", () => {
|
|
render(() => (
|
|
<Popover>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content>Content</Popover.Content>
|
|
</Popover>
|
|
));
|
|
fireEvent.click(screen.getByText("Open"));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
});
|
|
it("Escape closes", () => {
|
|
render(() => (
|
|
<Popover defaultOpen>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content>Content</Popover.Content>
|
|
</Popover>
|
|
));
|
|
fireEvent.keyDown(document, { key: "Escape" });
|
|
expect(screen.queryByRole("dialog")).toBeNull();
|
|
});
|
|
it("Close button closes", () => {
|
|
render(() => (
|
|
<Popover defaultOpen>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content>
|
|
<Popover.Close>X</Popover.Close>
|
|
Content
|
|
</Popover.Content>
|
|
</Popover>
|
|
));
|
|
fireEvent.click(screen.getByText("X"));
|
|
expect(screen.queryByRole("dialog")).toBeNull();
|
|
});
|
|
it("controlled mode", () => {
|
|
render(() => (
|
|
<Popover open={true} onOpenChange={() => {}}>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content>Content</Popover.Content>
|
|
</Popover>
|
|
));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
});
|
|
it("content is positioned", () => {
|
|
render(() => (
|
|
<Popover defaultOpen>
|
|
<Popover.Trigger>Open</Popover.Trigger>
|
|
<Popover.Content data-testid="content">Content</Popover.Content>
|
|
</Popover>
|
|
));
|
|
expect(screen.getByTestId("content").style.position).toBeTruthy();
|
|
});
|
|
});
|