From 7bd9a7f8b76f0ecbeea4b4b88a13f471977fd0c9 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Thu, 18 Dec 2025 18:25:50 +0000
Subject: [PATCH] fix: Fix E2E tests for infinite scroll and avatar menu

- Fix avatar-menu test: Remove group-hover:pointer-events-auto from wrapper
  div to prevent menu from intercepting clicks on the avatar button. Only
  enable pointer events when menu is actually open via click.

- Fix infinite-scroll test: Add data-testid='conversation-card' to
  RecentConversation component for test selector consistency.

- Update recent conversations test: Change test to match actual component
  behavior (View More/Less button instead of infinite scroll). The
  RecentConversations component uses a display limit with expand/collapse
  functionality, not infinite scroll for display.

Co-authored-by: openhands <openhands@all-hands.dev>
---
 .../recent-conversation.tsx                   |  1 +
 .../features/sidebar/user-actions.tsx         |  9 ++++-
 frontend/tests/infinite-scroll.spec.ts        | 38 +++++++++++--------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/features/home/recent-conversations/recent-conversation.tsx b/frontend/src/components/features/home/recent-conversations/recent-conversation.tsx
index d86bac55bf..da3f11fc56 100644
--- a/frontend/src/components/features/home/recent-conversations/recent-conversation.tsx
+++ b/frontend/src/components/features/home/recent-conversations/recent-conversation.tsx
@@ -23,6 +23,7 @@ export function RecentConversation({ conversation }: RecentConversationProps) {
     <Link to={`/conversations/${conversation.conversation_id}`}>
       <button
         type="button"
+        data-testid="conversation-card"
         className="flex flex-col gap-1 p-[14px] cursor-pointer w-full rounded-lg hover:bg-[#5C5D62] transition-all duration-300 text-left"
       >
         <div className="flex items-center gap-2 pl-1">
diff --git a/frontend/src/components/features/sidebar/user-actions.tsx b/frontend/src/components/features/sidebar/user-actions.tsx
index 27b1543b07..65470b610d 100644
--- a/frontend/src/components/features/sidebar/user-actions.tsx
+++ b/frontend/src/components/features/sidebar/user-actions.tsx
@@ -56,11 +56,16 @@ export function UserActions({ onLogout, user, isLoading }: UserActionsProps) {
       {(shouldShowUserActions || isOSS) && (
         <div
           className={cn(
-            "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto",
+            // Position absolutely to avoid overlapping with the avatar button
+            "absolute top-full left-0",
+            // Show on hover but only enable pointer events when menu is open via click
+            // This prevents the menu from intercepting clicks on the avatar
+            "opacity-0 pointer-events-none group-hover:opacity-100",
             showMenu && "opacity-100 pointer-events-auto",
             // Invisible hover bridge: extends hover zone to create a "safe corridor"
             // for diagonal mouse movement to the menu (only active when menu is visible)
-            "group-hover:before:absolute group-hover:before:bottom-0 group-hover:before:right-0 group-hover:before:w-[200px] group-hover:before:h-[300px]",
+            showMenu &&
+              "before:absolute before:bottom-0 before:right-0 before:w-[200px] before:h-[300px]",
           )}
         >
           <AccountSettingsContextMenu
diff --git a/frontend/tests/infinite-scroll.spec.ts b/frontend/tests/infinite-scroll.spec.ts
index 941d0c7adb..10255da040 100644
--- a/frontend/tests/infinite-scroll.spec.ts
+++ b/frontend/tests/infinite-scroll.spec.ts
@@ -50,7 +50,7 @@ test.describe("Infinite scroll for conversations", () => {
     }
   });
 
-  test("loads more conversations when scrolling in recent conversations on home page", async ({
+  test("shows more conversations when clicking View More on home page", async ({
     page,
   }) => {
     await page.goto("/");
@@ -65,24 +65,32 @@ test.describe("Infinite scroll for conversations", () => {
     // Wait for initial conversations to load
     await expect(conversationCards.first()).toBeVisible();
 
-    // Count initial conversations
+    // Count initial conversations (should be 3 by default)
     const initialCount = await conversationCards.count();
-    expect(initialCount).toBeGreaterThan(0);
+    expect(initialCount).toBe(3);
 
-    // Scroll the recent conversations container to the bottom
-    await recentConversations.evaluate((el) => {
-      el.scrollTop = el.scrollHeight;
-    });
+    // Click "View More" to expand the list
+    const viewMoreButton = recentConversations.getByText("View More");
+    await expect(viewMoreButton).toBeVisible();
+    await viewMoreButton.click();
 
-    // Wait for infinite scroll to trigger
-    await page.waitForTimeout(1000);
+    // Wait for the expansion animation
+    await page.waitForTimeout(500);
 
-    // Count conversations after scrolling
-    const afterScrollCount = await conversationCards.count();
+    // Count conversations after expanding (should be 10)
+    const afterExpandCount = await conversationCards.count();
+    expect(afterExpandCount).toBe(10);
 
-    // If there are more conversations available, the count should increase
-    if (initialCount < 50) {
-      expect(afterScrollCount).toBeGreaterThan(initialCount);
-    }
+    // Click "View Less" to collapse the list
+    const viewLessButton = recentConversations.getByText("View Less");
+    await expect(viewLessButton).toBeVisible();
+    await viewLessButton.click();
+
+    // Wait for the collapse animation
+    await page.waitForTimeout(500);
+
+    // Count conversations after collapsing (should be back to 3)
+    const afterCollapseCount = await conversationCards.count();
+    expect(afterCollapseCount).toBe(3);
   });
 });