Tests

ui/litellm-dashboard/src/components/view_users/table.test.tsx

@@ -1,6 +1,5 @@
-import { render } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import React from "react";
 
 import { UserDataTable } from "./table";
 
@@ -21,7 +20,7 @@ describe("UserDataTable", () => {
 
     const updateFilters = vi.fn();
 
-    const { getByText } = render(
+    render(
       <UserDataTable
         data={[]}
         columns={[]}
@@ -41,6 +40,58 @@ describe("UserDataTable", () => {
       />,
     );
 
-    expect(getByText("Filters")).toBeInTheDocument();
+    expect(screen.getByText("Filters")).toBeInTheDocument();
+  });
+
+  it("should call onSortChange when clicking a sortable header", () => {
+    const filters = {
+      email: "",
+      user_id: "",
+      user_role: "",
+      sso_user_id: "",
+      team: "",
+      model: "",
+      min_spend: null,
+      max_spend: null,
+      sort_by: "created_at",
+      sort_order: "desc" as const,
+    };
+
+    const updateFilters = vi.fn();
+    const onSortChange = vi.fn();
+
+    const possibleUIRoles = {
+      admin: { ui_label: "Admin" },
+      user: { ui_label: "User" },
+    };
+
+    render(
+      <UserDataTable
+        data={[]}
+        columns={[]}
+        accessToken={null}
+        userRole={"Admin"}
+        possibleUIRoles={possibleUIRoles}
+        filters={filters}
+        updateFilters={updateFilters}
+        initialFilters={filters}
+        teams={[]}
+        handleEdit={vi.fn()}
+        handleDelete={vi.fn()}
+        handleResetPassword={vi.fn()}
+        userListResponse={{ users: [], total: 0, page: 1, page_size: 25, total_pages: 1 }}
+        currentPage={1}
+        handlePageChange={vi.fn()}
+        onSortChange={onSortChange}
+        currentSort={{ sortBy: filters.sort_by, sortOrder: filters.sort_order }}
+      />,
+    );
+
+    const emailHeader = screen.getByRole("columnheader", { name: /email/i });
+    act(() => {
+      fireEvent.click(emailHeader);
+    });
+
+    expect(onSortChange).toHaveBeenCalledWith("user_email", "desc");
   });
 });