// @flow
import React from 'react';
import { mountWrappedComponent } from '../../../../../utils/tests';

import type { FormInputProps } from './form-input.proptypes';
import { FormInput } from './index';

const DEFAULT_PROPS: FormInputProps<string> = {
  id: 'a-great-id',
  type: 'text',
  placeholder: 'a great placeholder',
  value: 'some value',
  disabled: false,
  error: false,
  focusOnMount: false,
  large: false,
  iconType: 'lock',
  iconPosition: 'left',
  onChange: jest.fn(),
  onFocus: jest.fn(),
  onBlur: jest.fn(),
  onRef: jest.fn(),
};

describe('FormInput', () => {
  describe('when passing onRef', () => {
    it('sets the ref', () => {
      const onRefMock = jest.fn();

      const formInput = mountWrappedComponent(
        <FormInput {...DEFAULT_PROPS} onRef={onRefMock} />,
      );

      expect(onRefMock).toHaveBeenCalledWith(
        formInput.find('input').getDOMNode(),
      );
    });
  });

  describe('onChange handling', () => {
    it('passes the new string and the entire event', () => {
      const onChangeMock = jest.fn();
      const textToChange = 'hello world';

      const formInput = mountWrappedComponent(
        <FormInput {...DEFAULT_PROPS} onChange={onChangeMock} />,
      );

      formInput
        .find('input')
        .simulate('change', { target: { value: textToChange } });

      expect(onChangeMock).toHaveBeenCalledWith(
        textToChange,
        expect.objectContaining({ target: { value: textToChange } }),
      );
    });
  });
});
