dify/web/app/components/base/premium-badge/__tests__/index.spec.tsx
yyh dd1cdbbd41
refactor(web): split premium badge button semantics (#36026)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-05-11 05:57:30 +00:00

66 lines
1.9 KiB
TypeScript

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import PremiumBadge, { PremiumBadgeButton } from '../index'
describe('PremiumBadge', () => {
it('renders with default props', () => {
render(<PremiumBadge>Premium</PremiumBadge>)
const badge = screen.getByText('Premium')
expect(badge).toBeInTheDocument()
expect(badge).toHaveClass('premium-badge-m')
expect(badge).toHaveClass('premium-badge-blue')
})
it('renders with custom size and color', () => {
render(
<PremiumBadge size="s" color="indigo">
Premium
</PremiumBadge>,
)
const badge = screen.getByText('Premium')
expect(badge).toBeInTheDocument()
expect(badge).toHaveClass('premium-badge-s')
expect(badge).toHaveClass('premium-badge-indigo')
})
it('applies allowHover class when allowHover is true', () => {
render(
<PremiumBadgeButton>
Premium
</PremiumBadgeButton>,
)
const badge = screen.getByText('Premium')
expect(badge).toBeInTheDocument()
expect(badge).toHaveClass('pb-allow-hover')
})
it('applies custom styles', () => {
render(
<PremiumBadge styleCss={{ backgroundColor: 'red' }}>
Premium
</PremiumBadge>,
)
const badge = screen.getByText('Premium')
expect(badge).toBeInTheDocument()
expect(badge).toHaveStyle('background-color: red')
})
it('renders a static badge without button semantics', () => {
render(<PremiumBadge>Premium</PremiumBadge>)
expect(screen.queryByRole('button')).not.toBeInTheDocument()
})
it('renders an action badge as a button', async () => {
const user = userEvent.setup()
const handleClick = vi.fn()
render(<PremiumBadgeButton onClick={handleClick}>Upgrade</PremiumBadgeButton>)
const button = screen.getByRole('button', { name: 'Upgrade' })
await user.click(button)
expect(handleClick).toHaveBeenCalledTimes(1)
})
})