feat: add core UI components and baseline tests

2026-03-19 16:56:27 +08:00
parent 12642e0a92
commit 063179933c
73 changed files with 5756 additions and 2 deletions
@@ -0,0 +1,69 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from "./toast";
+
+function StatefulToast() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <ToastProvider>
+      <Toast open={open} onOpenChange={setOpen}>
+        <ToastTitle>Saved</ToastTitle>
+        <ToastDescription>Launch details were updated.</ToastDescription>
+        <ToastAction altText="Undo changes">Undo</ToastAction>
+        <ToastClose />
+      </Toast>
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
+
+describe("Toast", () => {
+  it("renders viewport, title, description, action, and variant hooks", () => {
+    render(
+      <ToastProvider>
+        <Toast open variant="destructive">
+          <ToastTitle>Delete failed</ToastTitle>
+          <ToastDescription>Try again in a moment.</ToastDescription>
+          <ToastAction altText="Retry delete">Retry</ToastAction>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    );
+
+    expect(screen.getByText("Delete failed").closest('[data-slot="label"]')).toBeInTheDocument();
+    expect(screen.getByText("Try again in a moment.").closest('[data-slot="description"]')).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Retry" })).toHaveAttribute("data-slot", "action");
+    expect(document.querySelector('[data-slot="root"]')).toHaveAttribute("data-variant", "destructive");
+    expect(document.querySelector('[data-slot="viewport"]')).toBeInTheDocument();
+  });
+
+  it("closes through the close control", async () => {
+    const user = userEvent.setup();
+
+    render(<StatefulToast />);
+
+    expect(screen.getByText("Saved")).toBeInTheDocument();
+
+    const closeButton = document.querySelector('[data-slot="close"]');
+
+    expect(closeButton).toBeInstanceOf(HTMLButtonElement);
+    await user.click(closeButton as HTMLButtonElement);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Saved")).not.toBeInTheDocument();
+    });
+  });
+});