import React from 'react';
import { render as shallow } from '@testing-library/react';
import { formatNumber } from 'src/utils/formatNumber';
import Metric, { Props, CLASSNAME, EMPTY_CHAR } from '../Metric';

const render = (props: Props) => {
    const { container } = shallow(<Metric {...props} />);
    if (!container.firstElementChild) throw new Error('Metric element not found');
    return container.firstElementChild as HTMLElement;
};

test('"value" is rendered', () => {
    const value = 999;

    expect(render({ value }).innerHTML).toBe(formatNumber(value));
});

test('undefined "value" is rendered', () => {
    const value = undefined;

    expect(render({ value }).innerHTML).toBe(EMPTY_CHAR);
});

test('"size" is reflected in classnames', () => {
    const sizeLg = 'lg';
    const sizeSm = 'sm';

    expect(render({ size: sizeLg }).classList.contains(`${CLASSNAME}-${sizeLg}`)).toBe(true);
    expect(render({ size: sizeSm }).classList.contains(`${CLASSNAME}-${sizeSm}`)).toBe(true);
});

test('"className" is reflected in classnames', () => {
    const className = 'some-color';

    expect(render({ className }).classList.contains(className)).toBe(true);
});

test('percentage "format" is rendered correctly', () => {
    const value = 0.18;
    const decimalValue = 0.18881723812;

    expect(render({ value, format: 'percentage' }).innerHTML).toBe('18%');
    expect(render({ value: decimalValue, format: 'percentage' }).innerHTML).toBe('18.9%');
});