import React from 'react';
import {render} from '../../test-utils';
import {Size, States} from '../../types';
import 'jest-styled-components';
import {COLORS, NumberField} from '../..';


describe('<NumberField />', () => {

    it('renders note field', async () => {
        const { getByText } = render(
            <NumberField type='NumberField'  note='test note' size={Size.Medium}/>
        );
        expect(getByText('test note')).toBeDefined();
    });

    it('renders required asterisk', async () => {
        const { queryByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput' required size={Size.Medium}/>
        );
        expect(queryByTestId('labelIcon')).toBeDefined();
    });

    it('does not renders required asterisk', async () => {
        const { queryByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput'  size={Size.Medium}/>
        );
        expect(queryByTestId('labelIcon')).toBeNull();
    });

    it('renders positive note and input container', async () => {
        const { container, getByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
        );
        expect(container.getElementsByClassName('valid').length).toBe(1);
    });

    it('renders warning note and input container', async () => {
        const { container, getByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
        );
        expect(container.getElementsByClassName('invalid').length).toBe(1);
    });

    it('renders correct disabled input container', async () => {
        const { getByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
        );
        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
    });

    it('renders correct readonly input container', async () => {
        const { getByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
        );
        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
    });

    it('renders operators in the input container', async () => {
        const { getByTestId } = render(
            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Medium}/>
        );
        expect(getByTestId('operators').childElementCount).toBe(3);
        expect(getByTestId('operators').firstChild).toBeDefined();
        expect(getByTestId('operators').lastChild).toBeDefined();
    })
})