// @flow
import React from 'react';
import { StyleSheet } from 'react-native';
import { shallow, mount } from 'enzyme';
import TextField from './TextField';
import styles from './TextField.styles';

describe('TextField component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<TextField />);
  });

  it('has a TextInput', () => {
    expect(wrapper.find('TextInput')).toExist();
  });

  it('has a label', () => {
    wrapper.setProps({ label: 'Title' });
    expect(wrapper.find('TextFieldLabel')).toHaveProp('text', 'Title');
  });

  it('can be hovered', () => {
    wrapper.find('TextInput').simulate('mouseOver');
    expect(wrapper).toHaveState('isHovered', true);
  });

  it('can be unhovered', () => {
    wrapper.setState({ isHovered: true });
    wrapper.find('TextInput').simulate('mouseOut');
    expect(wrapper).toHaveState('isHovered', false);
  });

  it('when hovered applies styles', () => {
    wrapper.setState({ isHovered: true });
    expect(wrapper.find('TextInput'))
      .toHaveProp('style', expect.objectContaining(StyleSheet.flatten(styles.hovered) || {}));
  });

  it('can be focused', () => {
    wrapper.find('TextInput').simulate('focus');
    expect(wrapper).toHaveState('isFocused', true);
  });

  it('can be unfocused', () => {
    wrapper.setState({ isFocused: true });
    wrapper.find('TextInput').simulate('blur');
    expect(wrapper).toHaveState('isFocused', false);
  });

  it('when focused applies styles', () => {
    wrapper.setState({ isFocused: true });
    expect(wrapper.find('TextInput'))
      .toHaveProp('style', expect.objectContaining(StyleSheet.flatten(styles.focused) || {}));
  });

  it('when value present it has default value', () => {
    const mounted = mount(<TextField defaultValue="yes" />);
    expect(mounted).toHaveState('hasValue', true);
  });

  it('when value present it has value', () => {
    const mounted = mount(<TextField value="yes" />);
    expect(mounted).toHaveState('hasValue', true);
  });

  it('when text changes to something it has value', () => {
    expect(wrapper).toHaveState('hasValue', false);
    wrapper.find('TextInput').simulate('changeText', 'yes');
    expect(wrapper).toHaveState('hasValue', true);
  });

  it('when text changes to nothing it does not have value', () => {
    wrapper.setState({ hasValue: true });
    wrapper.find('TextInput').simulate('changeText', '');
    expect(wrapper).toHaveState('hasValue', false);
  });
});
