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()
- 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(
)
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( )
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(
{
/>,
)
- 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(
{
/>,
)
- 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(
{
/>,
)
- 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(
{
/>,
)
- 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(