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>
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { Progress } from './progress';
|
|
|
|
describe('Progress Component', () => {
|
|
it('renders progress bar', () => {
|
|
render(<Progress value={50} />);
|
|
|
|
const progressBar = screen.getByRole('progressbar');
|
|
expect(progressBar).toBeInTheDocument();
|
|
});
|
|
|
|
it('displays correct percentage', () => {
|
|
render(<Progress value={75} />);
|
|
|
|
const fill = document.querySelector('.h-full');
|
|
expect(fill).toHaveStyle({ width: '75%' });
|
|
});
|
|
|
|
it('renders with default variant', () => {
|
|
render(<Progress value={50} />);
|
|
|
|
const progressBar = screen.getByRole('progressbar');
|
|
expect(progressBar).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders gaming variant', () => {
|
|
render(<Progress value={50} variant="glass" />);
|
|
|
|
const progressBar = screen.getByRole('progressbar');
|
|
expect(progressBar).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders with labels', () => {
|
|
render(<Progress value={50} labelLeft="0%" labelRight="100%" />);
|
|
|
|
expect(screen.getByText('0%')).toBeInTheDocument();
|
|
expect(screen.getByText('100%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('handles different colors', () => {
|
|
const { rerender } = render(<Progress value={50} color="cyan" />);
|
|
let fill = document.querySelector('.bg-primary');
|
|
expect(fill).toBeInTheDocument();
|
|
|
|
rerender(<Progress value={50} color="magenta" />);
|
|
fill = document.querySelector('.bg-destructive');
|
|
expect(fill).toBeInTheDocument();
|
|
|
|
rerender(<Progress value={50} color="lime" />);
|
|
fill = document.querySelector('.bg-success');
|
|
expect(fill).toBeInTheDocument();
|
|
|
|
rerender(<Progress value={50} color="gold" />);
|
|
fill = document.querySelector('.bg-warning');
|
|
expect(fill).toBeInTheDocument();
|
|
});
|
|
|
|
it('clamps value between 0 and 100', () => {
|
|
const { rerender } = render(<Progress value={150} />);
|
|
let fill = document.querySelector('.h-full');
|
|
expect(fill).toHaveStyle({ width: '100%' });
|
|
|
|
rerender(<Progress value={-10} />);
|
|
fill = document.querySelector('.h-full');
|
|
expect(fill).toHaveStyle({ width: '0%' });
|
|
});
|
|
|
|
it('handles custom max value', () => {
|
|
render(<Progress value={50} max={200} />);
|
|
|
|
const fill = document.querySelector('.h-full');
|
|
expect(fill).toHaveStyle({ width: '25%' }); // 50/200 = 25%
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Progress value={50} className="custom-progress" />);
|
|
|
|
const progressBar = screen.getByRole('progressbar');
|
|
expect(progressBar.parentElement).toHaveClass('custom-progress');
|
|
});
|
|
});
|