github-mirrors/dify
1
0
Fork 0
mirror of https://mirror.skon.top/github.com/langgenius/dify.git synced 2026-04-20 15:20:15 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

test(web): query usage-priority option buttons by accessible name

Browse Source 
The popover trigger now also exposes role="button", so indexing into
getAllByRole('button') no longer points at the option buttons. Switch
to getByRole('button', { name }) so the lookups are robust to extra
buttons in the subtree.

Made-with: Cursor
This commit is contained in:
yyh
2026-04-19 16:24:03 +08:00
parent 4237a10f35
commit 3b2f61e8cd
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
View File

@@ -2,6 +2,9 @@ import { fireEvent, render, screen } from '@testing-library/react'
import { PreferredProviderTypeEnum } from '../../../declarations' import { PreferredProviderTypeEnum } from '../../../declarations'
import UsagePrioritySection from '../usage-priority-section' import UsagePrioritySection from '../usage-priority-section'
const AI_CREDITS_BUTTON_NAME = 'common.modelProvider.card.aiCreditsOption'
const API_KEY_BUTTON_NAME = 'common.modelProvider.card.apiKeyOption'
describe('UsagePrioritySection', () => { describe('UsagePrioritySection', () => {
const onSelect = vi.fn() const onSelect = vi.fn()
@@ -15,7 +18,8 @@ describe('UsagePrioritySection', () => {
render(<UsagePrioritySection value="credits" onSelect={onSelect} />) render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
expect(screen.getByText(/usagePriority/))!.toBeInTheDocument() expect(screen.getByText(/usagePriority/))!.toBeInTheDocument()
expect(screen.getAllByRole('button')).toHaveLength(2) expect(screen.getByRole('button', { name: AI_CREDITS_BUTTON_NAME })).toBeInTheDocument()
expect(screen.getByRole('button', { name: API_KEY_BUTTON_NAME })).toBeInTheDocument()
}) })
}) })
@@ -24,24 +28,26 @@ describe('UsagePrioritySection', () => {
it('should highlight AI credits option when value is credits', () => { it('should highlight AI credits option when value is credits', () => {
render(<UsagePrioritySection value="credits" onSelect={onSelect} />) render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
const buttons = screen.getAllByRole('button') const aiCredits = screen.getByRole('button', { name: AI_CREDITS_BUTTON_NAME })
expect(buttons[0]!.className).toContain('border-components-option-card-option-selected-border') const apiKey = screen.getByRole('button', { name: API_KEY_BUTTON_NAME })
expect(buttons[1]!.className).not.toContain('border-components-option-card-option-selected-border') expect(aiCredits.className).toContain('border-components-option-card-option-selected-border')
expect(apiKey.className).not.toContain('border-components-option-card-option-selected-border')
}) })
it('should highlight API key option when value is apiKey', () => { it('should highlight API key option when value is apiKey', () => {
render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />) render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />)
const buttons = screen.getAllByRole('button') const aiCredits = screen.getByRole('button', { name: AI_CREDITS_BUTTON_NAME })
expect(buttons[0]!.className).not.toContain('border-components-option-card-option-selected-border') const apiKey = screen.getByRole('button', { name: API_KEY_BUTTON_NAME })
expect(buttons[1]!.className).toContain('border-components-option-card-option-selected-border') expect(aiCredits.className).not.toContain('border-components-option-card-option-selected-border')
expect(apiKey.className).toContain('border-components-option-card-option-selected-border')
}) })
it('should highlight API key option when value is apiKeyOnly', () => { it('should highlight API key option when value is apiKeyOnly', () => {
render(<UsagePrioritySection value="apiKeyOnly" onSelect={onSelect} />) render(<UsagePrioritySection value="apiKeyOnly" onSelect={onSelect} />)
const buttons = screen.getAllByRole('button') const apiKey = screen.getByRole('button', { name: API_KEY_BUTTON_NAME })
expect(buttons[1]!.className).toContain('border-components-option-card-option-selected-border') expect(apiKey.className).toContain('border-components-option-card-option-selected-border')
}) })
}) })
@@ -50,7 +56,7 @@ describe('UsagePrioritySection', () => {
it('should call onSelect with system when clicking AI credits option', () => { it('should call onSelect with system when clicking AI credits option', () => {
render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />) render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />)
fireEvent.click(screen.getAllByRole('button')[0]!) fireEvent.click(screen.getByRole('button', { name: AI_CREDITS_BUTTON_NAME }))
expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.system) expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.system)
}) })
@@ -58,7 +64,7 @@ describe('UsagePrioritySection', () => {
it('should call onSelect with custom when clicking API key option', () => { it('should call onSelect with custom when clicking API key option', () => {
render(<UsagePrioritySection value="credits" onSelect={onSelect} />) render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
fireEvent.click(screen.getAllByRole('button')[1]!) fireEvent.click(screen.getByRole('button', { name: API_KEY_BUTTON_NAME }))
expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.custom) expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.custom)
}) })