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,31 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders label, exposes variant/size data attrs, fires onClick", async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>保存</Button>);
+    const btn = screen.getByRole("button", { name: "保存" });
+    expect(btn).toHaveAttribute("data-variant", "default");
+    expect(btn).toHaveAttribute("data-size", "default");
+    await userEvent.click(btn);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies non-default variant/size and blocks clicks when disabled", async () => {
+    const onClick = vi.fn();
+    render(
+      <Button variant="outline" size="sm" disabled onClick={onClick}>
+        x
+      </Button>,
+    );
+    const btn = screen.getByRole("button");
+    expect(btn).toHaveAttribute("data-variant", "outline");
+    expect(btn).toHaveAttribute("data-size", "sm");
+    expect(btn).toBeDisabled();
+    await userEvent.click(btn);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});