84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
describe("UI shape system", () => {
|
|
it("gives standard controls one shared radius", () => {
|
|
render(
|
|
<>
|
|
<Button>Continue</Button>
|
|
<Input aria-label="Name" />
|
|
<Textarea aria-label="Description" />
|
|
</>,
|
|
);
|
|
|
|
expect(screen.getByRole("button", { name: "Continue" })).toHaveClass("rounded-control");
|
|
expect(screen.getByRole("textbox", { name: "Name" })).toHaveClass("rounded-control");
|
|
expect(screen.getByRole("textbox", { name: "Description" })).toHaveClass(
|
|
"rounded-control",
|
|
);
|
|
});
|
|
|
|
it("gives dialogs and alert dialogs one shared modal radius", () => {
|
|
const dialog = render(
|
|
<Dialog open>
|
|
<DialogContent showCloseButton={false}>
|
|
<DialogTitle>Edit name</DialogTitle>
|
|
<DialogDescription>Choose a new name.</DialogDescription>
|
|
</DialogContent>
|
|
</Dialog>,
|
|
);
|
|
expect(screen.getByRole("dialog", { name: "Edit name" })).toHaveClass("rounded-modal");
|
|
dialog.unmount();
|
|
|
|
render(
|
|
<AlertDialog open>
|
|
<AlertDialogContent>
|
|
<AlertDialogTitle>Delete item?</AlertDialogTitle>
|
|
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
|
|
</AlertDialogContent>
|
|
</AlertDialog>,
|
|
);
|
|
expect(screen.getByRole("alertdialog", { name: "Delete item?" })).toHaveClass(
|
|
"rounded-modal",
|
|
);
|
|
});
|
|
|
|
it("keeps floating surfaces and their items on the shared radius scale", () => {
|
|
render(
|
|
<DropdownMenu open>
|
|
<DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>Rename</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>,
|
|
);
|
|
|
|
expect(screen.getByRole("menu")).toHaveClass("rounded-floating");
|
|
expect(screen.getByRole("menuitem", { name: "Rename" })).toHaveClass(
|
|
"rounded-control",
|
|
);
|
|
});
|
|
});
|