From e2e07a1099c947ad7edb3f13f287d16781fdc52b Mon Sep 17 00:00:00 2001
From: KenEzekiel <kenneth.ezekiel.suprantoni@xendit.co>
Date: Thu, 17 Sep 2026 08:34:37 +0700
Subject: [PATCH] fix(ui): update SidebarUsageCard tests for collapsed default
 state

Three tests assumed defaultOpen, query meters without first opening
the panel. Each test now clicks the trigger to expand before asserting
meter content.
---
 .../src/components/SidebarUsageCard.test.tsx          | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/SidebarUsageCard.test.tsx b/ui/litellm-dashboard/src/components/SidebarUsageCard.test.tsx
index 8a8164dd661..7d04d7c33c4 100644
--- a/ui/litellm-dashboard/src/components/SidebarUsageCard.test.tsx
+++ b/ui/litellm-dashboard/src/components/SidebarUsageCard.test.tsx
@@ -67,11 +67,14 @@ describe("SidebarUsageCard", () => {
   });
 
   it("renders an expanded seat meter reporting value and range when data loads", async () => {
+    const user = userEvent.setup();
     const { container } = renderWithClient(
       <SidebarUsageCard accessToken="token" collapsed={false} onExpandRail={() => {}} />,
     );
 
-    await screen.findByText("Enterprise usage");
+    // Card starts collapsed by default — open it first
+    await user.click(await screen.findByRole("button", { name: /Enterprise usage/i }));
+
     const meter = await screen.findByRole("meter");
     expect(meter).toHaveAttribute("aria-valuenow", "20");
     expect(meter).toHaveAttribute("aria-valuemax", "100");
@@ -85,6 +88,8 @@ describe("SidebarUsageCard", () => {
     const user = userEvent.setup();
     renderWithClient(<SidebarUsageCard accessToken="token" collapsed={false} onExpandRail={() => {}} />);
 
+    // Card starts collapsed — open it, then collapse it
+    await user.click(await screen.findByRole("button", { name: /Enterprise usage/i }));
     await screen.findByRole("meter");
     await user.click(screen.getByRole("button", { name: /Enterprise usage/i }));
 
@@ -93,11 +98,15 @@ describe("SidebarUsageCard", () => {
 
   it("flags over-limit usage with a destructive, capped indicator", async () => {
     mockGetRemainingUsers.mockResolvedValue(OVER_LIMIT_DATA);
+    const user = userEvent.setup();
 
     const { container } = renderWithClient(
       <SidebarUsageCard accessToken="token" collapsed={false} onExpandRail={() => {}} />,
     );
 
+    // Card starts collapsed — open it first
+    await user.click(await screen.findByRole("button", { name: /Enterprise usage/i }));
+
     await screen.findByRole("meter");
     const indicator = container.querySelector('[data-slot="meter-indicator"]');
     expect(indicator).toHaveClass("bg-destructive");