433d582da6
All checks were successful
Build & Publish / publish (push) Successful in 1m2s
Replace unicode characters, emoji, and inline SVGs with lucide-react components across the entire design system and page layer. Update tests to assert on SVG elements instead of text content. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { Alert } from './Alert'
|
|
|
|
describe('Alert', () => {
|
|
it('renders children', () => {
|
|
render(<Alert>Something went wrong</Alert>)
|
|
expect(screen.getByText('Something went wrong')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders title when provided', () => {
|
|
render(<Alert title="Heads up">Body text</Alert>)
|
|
expect(screen.getByText('Heads up')).toBeInTheDocument()
|
|
expect(screen.getByText('Body text')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders without title', () => {
|
|
render(<Alert>Just a message</Alert>)
|
|
expect(screen.getByText('Just a message')).toBeInTheDocument()
|
|
})
|
|
|
|
it('uses role="alert" for error variant', () => {
|
|
render(<Alert variant="error">Error message</Alert>)
|
|
expect(screen.getByRole('alert')).toBeInTheDocument()
|
|
})
|
|
|
|
it('uses role="alert" for warning variant', () => {
|
|
render(<Alert variant="warning">Warning message</Alert>)
|
|
expect(screen.getByRole('alert')).toBeInTheDocument()
|
|
})
|
|
|
|
it('uses role="status" for info variant', () => {
|
|
render(<Alert variant="info">Info message</Alert>)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
})
|
|
|
|
it('uses role="status" for success variant', () => {
|
|
render(<Alert variant="success">Success message</Alert>)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
})
|
|
|
|
it('defaults to info variant (role="status")', () => {
|
|
render(<Alert>Default alert</Alert>)
|
|
expect(screen.getByRole('status')).toBeInTheDocument()
|
|
})
|
|
|
|
it('shows default icon for each variant', () => {
|
|
const { container, rerender } = render(<Alert variant="info">msg</Alert>)
|
|
// Each variant should render an SVG icon in the icon slot
|
|
expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
|
|
|
|
rerender(<Alert variant="success">msg</Alert>)
|
|
expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
|
|
|
|
rerender(<Alert variant="warning">msg</Alert>)
|
|
expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
|
|
|
|
rerender(<Alert variant="error">msg</Alert>)
|
|
expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders a custom icon when provided', () => {
|
|
render(<Alert icon={<span data-testid="custom-icon">★</span>}>Custom icon alert</Alert>)
|
|
expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
|
|
})
|
|
|
|
it('does not show dismiss button when dismissible is false', () => {
|
|
render(<Alert>Non-dismissible</Alert>)
|
|
expect(screen.queryByRole('button', { name: /dismiss/i })).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('shows dismiss button when dismissible is true', () => {
|
|
render(<Alert dismissible>Dismissible alert</Alert>)
|
|
expect(screen.getByRole('button', { name: /dismiss/i })).toBeInTheDocument()
|
|
})
|
|
|
|
it('calls onDismiss when dismiss button is clicked', async () => {
|
|
const onDismiss = vi.fn()
|
|
render(
|
|
<Alert dismissible onDismiss={onDismiss}>
|
|
Dismissible alert
|
|
</Alert>,
|
|
)
|
|
const user = userEvent.setup()
|
|
await user.click(screen.getByRole('button', { name: /dismiss/i }))
|
|
expect(onDismiss).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('applies a custom className', () => {
|
|
const { container } = render(<Alert className="my-custom-class">Alert</Alert>)
|
|
expect(container.firstChild).toHaveClass('my-custom-class')
|
|
})
|
|
|
|
it('applies the correct variant class', () => {
|
|
const { container } = render(<Alert variant="error">Error</Alert>)
|
|
expect(container.firstChild).toHaveClass('error')
|
|
})
|
|
})
|