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

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

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

  it('has a role list item', () => {
    expect(wrapper.find('View').find({ accessibilityRole: 'listitem' })).toExist();
  });

  it('has a single-line text', () => {
    const primaryText = 'Single-line text';
    wrapper.setProps({ primaryText });
    expect(wrapper.find('ListItemText')).toHaveProp('primaryText', primaryText);
  });

  it('has a two-line text', () => {
    const primaryText = 'Two-line text';
    const secondaryText = 'Secondary text';
    wrapper.setProps({ primaryText, secondaryText });
    expect(wrapper.find('ListItemText')).toHaveProp('primaryText', primaryText);
    expect(wrapper.find('ListItemText')).toHaveProp('secondaryText', secondaryText);
  });

  it('doesn\'t have a three-line text', () => {
    const event = { nativeEvent: { layout: { height: 20 } } };
    wrapper.find('ListItemText').simulate('layout', event);
    expect(wrapper).toHaveState('threeLine', false);
  });

  it('has a three-line text', () => {
    const event = { nativeEvent: { layout: { height: 45 } } };
    wrapper.find('ListItemText').simulate('layout', event);
    expect(wrapper).toHaveState('threeLine', true);
  });

  it('can be a dense item', () => {
    wrapper.setProps({ dense: true });
    expect(wrapper.find('ListItemText')).toHaveProp('dense', true);
  });

  it('can be single-line dense item', () => {
    const primaryText = 'Single line text';
    wrapper.setProps({ dense: true, primaryText });
    expect(wrapper.find('View').prop('style'))
      .toEqual(expect.objectContaining(StyleSheet.flatten(styles.singleLineDense) || {}));
  });

  it('can be two-line dense item', () => {
    const primaryText = 'Two-line text';
    const secondaryText = 'Secondary text';
    wrapper.setProps({ dense: true, primaryText, secondaryText });
    expect(wrapper.find('View').prop('style'))
      .toEqual(expect.objectContaining(StyleSheet.flatten(styles.twoLineDense) || {}));
  });

  it('can be three-line dense item', () => {
    const event = { nativeEvent: { layout: { height: 45 } } };
    wrapper.find('ListItemText').simulate('layout', event);
    wrapper.setProps({ dense: true });
    expect(wrapper.find('View').prop('style'))
      .toEqual(expect.objectContaining(StyleSheet.flatten(styles.threeLineDense) || {}));
  });

  it('can have an avatar', () => {
    wrapper.setProps({ avatar: {} });
    const avatar = wrapper.find('ListItemLeft');
    expect(avatar).toExist();
    expect(avatar).toHaveProp('avatar', {});
  });

  it('can have an avatar and dense', () => {
    wrapper.setProps({ avatar: {}, dense: true });
    expect(wrapper.find('View').prop('style'))
      .toEqual(expect.objectContaining(StyleSheet.flatten(styles.withAvatarDense) || {}));
  });

  it('can have an icon', () => {
    wrapper.setProps({ icon: 'email' });
    const icon = wrapper.find('ListItemLeft');
    expect(icon).toExist();
    expect(icon).toHaveProp('icon', 'email');
  });

  it('can have an avatar and icon', () => {
    wrapper.setProps({ avatar: {}, icon: 'email' });
    const avatar = wrapper.find('ListItemLeft');
    expect(avatar).toExist();
    expect(avatar).toHaveProp('avatar', {});
    const icon = wrapper.find('ListItemRight');
    expect(icon).toExist();
    expect(icon).toHaveProp('icon', 'email');
  });

  it('can be a button', () => {
    wrapper.setProps({ button: true });
    expect(wrapper.find('Ripple')).toExist();
  });
});
