fa56dfa77e
- Replace all kodo-* color classes across ~100 TSX files: kodo-void → background, kodo-ink → card, kodo-graphite → muted, kodo-steel → muted-foreground, kodo-cyan → primary, kodo-magenta → destructive, kodo-lime → success, kodo-red → destructive, kodo-gold → warning - Replace cyan-500, magenta-500, lime-500 default Tailwind colors with semantic equivalents (primary, destructive, success) - Fix WaveformVisualizer hardcoded hex colors to SUMI values - Delete global-effects.css (conflicting, redundant with index.css) Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
2.6 KiB
TypeScript
84 lines
2.6 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-muted/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-muted/10');
|
|
expect(alert).toHaveClass('text-muted-foreground');
|
|
});
|
|
|
|
it('renders success variant', () => {
|
|
render(<Alert variant="success">Success message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-success/10');
|
|
expect(alert).toHaveClass('text-success');
|
|
});
|
|
|
|
it('renders warning variant', () => {
|
|
render(<Alert variant="warning">Warning message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-warning/10');
|
|
expect(alert).toHaveClass('text-warning');
|
|
});
|
|
|
|
it('renders error variant', () => {
|
|
render(<Alert variant="error">Error message</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('bg-destructive/10');
|
|
expect(alert).toHaveClass('text-destructive');
|
|
});
|
|
|
|
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-destructive/10');
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Alert className="custom-alert">Custom alert</Alert>);
|
|
|
|
const alert = screen.getByRole('alert');
|
|
expect(alert).toHaveClass('custom-alert');
|
|
});
|
|
});
|