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

describe('Progress Component', () => {
    it('debería renderizar la barra con el valor porcentual correcto', () => {
        const { container, rerender } = render(<Progress value={45} />);
        let innerDiv = container.querySelector('.bg-primary') as HTMLElement;
        expect(innerDiv.style.transform).toBe('translateX(-55%)');

        rerender(<Progress value={80} />);
        innerDiv = container.querySelector('.bg-primary') as HTMLElement;
        expect(innerDiv.style.transform).toBe('translateX(-20%)');
    });

    it('debería soportar un valor nulo o undefined por defecto como 0', () => {
        const { container } = render(<Progress />);
        const innerDiv = container.querySelector('.bg-primary') as HTMLElement;
        expect(innerDiv.style.transform).toBe('translateX(-100%)');
    });
});