import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Progress } from './progress';
import React from 'react';

describe('Progress', () => {
  it('renders correctly', () => {
    render(<Progress value={50} />);
    expect(screen.getByRole('progressbar')).toBeInTheDocument();
  });

  it('reflects value in indicator transform', () => {
    const { container } = render(<Progress value={75} />);
    const indicator = container.querySelector('[data-slot="progress-indicator"]');
    expect(indicator).toHaveStyle('transform: translateX(-25%)');
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(<Progress value={30} />);
    expect(container.querySelector('[data-slot="progress"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="progress-indicator"]')).toBeInTheDocument();
  });
});