// @flow
import React from 'react';
import { shallow } from 'enzyme';
import Ripple from './Ripple';

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

  beforeEach(() => {
    wrapper = shallow(<Ripple><div className="content">Example</div></Ripple>);
  });

  it('wraps content', () => {
    expect(wrapper.find('.content')).toHaveText('Example');
  });

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

  it('can have border radius', () => {
    expect(wrapper.find('View')).not.toHaveStyle('borderRadius');
    wrapper.setProps({ borderRadius: 2 });
    expect(wrapper.find('View')).toHaveStyle('borderRadius', 2);
  });

  it('when hovered has background color', () => {
    expect(wrapper.find('View')).not.toHaveStyle('backgroundColor');
    wrapper.setState({ isHovered: true });
    expect(wrapper.find('View')).toHaveStyle('backgroundColor', expect.stringMatching(/rgba/));
  });

  it('when pressed has background color', () => {
    expect(wrapper.find('View')).not.toHaveStyle('backgroundColor');
    wrapper.setState({ isPressed: true });
    expect(wrapper.find('View')).toHaveStyle('backgroundColor', expect.stringMatching(/rgba/));
  });

  it('detects hover', () => {
    expect(wrapper).toHaveState('isHovered', false);
    wrapper.simulate('mouseOver');
    expect(wrapper).toHaveState('isHovered', true);
    wrapper.simulate('mouseOut');
    expect(wrapper).toHaveState('isHovered', false);
  });

  it('detects press', () => {
    expect(wrapper).toHaveState('isPressed', false);
    wrapper.simulate('pressIn');
    expect(wrapper).toHaveState('isPressed', true);
    wrapper.simulate('pressOut');
    expect(wrapper).toHaveState('isPressed', false);
  });

  it('can set press handler', () => {
    wrapper.simulate('press');
    const handler = jest.fn();
    wrapper.setProps({ onPress: handler });
    wrapper.simulate('press');
    expect(handler).toHaveBeenCalledTimes(1);
  });
});
