/**
 * @jest-environment jsdom
 */
import { cleanup, render } from '@testing-library/react';
import React from 'react';
import ProgressBar from '../ProgressBar';

describe('ProgressBar Component', () => {
    afterEach(cleanup);
    it('Shows 90% when valueMin, valueMax, valueNow are 20, 220, 200 respectively', () => {
        const { getByText } = render(<ProgressBar valueMin={20} valueMax={220} valueNow={200} />);
        const progressbarSpan = getByText('90% complete');
        expect(progressbarSpan.className).toBe('sr-only');
        expect(progressbarSpan.parentElement.style).toHaveProperty('width', '90%');
    });
    it('Shows -5% with 0% width when valueNow < valueMin (20, 220, 10)', () => {
        const { getByText } = render(<ProgressBar valueMin={20} valueMax={220} valueNow={10} />);
        const progressbarSpan = getByText('-5% complete');
        expect(progressbarSpan.className).toBe('sr-only');
        expect(progressbarSpan.parentElement.style).toHaveProperty('width', '0%');
    });
    it('Shows 105% with 100% width when valueNow > valueMax (20, 220, 230)', () => {
        const { getByText } = render(<ProgressBar valueMin={20} valueMax={220} valueNow={230} />);
        const progressbarSpan = getByText('105% complete');
        expect(progressbarSpan.className).toBe('sr-only');
        expect(progressbarSpan.parentElement.style).toHaveProperty('width', '100%');
    });
    it('Shows NaN% with 0% width when valueMax < valueMin is less that valueMin', () => {
        const { getByText } = render(<ProgressBar valueMin={220} valueMax={20} valueNow={200} />);
        const progressbarSpan = getByText('NaN% complete');
        expect(progressbarSpan.className).toBe('sr-only');
        expect(progressbarSpan.parentElement.style).toHaveProperty('width', '0%');
    });
    it('Shows NaN% with 0% with when valueMax = valueMin no matter whats the value of valueNow', () => {
        const { getByText } = render(<ProgressBar valueMin={20} valueMax={20} valueNow={200} />);
        const progressbarSpan = getByText('NaN% complete');
        expect(progressbarSpan.className).toBe('sr-only');
        expect(progressbarSpan.parentElement.style).toHaveProperty('width', '0%');
    });
});
