3fb12b2ce2
- Created automated script (scripts/replace-decorative-cyan.py) to systematically replace decorative/informational kodo-cyan instances with kodo-steel variants - Script intelligently preserves active/functional states, design system variants, semantic indicators, and interactive states - Modified 85 files, replaced 145 decorative instances, preserved 47 functional instances - No linter errors, type safety maintained - Action 11.3.1.3 significantly advanced (total: ~302 instances replaced across ~229 files including previous batches)
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-kodo-steel/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-steel/10');
|
|
expect(alert).toHaveClass('text-kodo-steel');
|
|
});
|
|
|
|
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');
|
|
});
|
|
});
|