import React from 'react';
import { render } from '@testing-library/react';
import { StepIndicator, StepIndicatorProps } from '../step-indicator';

describe('<StepIndicator>', () => {
    const defaultProps: StepIndicatorProps = {
        glyphIconName: 'close',
        variant: 'error',
    };

    const renderComponent = (customProps?: Partial<StepIndicatorProps>) => {
        const props = { ...defaultProps, ...customProps };

        return render(<StepIndicator {...props} />);
    };

    test('renders "error" status', () => {
        const { getByTestId } = renderComponent();

        expect(getByTestId('StepIndicator')).toHaveClass('variant-error');
        expect(getByTestId('CloseGlyphIcon')).toBeInTheDocument();
    });

    test('renders "sucess" status', () => {
        const { getByTestId } = renderComponent({
            glyphIconName: 'check',
            variant: 'success',
        });

        expect(getByTestId('StepIndicator')).toHaveClass('variant-success');
        expect(getByTestId('CheckGlyphIcon')).toBeInTheDocument();
    });
});