import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import ProgressBar, { Props, CLASSNAME } from '../ProgressBar';

describe('<ProgressBar>', () => {
    const classes = [
        CLASSNAME,
        `${CLASSNAME}-percentage`,
        `${CLASSNAME}-bar`,
        `${CLASSNAME}-container`,
    ];
    const defaultProps: Props = {
        className: 'TestClass',
        progressBarClassName: 'TestProgressClass',
        value: 0.4,
        index: 0,
    };

    const renderMocked = (props?: Partial<Props>) =>
        render(<ProgressBar {...{ ...defaultProps, ...props }} />);

    test('renders ProgressBar', () => {
        const component = renderMocked();
        const { container } = component;
        const percentValue = component.getByText('40%');
        expect(percentValue).toBeVisible();
        classes.forEach(className => (
            expect(container.getElementsByClassName(className).length).toBe(1)));
    });

    test('returns null if incorrect value', () => {
        const { container } = renderMocked({ value: Number.NaN });
        expect(container.getElementsByClassName(CLASSNAME).length).toBe(0);
    });

    test('returns 100% value if value overflow', () => {
        const { container } = renderMocked({ value: Number.NaN });
        expect(container.getElementsByClassName(CLASSNAME).length).toBe(0);
    });

    test('renders ProgressBar without percentage', () => {
        const { container } = renderMocked({ showPercentage: false });
        expect(container.getElementsByClassName(classes[1]).length).toBe(0);
    });

    test('renders ProgressBar without bar', () => {
        const component = renderMocked({ showBar: false });
        const { container } = component;
        const percentageElements = container.getElementsByClassName(classes[3]);
        expect(percentageElements.length).toBe(0);
    });
});