refactor: 统一管理页面布局 — FilterToolbar + usePageSearchParams + parseListParams

tests/web/FilterToolbar.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "bun:test";
+import { createElement } from "react";
+
+import { FilterToolbar } from "../../src/web/shared/components/FilterToolbar";
+import { renderWithProviders } from "./test-utils";
+
+describe("FilterToolbar", () => {
+  it("renders filter Select with placeholder", () => {
+    const { getByText } = renderWithProviders(
+      createElement(FilterToolbar, {
+        filters: [
+          {
+            key: "status",
+            label: "状态",
+            onChange: () => {},
+            options: [
+              { label: "进行中", value: "active" },
+              { label: "已归档", value: "archived" },
+            ],
+            placeholder: "选择状态",
+          },
+        ],
+      }),
+    );
+    expect(getByText("选择状态")).toBeTruthy();
+  });
+
+  it("renders search input with placeholder", () => {
+    const { getByPlaceholderText } = renderWithProviders(
+      createElement(FilterToolbar, {
+        search: {
+          onReset: () => {},
+          onSearch: () => {},
+          placeholder: "搜索名称",
+        },
+      }),
+    );
+    expect(getByPlaceholderText("搜索名称")).toBeTruthy();
+  });
+
+  it("renders reset button", () => {
+    const { container } = renderWithProviders(
+      createElement(FilterToolbar, {
+        search: {
+          onReset: () => {},
+          onSearch: () => {},
+          placeholder: "搜索",
+        },
+      }),
+    );
+    const resetBtn = container.querySelector('button[title="重置"]');
+    expect(resetBtn).toBeTruthy();
+  });
+
+  it("renders action buttons", () => {
+    const { container } = renderWithProviders(
+      createElement(FilterToolbar, {
+        actions: createElement("button", null, "新建项目"),
+        search: {
+          onReset: () => {},
+          onSearch: () => {},
+          placeholder: "搜索",
+        },
+      }),
+    );
+    const buttons = container.querySelectorAll("button");
+    const hasAction = Array.from(buttons).some((btn) => btn.textContent?.includes("新建项目"));
+    expect(hasAction).toBe(true);
+  });
+
+  it("calls onSearch when search entered after typing", () => {
+    const onSearch = vi.fn();
+    const onReset = vi.fn();
+    const { getByPlaceholderText } = renderWithProviders(
+      createElement(FilterToolbar, {
+        search: {
+          keyword: "",
+          onReset,
+          onSearch,
+          placeholder: "搜索名称",
+        },
+      }),
+    );
+    const input = getByPlaceholderText("搜索名称");
+    fireEvent.change(input, { target: { value: "test" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onSearch).toHaveBeenCalledWith("test");
+  });
+
+  it("calls onReset when reset button clicked", () => {
+    const onReset = vi.fn();
+    const { container } = renderWithProviders(
+      createElement(FilterToolbar, {
+        search: {
+          onReset,
+          onSearch: () => {},
+          placeholder: "搜索",
+        },
+      }),
+    );
+    const resetBtn = container.querySelector<HTMLButtonElement>('button[title="重置"]');
+    resetBtn?.click();
+    expect(onReset).toHaveBeenCalled();
+  });
+});