0155749028
Adds aria and keyboard interaction tests for the Dialog component (10 new tests, 53 total passing). Also fixes DialogContent to render with the `open` attribute so the <dialog> element is accessible in JSDOM.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { fireEvent, render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Dialog } from "../../../src/components/dialog/index";
|
|
|
|
describe("Dialog keyboard", () => {
|
|
it("closes on Escape key", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
<Dialog.Close>Close</Dialog.Close>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
fireEvent.keyDown(document, { key: "Escape" });
|
|
expect(screen.queryByRole("dialog")).toBeNull();
|
|
});
|
|
|
|
it("Trigger click opens dialog", () => {
|
|
render(() => (
|
|
<Dialog>
|
|
<Dialog.Trigger>Open</Dialog.Trigger>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.queryByRole("dialog")).toBeNull();
|
|
fireEvent.click(screen.getByText("Open"));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
});
|
|
|
|
it("Close button closes dialog", () => {
|
|
render(() => (
|
|
<Dialog defaultOpen>
|
|
<Dialog.Content>
|
|
<Dialog.Title>Title</Dialog.Title>
|
|
<Dialog.Close>Close</Dialog.Close>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
));
|
|
expect(screen.getByRole("dialog")).toBeTruthy();
|
|
fireEvent.click(screen.getByText("Close"));
|
|
expect(screen.queryByRole("dialog")).toBeNull();
|
|
});
|
|
});
|