import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { LoadingSpinner, LoadingSpinnerProps } from '../loadingSpinner';

describe('<LoadingSpinner>', () => {
    const renderComponent = (props: Partial<LoadingSpinnerProps> = {}) =>
        render(<LoadingSpinner {...props} />);

    testComponent(LoadingSpinner);

    test('applies style', () => {
        const { getByTestId } = renderComponent({ style: { marginTop: 10 } });
        expect(getByTestId('LoadingSpinner')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders default without "show" class', () => {
        const { container } = renderComponent();
        const spinner = container.getElementsByClassName('LoadingSpinner').item(0);
        expect(spinner).toBeVisible();
        expect(spinner).not.toHaveClass('show');
    });

    describe('with "show" prop set true', () => {
        test('renders with "show" class', () => {
            const { container } = renderComponent({ show: true });
            const spinner = container.getElementsByClassName('LoadingSpinner').item(0);
            expect(spinner).toHaveClass('show');
        });
    });

    describe('size', () => {
        test.each([12, 16, 24, 48, 80])('%i', (size) => {
            const { container } = renderComponent({ show: true, size } as LoadingSpinnerProps);
            const spinner = container.getElementsByClassName('LoadingSpinner-inner').item(0);
            expect(spinner).toHaveClass(`size-${size}`);
        });
    });

    describe('percentage', () => {
        test('is rendered when size=80', () => {
            const { getByText } = renderComponent({ show: true, size: 80, percentage: 21 });
            expect(getByText('21%')).toBeVisible();
        });

        test.each([12, 16, 24, 48])('is not rendered for size %i', (size) => {
            const { queryByText } = renderComponent({
                show: true,
                size,
                percentage: 21,
            } as LoadingSpinnerProps);
            expect(queryByText('21%')).toBeNull();
        });
    });
});