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>
This commit is contained in:
openhands 2025-12-18 18:25:50 +00:00
parent 22ca3e3fd1
commit 7bd9a7f8b7
3 changed files with 31 additions and 17 deletions

View File

@ -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">

View File

@ -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

View File

@ -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);
});
});