49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle
|
|
} from "./card";
|
|
|
|
describe("Card", () => {
|
|
it("renders root and semantic slots", () => {
|
|
render(
|
|
<Card tone="accent">
|
|
<CardHeader>
|
|
<CardTitle>Quarterly release</CardTitle>
|
|
<CardDescription>Ready for internal review.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>Checklist complete.</CardContent>
|
|
<CardFooter>Updated 2h ago</CardFooter>
|
|
</Card>
|
|
);
|
|
|
|
expect(screen.getByText("Quarterly release").closest('[data-slot="root"]')).toHaveAttribute(
|
|
"data-tone",
|
|
"accent"
|
|
);
|
|
expect(screen.getByText("Quarterly release")).toHaveAttribute("data-slot", "label");
|
|
expect(screen.getByText("Ready for internal review.")).toHaveAttribute(
|
|
"data-slot",
|
|
"description"
|
|
);
|
|
expect(screen.getByText("Checklist complete.")).toHaveAttribute("data-slot", "content");
|
|
expect(screen.getByText("Updated 2h ago")).toHaveAttribute("data-slot", "footer");
|
|
});
|
|
|
|
it("supports interactive state hooks", () => {
|
|
render(
|
|
<Card data-testid="card" interactive>
|
|
<CardContent>Hover capable</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
expect(screen.getByTestId("card")).toHaveAttribute("data-interactive", "");
|
|
});
|
|
});
|