5cc720be8f
- 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>
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { Textarea } from './textarea';
|
|
|
|
describe('Textarea Component', () => {
|
|
it('renders textarea', () => {
|
|
render(<Textarea placeholder="Enter text" />);
|
|
|
|
const textarea = screen.getByPlaceholderText('Enter text');
|
|
expect(textarea).toBeInTheDocument();
|
|
expect(textarea).toHaveClass('bg-muted');
|
|
});
|
|
|
|
it('renders with label', () => {
|
|
render(<Textarea label="Description" />);
|
|
|
|
const label = screen.getByText('Description');
|
|
expect(label).toBeInTheDocument();
|
|
|
|
const textarea = screen.getByLabelText('Description');
|
|
expect(textarea).toBeInTheDocument();
|
|
});
|
|
|
|
it('displays error message', () => {
|
|
render(<Textarea error="This field is required" />);
|
|
|
|
const error = screen.getByText('This field is required');
|
|
expect(error).toBeInTheDocument();
|
|
expect(error).toHaveClass('text-destructive');
|
|
|
|
const textarea = screen.getByRole('textbox');
|
|
expect(textarea).toHaveClass('border-destructive');
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Textarea className="custom-textarea" />);
|
|
|
|
const textarea = screen.getByRole('textbox');
|
|
expect(textarea).toHaveClass('custom-textarea');
|
|
});
|
|
|
|
it('handles disabled state', () => {
|
|
render(<Textarea disabled />);
|
|
|
|
const textarea = screen.getByRole('textbox');
|
|
expect(textarea).toBeDisabled();
|
|
});
|
|
|
|
it('handles value prop', () => {
|
|
render(<Textarea value="Test value" readOnly />);
|
|
|
|
const textarea = screen.getByRole('textbox');
|
|
expect(textarea).toHaveValue('Test value');
|
|
});
|
|
});
|