mirror of
https://github.com/OpenHands/OpenHands.git
synced 2025-12-26 05:48:36 +08:00
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:
parent
22ca3e3fd1
commit
7bd9a7f8b7
@ -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">
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user