test(frontend): sample component tests for button/dialog/theme-toggle (B2)

2026-09-15 11:54:56 +08:00
parent 38957b4c2c
commit a3755bcfab
4 changed files with 105 additions and 0 deletions
@@ -0,0 +1,27 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "./dialog";
+
+describe("Dialog", () => {
+  it("opens via trigger, renders title, closes via Escape (radix under jsdom)", async () => {
+    render(
+      <Dialog>
+        <DialogTrigger>打开对话框</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>测试标题</DialogTitle>
+          <p>正文内容</p>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "打开对话框" }));
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("测试标题")).toBeInTheDocument();
+    expect(screen.getByText("正文内容")).toBeInTheDocument();
+
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+  });
+});