From 346d174d3174c672eb5a9da6201546277f86fbe6 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sat, 9 May 2026 12:33:52 +0800
Subject: [PATCH] test(web): align popover tooltip assertions

---
 .../billing/cloud-plan-payment-flow.test.tsx  | 22 ++++++++++---------
 .../__tests__/param-config-content.spec.tsx   |  3 +--
 .../form/components/__tests__/label.spec.tsx  |  4 ++--
 .../cloud-plan-item/__tests__/index.spec.tsx  |  2 +-
 .../list/__tests__/index.spec.tsx             |  7 ++++--
 .../list/item/__tests__/index.spec.tsx        |  7 ++++--
 ...itch-credential-in-load-balancing.spec.tsx |  8 ++++---
 .../__tests__/status-indicators.spec.tsx      | 18 +++++++--------
 .../__tests__/integration.spec.tsx            |  4 ++--
 9 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/web/__tests__/billing/cloud-plan-payment-flow.test.tsx b/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
index de145a73e6..7682de5f88 100644
--- a/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
+++ b/web/__tests__/billing/cloud-plan-payment-flow.test.tsx
@@ -90,6 +90,8 @@ const renderCloudPlanItem = ({
   )
 }
 
+const getPlanButton = (name: string) => screen.getByRole('button', { name })
+
 // ═══════════════════════════════════════════════════════════════════════════════
 describe('Cloud Plan Payment Flow', () => {
   beforeEach(() => {
@@ -180,30 +182,30 @@ describe('Cloud Plan Payment Flow', () => {
     it('should disable sandbox button when user is on professional plan (downgrade)', () => {
       renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.sandbox })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.startForFree')
       expect(button).toBeDisabled()
     })
 
     it('should disable sandbox and professional buttons when user is on team plan', () => {
       const { unmount } = renderCloudPlanItem({ currentPlan: Plan.team, plan: Plan.sandbox })
-      expect(screen.getByRole('button')).toBeDisabled()
+      expect(getPlanButton('billing.plansCommon.startForFree')).toBeDisabled()
       unmount()
 
       renderCloudPlanItem({ currentPlan: Plan.team, plan: Plan.professional })
-      expect(screen.getByRole('button')).toBeDisabled()
+      expect(getPlanButton('billing.plansCommon.startBuilding')).toBeDisabled()
     })
 
     it('should not disable current paid plan button (for invoice management)', () => {
       renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.professional })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.currentPlan')
       expect(button).not.toBeDisabled()
     })
 
     it('should enable higher-tier plan buttons for upgrade', () => {
       renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.team })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.getStarted')
       expect(button).not.toBeDisabled()
     })
   })
@@ -219,7 +221,7 @@ describe('Cloud Plan Payment Flow', () => {
         planRange: PlanRange.monthly,
       })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.startBuilding')
       await user.click(button)
 
       await waitFor(() => {
@@ -235,7 +237,7 @@ describe('Cloud Plan Payment Flow', () => {
         planRange: PlanRange.yearly,
       })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.getStarted')
       await user.click(button)
 
       await waitFor(() => {
@@ -247,7 +249,7 @@ describe('Cloud Plan Payment Flow', () => {
       const user = userEvent.setup()
       renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.professional })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.currentPlan')
       await user.click(button)
 
       await waitFor(() => {
@@ -261,7 +263,7 @@ describe('Cloud Plan Payment Flow', () => {
       const user = userEvent.setup()
       renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.sandbox })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.currentPlan')
       await user.click(button)
 
       // Wait a tick and verify no actions were taken
@@ -279,7 +281,7 @@ describe('Cloud Plan Payment Flow', () => {
       const user = userEvent.setup()
       renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.professional })
 
-      const button = screen.getByRole('button')
+      const button = getPlanButton('billing.plansCommon.startBuilding')
       await user.click(button)
 
       await waitFor(() => {
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
index 754bde98a6..b4d5beefa6 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
@@ -110,8 +110,7 @@ describe('ParamConfigContent', () => {
 
       const languageLabel = screen.getByText(/voice\.voiceSettings\.language/)
       expect(languageLabel)!.toBeInTheDocument()
-      const tooltip = languageLabel.parentElement as HTMLElement
-      expect(tooltip.querySelector('svg'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /voice\.voiceSettings\.resolutionTooltip/ }))!.toBeInTheDocument()
     })
 
     it('should display language listbox button', () => {
diff --git a/web/app/components/base/form/components/__tests__/label.spec.tsx b/web/app/components/base/form/components/__tests__/label.spec.tsx
index a3f564dafe..99471e5171 100644
--- a/web/app/components/base/form/components/__tests__/label.spec.tsx
+++ b/web/app/components/base/form/components/__tests__/label.spec.tsx
@@ -41,8 +41,8 @@ describe('Label', () => {
     const tooltipText = 'Test Tooltip'
     render(<Label {...defaultProps} tooltip={tooltipText} />)
 
-    await user.hover(screen.getByTestId('test-input-tooltip'))
-    expect(screen.getByText(tooltipText)).toBeInTheDocument()
+    await user.hover(screen.getByRole('button', { name: tooltipText }))
+    expect(await screen.findByText(tooltipText)).toBeInTheDocument()
   })
 
   it('should hide optional text when required is true', () => {
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
index 615579bc6c..568a2656ba 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/__tests__/index.spec.tsx
@@ -241,7 +241,7 @@ describe('CloudPlanItem', () => {
       )
 
       // Sandbox viewed from a higher plan is disabled, but let's verify no API calls
-      const button = screen.getByRole('button')
+      const button = screen.getByRole('button', { name: 'billing.plansCommon.startForFree' })
       fireEvent.click(button)
 
       await waitFor(() => {
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/__tests__/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/__tests__/index.spec.tsx
index 5a06509355..e6a0d78273 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/list/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/__tests__/index.spec.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { Plan } from '../../../../../type'
 import List from '../index'
@@ -12,11 +13,13 @@ describe('CloudPlanItem/List', () => {
     expect(screen.getByText('billing.plansCommon.startNodes.limited:{"count":2}')).toBeInTheDocument()
   })
 
-  it('should show professional monthly quotas and tooltips', () => {
+  it('should show professional monthly quotas and tooltips', async () => {
+    const user = userEvent.setup()
     render(<List plan={Plan.professional} />)
 
     expect(screen.getByText('billing.plansCommon.messageRequest.titlePerMonth:{"count":5000}')).toBeInTheDocument()
-    expect(screen.getByText('billing.plansCommon.vectorSpaceTooltip')).toBeInTheDocument()
+    await user.hover(screen.getByRole('button', { name: 'billing.plansCommon.vectorSpaceTooltip' }))
+    expect(await screen.findByText('billing.plansCommon.vectorSpaceTooltip')).toBeInTheDocument()
     expect(screen.getByText('billing.plansCommon.workflowExecution.faster')).toBeInTheDocument()
   })
 
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/__tests__/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/__tests__/index.spec.tsx
index e1aada80f8..f75b334fd9 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/__tests__/index.spec.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/__tests__/index.spec.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import Item from '../index'
 
 describe('Item', () => {
@@ -20,14 +21,16 @@ describe('Item', () => {
 
   // Toggling the optional tooltip indicator
   describe('Tooltip behavior', () => {
-    it('should render tooltip content when tooltip text is provided', () => {
+    it('should render tooltip content when tooltip text is provided', async () => {
+      const user = userEvent.setup()
       const label = 'Workspace seats'
       const tooltip = 'Seats define how many teammates can join the workspace.'
 
       const { container } = render(<Item label={label} tooltip={tooltip} />)
 
       expect(screen.getByText(label)).toBeInTheDocument()
-      expect(screen.getByText(tooltip)).toBeInTheDocument()
+      await user.hover(screen.getByRole('button', { name: tooltip }))
+      expect(await screen.findByText(tooltip)).toBeInTheDocument()
       expect(container.querySelector('.group')).not.toBeNull()
     })
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx
index f9c923e6a1..73aa8f9bfc 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx
@@ -1,5 +1,6 @@
 import type { CustomModel, ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import SwitchCredentialInLoadBalancing from '../switch-credential-in-load-balancing'
 
@@ -105,7 +106,8 @@ describe('SwitchCredentialInLoadBalancing', () => {
     expect(mockSetCustomModelCredential).toHaveBeenCalledWith(mockCredentials[0])
   })
 
-  it('should show tooltip when empty and custom credentials not allowed', () => {
+  it('should show tooltip when empty and custom credentials not allowed', async () => {
+    const user = userEvent.setup()
     const restrictedProvider = { ...mockProvider, allow_custom_token: false }
     render(
       <SwitchCredentialInLoadBalancing
@@ -117,8 +119,8 @@ describe('SwitchCredentialInLoadBalancing', () => {
       />,
     )
 
-    fireEvent.mouseEnter(screen.getByText(/auth.credentialUnavailableInButton/))
-    expect(screen.getByText('plugin.auth.credentialUnavailable'))!.toBeInTheDocument()
+    await user.hover(screen.getByRole('button', { name: /auth.credentialUnavailableInButton/ }))
+    expect(await screen.findByText('plugin.auth.credentialUnavailable'))!.toBeInTheDocument()
   })
 
   // Empty credentials with allowed custom: no tooltip but still shows unavailable text
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx
index dc7c512f78..b204462ab5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx
@@ -21,10 +21,10 @@ describe('StatusIndicators', () => {
     installedPlugins = [{ name: 'demo-plugin', plugin_unique_identifier: 'demo@1.0.0' }]
   })
 
-  const getTooltipTrigger = (container: HTMLElement) => {
-    const trigger = container.querySelector('[role="button"][aria-haspopup="dialog"]')
+  const getPopoverTrigger = (name: string) => {
+    const trigger = screen.getByRole('button', { name })
     expect(trigger).toBeInTheDocument()
-    return trigger as HTMLElement
+    return trigger
   }
 
   it('should render nothing when model is available and enabled', () => {
@@ -43,7 +43,7 @@ describe('StatusIndicators', () => {
 
   it('should render deprecated tooltip when provider model is disabled and in model list', async () => {
     const user = userEvent.setup()
-    const { container } = render(
+    render(
       <StatusIndicators
         needsConfiguration={false}
         modelProvider={true}
@@ -54,14 +54,14 @@ describe('StatusIndicators', () => {
       />,
     )
 
-    await user.hover(getTooltipTrigger(container))
+    await user.hover(getPopoverTrigger('nodes.agent.modelSelectorTooltips.deprecated'))
 
     expect(await screen.findByText('nodes.agent.modelSelectorTooltips.deprecated')).toBeInTheDocument()
   })
 
   it('should render model-not-support tooltip when disabled model is not in model list and has no pluginInfo', async () => {
     const user = userEvent.setup()
-    const { container } = render(
+    render(
       <StatusIndicators
         needsConfiguration={false}
         modelProvider={true}
@@ -72,7 +72,7 @@ describe('StatusIndicators', () => {
       />,
     )
 
-    await user.hover(getTooltipTrigger(container))
+    await user.hover(getPopoverTrigger('nodes.agent.modelNotSupport.title'))
 
     expect(await screen.findByText('nodes.agent.modelNotSupport.title')).toBeInTheDocument()
   })
@@ -125,7 +125,7 @@ describe('StatusIndicators', () => {
 
   it('should render marketplace warning tooltip when provider is unavailable', async () => {
     const user = userEvent.setup()
-    const { container } = render(
+    render(
       <StatusIndicators
         needsConfiguration={false}
         modelProvider={false}
@@ -136,7 +136,7 @@ describe('StatusIndicators', () => {
       />,
     )
 
-    await user.hover(getTooltipTrigger(container))
+    await user.hover(getPopoverTrigger('nodes.agent.modelNotInMarketplace.title'))
 
     expect(await screen.findByText('nodes.agent.modelNotInMarketplace.title')).toBeInTheDocument()
   })
diff --git a/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx
index c11f78bc08..ada3fc43cc 100644
--- a/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/__tests__/integration.spec.tsx
@@ -344,8 +344,8 @@ describe('question-classifier path', () => {
       )
 
       expect(screen.getByText(`${longName.slice(0, 50)}...`)).toBeInTheDocument()
-      await user.hover(screen.getByText(`${longName.slice(0, 50)}...`))
-      expect(screen.getByText(longName)).toBeInTheDocument()
+      await user.hover(screen.getByRole('button', { name: longName }))
+      expect(await screen.findByText(longName)).toBeInTheDocument()
 
       rerender(
         <Node