dropdown-test.js

jest.dontMock("../dropdown.jsx");

var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var Dropdown = require("../dropdown.jsx");
var items = ["A", "B"];

describe('dropdown', function() {
  it('renders an empty button initially', function() {
    var c = TestUtils.renderIntoDocument(<Dropdown menuItems={items} />);

    expect(c.refs.button.getDOMNode().textContent).toEqual('');
    expect(c.refs.list).toBeUndefined();
  });

  it('renders a list of options on click', function() {
    var c = TestUtils.renderIntoDocument(<Dropdown menuItems={items} />);

    TestUtils.Simulate.click(c.refs.button.getDOMNode());

    expect(c.refs.button.getDOMNode().className).toContain("active");
    expect(c.refs.list.getDOMNode()).toBeDefined();
    expect(TestUtils.scryRenderedDOMComponentsWithTag(c, "li").map(function(li) {
      return li.getDOMNode().textContent;
    })).toEqual(items);
  });

  it('updates the value of button when option is clicked', function() {
    var c = TestUtils.renderIntoDocument(<Dropdown menuItems={items} />);

    items.forEach(function(value, index) {
      TestUtils.Simulate.click(c.refs.button.getDOMNode());
      TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(c, "a")[index].getDOMNode());

      expect(c.refs.list).toBeUndefined();
      expect(c.refs.button.getDOMNode().className).not.toContain("active");
      expect(c.refs.button.getDOMNode().textContent).toEqual(value);
    })
  });

  it('marks currently selected option', function() {
    var c = TestUtils.renderIntoDocument(<Dropdown menuItems={items} />);

    items.forEach(function(value, index) {
      TestUtils.Simulate.click(c.refs.button.getDOMNode());
      TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(c, "a")[index].getDOMNode());
      TestUtils.Simulate.click(c.refs.button.getDOMNode());

      expect(TestUtils.scryRenderedDOMComponentsWithTag(c, "li")[index].getDOMNode().className).toContain("active");

      TestUtils.Simulate.click(c.refs.button.getDOMNode());
    })
  });
});

dropdown.jsx

var React = require("react/addons");

var DropdownButton = React.createClass({
  getDefaultProps: function() {
    return {
      active: false,
      title: "Button"
    };
  },

  handleClick: function() {
    this.props.onClick();
  },

  render: function() {
    classes = React.addons.classSet({
      "btn btn-default btn-lg": true,
      "active": this.props.active
    });

    return (
      <button className={classes} onClick={this.handleClick}>
        {this.props.title}
        <span className="caret"></span>
      </button>
    );
  }
});

var DropdownItem = React.createClass({
  handleClick: function() {
    this.props.onClick(this.props.value);
  },

  render: function() {
    var classes = React.addons.classSet({
      "active": this.props.selected,
    });

    return (
      <li className={classes}><a onClick={this.handleClick}>{this.props.value}</a></li>
    );
  },
});

var Dropdown = React.createClass({
  getInitialState: function() {
    return {
      opened: false,
      value: null,
    };
  },

  handleSelect: function(value) {
    this.setState({
      opened: false,
      value: value
    })
  },

  toggle: function() {
    this.setState({
      opened: !this.state.opened
    });
  },

  render: function() {
    var content = this.state.opened ? (
      <ul ref="list" className="dropdown-menu">{this.props.menuItems.map(function(item, index) {
        return <DropdownItem key={index} value={item} onClick={this.handleSelect} selected={this.state.value == item}/>;
      }, this)}</ul>
    ) : null;

    return (
      <div className="dropdown">
        <DropdownButton ref="button" active={this.state.opened} title={this.state.value} onClick={this.toggle}/>
        {content}
      </div>
    );
  },
});

module.exports = Dropdown;