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,23 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ThemeProvider } from "./theme";
+import { ThemeToggle } from "./theme-toggle";
+
+describe("ThemeToggle", () => {
+  it("switches theme via dropdown, persists to localStorage, toggles dark class", async () => {
+    localStorage.clear();
+    document.documentElement.classList.remove("dark");
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "切换主题" }));
+    await userEvent.click(await screen.findByText("深色"));
+
+    await waitFor(() => expect(localStorage.getItem("ui.theme")).toBe("dark"));
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+});