From 266a35b88c61a7fd97ee96d27df6eca36a2adb62 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Wed, 12 Aug 2026 22:39:29 -0700
Subject: [PATCH] test(ui): cover keyboard activation of the log drawer
 collapse rows

The migration turned each collapse row into a real button, but the existing
tests only click, so a regression in Enter or Space activation would still
pass. Add one test per component that tabs to the row, expands with Enter and
collapses with Space, asserting visibility rather than markup.

Both fail against the antd version and pass against the migrated one.
---
 .../CollapsibleMessage.test.tsx                | 14 ++++++++++++++
 .../LogDetailsDrawer/HistoryTree.test.tsx      | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.test.tsx
index 1477febd967..3aa8d21c31c 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/CollapsibleMessage.test.tsx
@@ -37,4 +37,18 @@ describe("CollapsibleMessage", () => {
     await user.click(screen.getByText("SYSTEM"));
     expect(screen.getByText("Toggle me")).toBeInTheDocument();
   });
+
+  it("should expand with Enter and collapse with Space from the keyboard", async () => {
+    const user = userEvent.setup();
+    render(<CollapsibleMessage label="SYSTEM" content="Toggle me" defaultExpanded={false} />);
+
+    expect(screen.getByText("Toggle me")).not.toBeVisible();
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+    expect(screen.getByText("Toggle me")).toBeVisible();
+
+    await user.keyboard(" ");
+    expect(screen.getByText("Toggle me")).not.toBeVisible();
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.test.tsx
index 10d6bfa0847..0726a9f4b82 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/HistoryTree.test.tsx
@@ -41,4 +41,22 @@ describe("HistoryTree", () => {
     expect(screen.getByText("Hello")).toBeInTheDocument();
     expect(screen.getByText("Hi there")).toBeInTheDocument();
   });
+
+  it("should expand with Enter and collapse with Space from the keyboard", async () => {
+    const user = userEvent.setup();
+    const messages: ParsedMessage[] = [
+      { role: "user", content: "Hello" },
+      { role: "assistant", content: "Hi there" },
+    ];
+    render(<HistoryTree messages={messages} />);
+
+    expect(screen.getByText("Hello")).not.toBeVisible();
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+    expect(screen.getByText("Hello")).toBeVisible();
+
+    await user.keyboard(" ");
+    expect(screen.getByText("Hello")).not.toBeVisible();
+  });
 });