fix(web): name chat settings triggers (#40341)

This commit is contained in:
yyh 2026-08-10 10:33:11 +08:00 committed by GitHub
parent c29425c0fc
commit f8d381e6c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 17 additions and 8 deletions

View File

@ -66,17 +66,19 @@ describe('ViewFormDropdown', () => {
// Initially, settings icon should be hidden (portal content)
expect(screen.queryByText('share.chat.chatSettingsTitle')).not.toBeInTheDocument()
// Find trigger (ActionButton renders a button)
const trigger = screen.getByRole('button')
const trigger = screen.getByRole('button', { name: 'share.chat.viewChatSettings' })
expect(trigger).toBeInTheDocument()
expect(trigger).toHaveAttribute('aria-expanded', 'false')
// Open dropdown
await user.click(trigger)
expect(trigger).toHaveAttribute('aria-expanded', 'true')
expect(screen.getByText('share.chat.chatSettingsTitle')).toBeInTheDocument()
expect(screen.getByText('Test Label')).toBeInTheDocument()
// Close dropdown
await user.click(trigger)
expect(trigger).toHaveAttribute('aria-expanded', 'false')
expect(screen.queryByText('share.chat.chatSettingsTitle')).not.toBeInTheDocument()
})
@ -90,7 +92,7 @@ describe('ViewFormDropdown', () => {
const user = userEvent.setup()
render(<ViewFormDropdown />)
await user.click(screen.getByRole('button'))
await user.click(screen.getByRole('button', { name: 'share.chat.viewChatSettings' }))
expect(screen.getByText('Text Form')).toBeInTheDocument()
expect(screen.getByText('Num Form')).toBeInTheDocument()
@ -99,7 +101,7 @@ describe('ViewFormDropdown', () => {
it('applies correct state to ActionButton when open', async () => {
const user = userEvent.setup()
render(<ViewFormDropdown />)
const trigger = screen.getByRole('button')
const trigger = screen.getByRole('button', { name: 'share.chat.viewChatSettings' })
// closed state
expect(trigger).not.toHaveClass('action-btn-hover')

View File

@ -13,10 +13,11 @@ const ViewFormDropdown = () => {
render={(props, state) => (
<ActionButton
{...props}
aria-label={t(($) => $['chat.viewChatSettings'], { ns: 'share' })}
size="l"
state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
>
<RiChatSettingsLine className="h-4.5 w-4.5" />
<RiChatSettingsLine aria-hidden="true" className="h-4.5 w-4.5" />
</ActionButton>
)}
/>

View File

@ -11,13 +11,16 @@ describe('ViewFormDropdown', () => {
const user = userEvent.setup()
render(<ViewFormDropdown />)
const trigger = screen.getByTestId('view-form-dropdown-trigger')
const trigger = screen.getByRole('button', { name: 'share.chat.viewChatSettings' })
expect(trigger).toHaveAttribute('aria-expanded', 'false')
expect(screen.queryByText('Form content')).not.toBeInTheDocument()
await user.click(trigger)
expect(trigger).toHaveAttribute('aria-expanded', 'true')
expect(screen.getByText('Form content')).toBeInTheDocument()
await user.click(trigger)
expect(trigger).toHaveAttribute('aria-expanded', 'false')
expect(screen.queryByText('Form content')).not.toBeInTheDocument()
})
})

View File

@ -17,11 +17,14 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
render={(props, state) => (
<ActionButton
{...props}
aria-label={t(($) => $['chat.viewChatSettings'], { ns: 'share' })}
size="l"
state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
data-testid="view-form-dropdown-trigger"
>
<div className={cn('i-ri-chat-settings-line h-4.5 w-4.5 shrink-0', iconColor)} />
<span
aria-hidden
className={cn('i-ri-chat-settings-line h-4.5 w-4.5 shrink-0', iconColor)}
/>
</ActionButton>
)}
/>