import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { range } from 'lodash';
import { render } from '@testing-library/react';
import { formatNumber, formatPercentage } from 'src/utils/formatNumber';
import { SKIPS } from 'src/constants/graphs';
import { EMPTY_CHAR } from 'src/components/metric';
import MetricsHero, { Props } from '../MetricsHero';

describe('<MetricsHero>', () => {
    const defaultProps: Props = {
        potMetric: 'streams',
        loading: false,
        values: [],
        count: 0
    };

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


    describe('when loading', () => {
        test('shows loading indicators', () => {
            const count = 2;
            const container = renderMocked({ loading: true, count });

            const loaderItems = container.baseElement.getElementsByClassName('LoaderWrapper-item');
            expect(loaderItems).toHaveLength(count);
        });
    });

    describe('when not loading', () => {
        test('does not show loading indicators', () => {
            const container = renderMocked({ loading: false });
            const loaderItems = container.baseElement.getElementsByClassName('LoaderWrapper-item');
            expect(loaderItems).toHaveLength(0);
        });

        test('shows metric percentage values', () => {
            const values = [0.2, 0.3];
            const count = values.length + 1;
            const potMetric = SKIPS;
            const container = renderMocked({ potMetric, values, count });

            range(count).forEach(i => {
                const text = values[i]
                    ? formatPercentage(values[i])
                    : EMPTY_CHAR;

                expect(container.getByText(text)).toBeVisible();
            });
        });

        test('shows metric values', () => {
            const values = [1, 1000];
            const count = values.length + 1;
            const container = renderMocked({ values, count });

            range(count).forEach(i => {
                const text = values[i]
                    ? formatNumber(values[i])
                    : EMPTY_CHAR;

                expect(container.getByText(text)).toBeVisible();
            });
        });

        test('applies dataviz color class', () => {
            const { container } = renderMocked({ loading: false, count: 2 });

            const metric1 = container.getElementsByClassName('color-dataviz-0').item(0);
            const metric2 = container.getElementsByClassName('color-dataviz-1').item(0);

            expect(metric1).toBeVisible();
            expect(metric2).toBeVisible();
        });
    });
});