veza/apps/web/src/components/ui/progress.test.tsx

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).toHaveClass('custom-progress');
  });
});