{"size": 5584, "ext": "js", "max_stars_repo_path": "test/list-item/index.test.js", "max_stars_repo_name": "anchorchat/anchor-ui", "max_stars_repo_stars_event_min_datetime": "2017-02-17T08:13:30.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-30T20:10:19.000Z", "max_issues_repo_path": "test/list-item/index.test.js", "max_issues_repo_name": "anchorchat/anchor-ui", "max_issues_repo_issues_event_min_datetime": "2017-01-06T10:42:49.000Z", "max_issues_repo_issues_event_max_datetime": "2020-05-26T22:46:31.000Z", "max_forks_repo_path": "test/list-item/index.test.js", "max_forks_repo_name": "anchorchat/anchor-ui", "max_forks_repo_forks_event_min_datetime": "2017-03-13T10:42:30.000Z", "max_forks_repo_forks_event_max_datetime": "2020-04-30T20:10:20.000Z"}
{"max_stars_count": 19, "max_issues_count": 368, "max_forks_count": 8, "avg_line_length": 35.1194968553, "max_line_length": 132, "alphanum_fraction": 0.6482808023}
/* eslint-env mocha */
/* eslint react/jsx-filename-extension: [0] */
import React from 'react';
import chai, { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';
import ListItem from '../../src/list-item/component';
import AdminBadge from '../../src/admin-badge';
import Button from '../../src/button';
import IconMore from '../../src/icons/icon-more';
import IconMute from '../../src/icons/icon-mute';
import IconBlock from '../../src/icons/icon-block';
import Avatar from '../../src/avatar';
import Badge from '../../src/badge';
import getStyles from '../../src/list-item/get-styles';
import styles from '../../src/list-item/styles';

chai.use(sinonChai);

describe('ListItem', () => {
  const props = {
    primaryText: 'Primary',
    style: {},
    primaryTextStyle: {},
    secondaryTextStyle: {},
    color: '#1BA6C4'
  };

  it('should render root elements', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('div')).to.have.length(1);
    expect(component.find('li')).to.have.length(1);
    expect(component.find('h1')).to.have.length(1);
  });

  it('should render secondaryText element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('h2')).to.have.length(0);

    component.setProps({ secondaryText: 'Text' });
    expect(component.find('h2')).to.have.length(1);
    expect(component.containsMatchingElement(<h2> Text</h2>)).to.equal(true);

    component.setProps({ secondaryText: <span>Node</span> });
    expect(component.find('h2')).to.have.length(1);
    expect(component.find('h2 > span')).to.have.length(1);
    expect(component.find('h2').containsMatchingElement(<span>Node</span>)).to.equal(true);
  });

  it('should render textBadge element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('h2')).to.have.length(0);

    component.setProps({ textBadge: 'Text' });
    expect(component.find('h2')).to.have.length(1);
    expect(component.containsMatchingElement(<h2>Text </h2>)).to.equal(true);

    component.setProps({ secondaryText: <AdminBadge /> });
    expect(component.find('h2')).to.have.length(1);
    expect(component.find(AdminBadge)).to.have.length(1);
    expect(component.find('h2').containsMatchingElement(AdminBadge)).to.equal(true);
  });

  it('should render rightButton element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('div')).to.have.length(1);
    expect(component.find(Button)).to.have.length(0);
    expect(component.find(IconMore)).to.have.length(0);

    component.setProps({ rightButton: <Button iconButton><IconMore /></Button> });
    expect(component.find('div')).to.have.length(2);
    expect(component.find(Button)).to.have.length(1);
    expect(component.find(IconMore)).to.have.length(1);
  });

  it('should render avatar element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('div')).to.have.length(1);
    expect(component.find(Avatar)).to.have.length(0);

    component.setProps({ avatar: 'image' });
    expect(component.find('div')).to.have.length(2);
    expect(component.find(Avatar)).to.have.length(1);
  });

  it('should render badge element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('div')).to.have.length(1);
    expect(component.find(Badge)).to.have.length(0);

    component.setProps({ avatar: 'image', badge: <Badge value={9} maxValue={9} /> });
    expect(component.find('div')).to.have.length(3);
    expect(component.find(Badge)).to.have.length(1);
  });

  it('should render muted element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('div')).to.have.length(1);
    expect(component.find(IconMute)).to.have.length(0);

    component.setProps({ avatar: 'image', muted: true });
    expect(component.find('div')).to.have.length(3);
    expect(component.find(IconMute)).to.have.length(1);
  });

  it('should render blocked element', () => {
    const component = shallow(<ListItem {...props} />);

    expect(component.find('div')).to.have.length(1);
    expect(component.find(IconBlock)).to.have.length(0);

    component.setProps({ avatar: 'image', blocked: true });
    expect(component.find('div')).to.have.length(3);
    expect(component.find(IconBlock)).to.have.length(1);
  });

  it('should call onClick', () => {
    const spy = sinon.spy();
    const component = shallow(<ListItem {...props} />);

    component.setProps({ onClick: spy });
    component.find('li').simulate('click');
    expect(spy).to.have.callCount(1);
  });

  it('should get root styles', () => {
    const spy = sinon.spy(getStyles, 'root');

    shallow(<ListItem {...props} />);
    expect(spy).to.have.been.calledWith(props.color, false, props.style);
  });

  it('should get textContainer styles', () => {
    const spy = sinon.spy(getStyles, 'textContainer');

    shallow(<ListItem {...props} />);
    expect(spy).to.have.been.calledWith('', null);
  });

  it('should get text styles', () => {
    const spy = sinon.spy(getStyles, 'text');
    const component = shallow(<ListItem {...props} />);

    expect(spy).to.have.been.calledWith(styles.primaryText, false, null, props.primaryTextStyle);

    component.setProps({ secondaryText: 'Text' });
    expect(spy).to.have.callCount(3);
    expect(spy).to.have.been.calledWith(styles.secondaryText, false, null, props.secondaryTextStyle); // eslint-disable-line max-len
  });
});
