import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { MoleculeQuantityPick } from './index';

describe('[Native] MoleculeQuantityPick', () => {
  it('Render component', () => {
    const props = {
      value: '10',
      min: '0',
      max: '10',
      onRemove: () => jest.fn(),
      onAdd: () => jest.fn(),
      onChange: () => jest.fn()
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    )
  });

  it('Handle Adding', async () => {
    const mockAddHandler = jest.fn();
    const props = {
      value: '1',
      max: '10',
      onRemove: () => jest.fn(),
      onAdd: mockAddHandler,
      onChange: () => jest.fn()
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );

    let addButton = component.getByTestId('quantity-add-button');

    fireEvent.press(addButton);

    expect(mockAddHandler).toHaveBeenCalledTimes(1);
  });

  it('Handle Adding more than max', async () => {
    const mockAddHandler = jest.fn();
    const props = {
      value: '10',
      max: '10',
      onRemove: () => jest.fn(),
      onAdd: mockAddHandler,
      onChange: () => jest.fn()
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );

    let addButton = component.getByTestId('quantity-add-button');

    fireEvent.press(addButton);

    expect(mockAddHandler).toHaveBeenCalledTimes(0);
  });

  it('Handle Removing', async () => {
    const mockRemoveHandler = jest.fn();
    const props = {
      value: '5',
      min: '1',
      max: '5',
      onRemove: mockRemoveHandler,
      onAdd: () => jest.fn(),
      onChange: () => jest.fn()
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );


    let removeButton = component.getByTestId('quantity-remove-button');

    fireEvent.press(removeButton);

    expect(mockRemoveHandler).toHaveBeenCalledTimes(1);
  });
  it('Handle Removing more than min', async () => {
    const mockRemoveHandler = jest.fn();
    const props = {
      value: '1',
      min: '1',
      max: '5',
      onRemove: mockRemoveHandler,
      onAdd: () => jest.fn(),
      onChange: () => jest.fn()
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );


    let removeButton = component.getByTestId('quantity-remove-button');

    fireEvent.press(removeButton);

    expect(mockRemoveHandler).toHaveBeenCalledTimes(0);
  });
  it('Handle Changed', async () => {
    const mockChangeHandler = jest.fn();
    const props = {
      value: '4',
      min: '1',
      max: '5',
      onRemove: () => jest.fn(),
      onAdd: () => jest.fn(),
      onChange: mockChangeHandler
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );


    let inputNumber = component.getByTestId('TestInputNumber');
    fireEvent.changeText(inputNumber, '3');

    expect(mockChangeHandler).toHaveBeenCalled();
  });
  it('Handle Changed lesser than minimun', async () => {
    const mockChangeHandler = jest.fn();
    const props = {
      value: '1',
      min: '2',
      max: '5',
      onRemove: () => jest.fn(),
      onAdd: () => jest.fn(),
      onChange: mockChangeHandler
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );


    let inputNumber = component.getByTestId('TestInputNumber');
    fireEvent.changeText(inputNumber, '1');

    expect(mockChangeHandler).toHaveBeenCalled();
  });
  it('Handle Changed empty', async () => {
    const mockChangeHandler = jest.fn();
    const props = {
      value: '',
      min: '0',
      max: '5',
      onRemove: () => jest.fn(),
      onAdd: () => jest.fn(),
      onChange: mockChangeHandler
    };

    let component = render(
      <MoleculeQuantityPick {...props} />
    );


    let inputNumber = component.getByTestId('TestInputNumber');
    fireEvent.changeText(inputNumber, '1');

    expect(mockChangeHandler).toHaveBeenCalled();
  });
});