96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { fireEvent, render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { Collapsible } from "../../../src/components/collapsible/index";
|
|
|
|
describe("Collapsible", () => {
|
|
it("content is hidden by default", () => {
|
|
render(() => (
|
|
<Collapsible>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Hidden</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
expect(screen.getByTestId("content")).toHaveAttribute("hidden");
|
|
});
|
|
|
|
it("content is shown when defaultOpen=true", () => {
|
|
render(() => (
|
|
<Collapsible defaultOpen>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Visible</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
expect(screen.getByTestId("content")).not.toHaveAttribute("hidden");
|
|
});
|
|
|
|
it("trigger click opens content", () => {
|
|
render(() => (
|
|
<Collapsible>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Content</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByTestId("content")).not.toHaveAttribute("hidden");
|
|
});
|
|
|
|
it("trigger click closes open content", () => {
|
|
render(() => (
|
|
<Collapsible defaultOpen>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Content</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByTestId("content")).toHaveAttribute("hidden");
|
|
});
|
|
|
|
it("trigger has aria-expanded reflecting open state", () => {
|
|
render(() => (
|
|
<Collapsible>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content>Content</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
expect(screen.getByRole("button").getAttribute("aria-expanded")).toBe("false");
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByRole("button").getAttribute("aria-expanded")).toBe("true");
|
|
});
|
|
|
|
it("trigger aria-controls matches content id", () => {
|
|
render(() => (
|
|
<Collapsible>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Content</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
const trigger = screen.getByRole("button");
|
|
const content = screen.getByTestId("content");
|
|
expect(trigger.getAttribute("aria-controls")).toBe(content.id);
|
|
});
|
|
|
|
it("disabled trigger does not toggle", () => {
|
|
render(() => (
|
|
<Collapsible disabled>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Content</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByTestId("content")).toHaveAttribute("hidden");
|
|
});
|
|
|
|
it("controlled: open=false keeps content hidden after click and calls onOpenChange", () => {
|
|
const onOpenChange = vi.fn();
|
|
render(() => (
|
|
<Collapsible open={false} onOpenChange={onOpenChange}>
|
|
<Collapsible.Trigger>Toggle</Collapsible.Trigger>
|
|
<Collapsible.Content data-testid="content">Content</Collapsible.Content>
|
|
</Collapsible>
|
|
));
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByTestId("content")).toHaveAttribute("hidden");
|
|
expect(onOpenChange).toHaveBeenCalledWith(true);
|
|
});
|
|
});
|