85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Alert } from './alert';
|
|
|
|
describe('Alert Component', () => {
|
|
it('renders alert with default variant', () => {
|
|
render(<Alert>Default alert message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toBeInTheDocument();
|
|
expect(alert).toHaveTextContent('Default alert message');
|
|
expect(alert).toHaveClass('bg-kodo-cyan/10');
|
|
});
|
|
|
|
it('renders with title', () => {
|
|
render(<Alert title="Alert Title">Alert message</Alert>);
|
|
|
|
expect(screen.getByText('Alert Title')).toBeInTheDocument();
|
|
expect(screen.getByText('Alert message')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders info variant', () => {
|
|
render(<Alert variant="info">Info message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-kodo-cyan/10');
|
|
expect(alert).toHaveClass('text-kodo-cyan');
|
|
});
|
|
|
|
it('renders success variant', () => {
|
|
render(<Alert variant="success">Success message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-kodo-lime/10');
|
|
expect(alert).toHaveClass('text-kodo-lime');
|
|
});
|
|
|
|
it('renders warning variant', () => {
|
|
render(<Alert variant="warning">Warning message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-kodo-gold/10');
|
|
expect(alert).toHaveClass('text-kodo-gold');
|
|
});
|
|
|
|
it('renders error variant', () => {
|
|
render(<Alert variant="error">Error message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-kodo-red/10');
|
|
expect(alert).toHaveClass('text-kodo-red');
|
|
});
|
|
|
|
it('handles onClose callback', () => {
|
|
const handleClose = vi.fn();
|
|
render(<Alert onClose={handleClose}>Closable alert</Alert>);
|
|
|
|
const closeButton = screen.getByRole('button');
|
|
fireEvent.click(closeButton);
|
|
|
|
expect(handleClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('does not show close button when onClose is not provided', () => {
|
|
render(<Alert>Non-closable alert</Alert>);
|
|
|
|
const closeButton = screen.queryByRole('button');
|
|
expect(closeButton).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('maps destructive variant to error', () => {
|
|
render(<Alert variant="destructive">Destructive message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-kodo-red/10');
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Alert className="custom-alert">Custom alert</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('custom-alert');
|
|
});
|
|
});
|
|
|