feat: add badge card avatar alert and progress

2026-03-19 17:24:22 +08:00
parent 063179933c
commit cb15b46b0c
23 changed files with 1342 additions and 0 deletions
@@ -0,0 +1,48 @@
+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", "");
+  });
+});