a react test

person-list_test.jsx

/** @jsx React.DOM */

var assert = require('chai').assert;

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;

var PersonList = require('./person-list.jsx');

describe('PersonList', function() {
  it('should display the right copy when there are no people', function() {
    var personList = TestUtils.renderIntoDocument(
      <PersonList
        people={[]}
        selectedPeople={[]}
        emptyCopy="COPY_CONTENT_EMPTY"
        emptyFilterCopy="COPY_CONTENT_NO_MATCHES"
      />
    );

    var copySpan = TestUtils.findRenderedDOMComponentWithTag(personList, 'span');

    assert.equal(copySpan.getDOMNode().innerText, "COPY_CONTENT_EMPTY");
  });

  it('should display the right copy when no people match a filter', function() {
    var personList = TestUtils.renderIntoDocument(
      <PersonList
        people={[{id: 1, name: "manfred", email: "[email protected]"}]}
        selectedPeople={[]}
        emptyCopy="COPY_CONTENT_EMPTY"
        emptyFilterCopy="COPY_CONTENT_NO_MATCHES"
      />
    );

    personList.setState({
      filterValue: "qqqq",
    });

    var copySpan = TestUtils.findRenderedDOMComponentWithTag(personList, 'span');

    assert.equal(copySpan.getDOMNode().innerText, "COPY_CONTENT_NO_MATCHES");
  });

  it('should render the correct number of rows', function() {
    var people = [
      {id: "1", email: "[email protected]", name: "alice"},
      {id: "2", email: "[email protected]", name: "bob"},
      {id: "3", email: "[email protected]", name: "eve"},
    ];

    var selected = [];

    var personList = TestUtils.renderIntoDocument(
      <PersonList
        people={people}
        selectedPeople={selected}
        emptyCopy="COPY_CONTENT_EMPTY"
        emptyFilterCopy="COPY_CONTENT_NO_MATCHES"
      />
    );

    var nodes = TestUtils.scryRenderedDOMComponentsWithTag(personList, 'li');

    assert.lengthOf(nodes, 3);
  });

  it('should adjust the selectedPeople array correctly', function() {
    var people = [
      {id: "1", email: "[email protected]", name: "alice"},
      {id: "2", email: "[email protected]", name: "bob"},
      {id: "3", email: "[email protected]", name: "eve"},
    ];

    var selected = [];

    var handlePersonClick = function handlePersonClick(person) {
      var pos = selected.indexOf(person);

      if (pos === -1) {
        selected.push(person);
      } else {
        selected.splice(pos, 1);
      }

      personList.forceUpdate();
    };

    var personList = TestUtils.renderIntoDocument(
      <PersonList
        people={people}
        selectedPeople={selected}
        onPersonClick={handlePersonClick}
        emptyCopy="COPY_CONTENT_EMPTY"
        emptyFilterCopy="COPY_CONTENT_NO_MATCHES"
      />
    );

    assert.lengthOf(people, 3);
    assert.lengthOf(selected, 0);

    var nodes = TestUtils.scryRenderedDOMComponentsWithTag(personList, 'li');

    assert.lengthOf(nodes, 3);

    TestUtils.Simulate.click(nodes[0]);

    assert.lengthOf(people, 3);
    assert.lengthOf(selected, 1);
  });
});