import React from 'react';
import '@testing-library/jest-dom'
import { render, fireEvent } from "@testing-library/react";
import 'jest-styled-components';
import { AtomInputText } from './index';
import { theme } from 'data/dataMx';

describe('[React ]AtomInputText', () => {
    it('Rendered component onchange', () => {
        const mockChange = jest.fn();
        const component = render(
            <AtomInputText
                name={'name'}
                required={true}
                placeholder={'placeholder'}
                value={'value'}
                disabled={false}
                readOnly={false}
                onChange={mockChange}
            />
        )
        const input = document.querySelector('input') as HTMLInputElement;
        fireEvent.change(input, { target: { value: 'query' } });
        expect(mockChange).toHaveBeenCalled()
    });

    it('Rendered component ReadOnly', () => {
        const component = render(
            <AtomInputText
                readOnly={true}
            />
        )
        const input = document.querySelector('input') as HTMLInputElement;
        const containerStyle = window.getComputedStyle(input);
        const backgroundColor = containerStyle['borderColor'];
        expect(backgroundColor).toBe(`${theme.transparent}`);
    });

    it('Rendered component required', () => {
        render(
            <AtomInputText
            required={true}
            placeholder='Input text'
            />
        )
        const input = document.querySelector('input')
        expect(input).toHaveAttribute('required')
    });

    it('Rendered component disabled', () => {
        const component = render(
            <AtomInputText
                disabled={true}
                value={'qwerty'}
            />
        )
        const input = document.querySelector('input') as HTMLInputElement;
        expect(input).toHaveStyleRule('border-color', theme.neutral300);
        expect(input).toBeDisabled()
    });
});
