opensource/dify
3
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-09-21 05:11:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): use buttons for pricing categories (#40360)

Browse Source 
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
yyh
2026-08-10 02:56:18 +00:00
committed by GitHub
co-authored by autofix-ci[bot]
parent 1017a76b4c
commit 8b908d6150
3 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/__tests__/billing/pricing-modal-flow.test.tsx
+20 -7
View File
@@ -175,6 +175,15 @@ describe('Pricing Modal Flow', () => {
it('should default to cloud category with three cloud plans', () => {
render(<Pricing onCancel={onCancel} />)
expect(screen.getByRole('button', { name: 'billing.plansCommon.cloud' })).toHaveAttribute(
'aria-pressed',
'true',
)
expect(screen.getByRole('button', { name: 'billing.plansCommon.self' })).toHaveAttribute(
'aria-pressed',
'false',
)
// Three cloud plans: sandbox, professional, team
expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
expect(screen.getByText(/plans\.professional\.name/i)).toBeInTheDocument()
@@ -205,9 +214,13 @@ describe('Pricing Modal Flow', () => {
const user = userEvent.setup()
render(<Pricing onCancel={onCancel} />)
// Click the self-hosted tab
const selfTab = screen.getByText(/plansCommon\.self/i)
await user.click(selfTab)
const selfHostedButton = screen.getByRole('button', {
name: 'billing.plansCommon.self',
})
selfHostedButton.focus()
await user.keyboard(' ')
expect(selfHostedButton).toHaveAttribute('aria-pressed', 'true')
// Self-hosted plans should appear
expect(screen.getByText(/plans\.community\.name/i)).toBeInTheDocument()
@@ -222,7 +235,7 @@ describe('Pricing Modal Flow', () => {
const user = userEvent.setup()
render(<Pricing onCancel={onCancel} />)
await user.click(screen.getByText(/plansCommon\.self/i))
await user.click(screen.getByRole('button', { name: 'billing.plansCommon.self' }))
// Annual billing toggle should not be visible
expect(screen.queryByText(/plansCommon\.annualBilling/i)).not.toBeInTheDocument()
@@ -232,7 +245,7 @@ describe('Pricing Modal Flow', () => {
const user = userEvent.setup()
render(<Pricing onCancel={onCancel} />)
await user.click(screen.getByText(/plansCommon\.self/i))
await user.click(screen.getByRole('button', { name: 'billing.plansCommon.self' }))
expect(screen.queryByText('billing.plansCommon.taxTip')).not.toBeInTheDocument()
})
@@ -242,11 +255,11 @@ describe('Pricing Modal Flow', () => {
render(<Pricing onCancel={onCancel} />)
// Switch to self-hosted
await user.click(screen.getByText(/plansCommon\.self/i))
await user.click(screen.getByRole('button', { name: 'billing.plansCommon.self' }))
expect(screen.queryByText(/plans\.sandbox\.name/i)).not.toBeInTheDocument()
// Switch back to cloud
await user.click(screen.getByText(/plansCommon\.cloud/i))
await user.click(screen.getByRole('button', { name: 'billing.plansCommon.cloud' }))
expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
expect(screen.getByText(/plansCommon\.annualBilling/i)).toBeInTheDocument()
})
web/app/components/billing/pricing/plan-switcher/tab.tsx
+5 -3
View File
@@ -16,8 +16,10 @@ const Tab = <T,>({ Icon, value, label, isActive, onClick }: TabProps<T>) => {
}, [onClick, value])
return (
<div
className="flex cursor-pointer items-center justify-center gap-x-2 px-5 py-3"
<button
type="button"
aria-pressed={isActive}
className="flex cursor-pointer appearance-none items-center justify-center gap-x-2 px-5 py-3 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
onClick={handleClick}
>
<Icon isActive={isActive} />
@@ -29,7 +31,7 @@ const Tab = <T,>({ Icon, value, label, isActive, onClick }: TabProps<T>) => {
>
{label}
</span>
</div>
</button>
)
}