84 lines
2.6 KiB
TypeScript
84 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="gaming" />);
|
||
|
|
|
||
|
|
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-kodo-cyan');
|
||
|
|
expect(fill).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(<Progress value={50} color="magenta" />);
|
||
|
|
fill = document.querySelector('.bg-kodo-magenta');
|
||
|
|
expect(fill).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(<Progress value={50} color="lime" />);
|
||
|
|
fill = document.querySelector('.bg-kodo-lime');
|
||
|
|
expect(fill).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(<Progress value={50} color="gold" />);
|
||
|
|
fill = document.querySelector('.bg-kodo-gold');
|
||
|
|
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');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|