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

describe('[Native] AtomInputEmail', () => {

    it('Rendered component onchange', () => {
        const mockChange = jest.fn();
        const component = render(
            
                <AtomInputEmail
                    placeholder={'placeholder'}
                    disabled={false}
                    readOnly={false}
                    onChange={mockChange}
                />
            
        )
        const input = component.getByTestId('TestInputEmail');
        fireEvent.changeText(input, 'test');

        expect(mockChange).toHaveBeenCalled()
    });

    it('Rendered component ReadOnly', () => {
       const component = render(
            
                <AtomInputEmail
                    value={'test@test.com'}
                    readOnly={true}
                />
            
        )
        const input = component.getByTestId('TestInputEmail');
       
        expect(input).toHaveStyleRule('border-color', `${theme.transparent}`)
    });

    it('Rendered component Required', () => {
        const component = render(
             
                 <AtomInputEmail
                     value={''}
                     required={true}
                 />
             
         )
         const input = component.getByTestId('TestInputEmail');
        
         expect(input).toHaveStyleRule('border-color', `${theme.secondary400}`)
     });
 
    it('Rendered component disabled', () => {
        const component = render(
            
                <AtomInputEmail
                    disabled={true}
                />
            
        )
        const input = component.getByTestId('TestInputEmail');
        
        expect(input).toHaveStyleRule('border-color', `${theme.neutral300}`)
    });


    it('Rendered component with value', () => {
        const component = render(
            
                <AtomInputEmail
                    value='testemail@test.com'
                />
            
        )
        const input = component.getByTestId('TestInputEmail');

        expect(input.props.value).toBe('testemail@test.com')
    });

    test('Validate incorrect email', async () => {
        const mockErrorCallback = jest.fn();
        const mockOnChange = jest.fn();
        const component = render(
            
                <AtomInputEmail
                    onChange={mockOnChange}
                    errorCallback={mockErrorCallback}
                />
            
        )
        const input = component.getByTestId('TestInputEmail');
        fireEvent.changeText(input, 'notValidEmail');

        expect(mockOnChange).toHaveBeenCalled()
        await waitFor(() => expect(mockErrorCallback).toHaveBeenCalled())
        expect(input).toHaveStyleRule('border-color', theme.secondary400)
    });

    test('Validate incorrect email regex', async () => {
        const mockErrorCallback = jest.fn();
        const mockOnChange = jest.fn();
        const component = render(
            
                <AtomInputEmail
                    onChange={mockOnChange}
                    errorCallback={mockErrorCallback}
                    regex={'^[0-9]+$'}
                />
            
        )
        const input = component.getByTestId('TestInputEmail');
        fireEvent.changeText(input, 'notValidEmailRegex');

        expect(mockOnChange).toHaveBeenCalled()
        await waitFor(() => expect(mockErrorCallback).toHaveBeenCalled())
        expect(input).toHaveStyleRule('border-color', theme.secondary400)
    });


    test('Validate correct email', async () => {
        const mockErrorCallback = jest.fn();
        const mockOnChange = jest.fn();

        const component = render(
            
                <AtomInputEmail
                    onChange={mockOnChange}
                    errorCallback={mockErrorCallback}
                />
            
        )
        const input = component.getByTestId('TestInputEmail');
        fireEvent.changeText(input, 'testemail@test.com');

        expect(mockOnChange).toHaveBeenCalled()
        await waitFor(() => expect(mockErrorCallback).toHaveBeenCalledTimes(0))
        expect(input).toHaveStyleRule('border-color', `${theme.neutral400}`)
    });

});


