popover.js

/** @jsx React.DOM */
'use strict';

var Popover = module.exports = React.createClass({
  getInitialState() {
    return {
      isOpen: false,
      activeText: this.props.items[0]
    };
  },

  onClick() {
    console.log('Popover clicked');
    return this.setState({isOpen: !this.state.isOpen});
  },

  onSelect(item) {
    this.setState({
      isOpen: false,
      activeText: item
    });

    console.log('onSelect', item);
    this.props.onChange(item);
  },

  _renderItem(item) {
    var classes = React.addons.classSet({
      'popover__option': true,
      'popover__option--is-active': item === this.state.activeText,
    });

    if (item === 'divider')
      return <li className='popover__divider' />;

    return (
      <li className='popover__item'>
        <button className={classes} onClick={this.onSelect.bind(this, item)}>{item}</button>
      </li>
    );
  },

  render() {
    var classes = React.addons.classSet({
      'popover': true,
      'popover--is-open': this.state.isOpen,
    });

    var items = this.props.items.map(this._renderItem, this);

    return (
      <div className={classes}>
        <button ref='button' className='btn' onClick={this.onClick}>{this.props.children}</button>
        <ul ref='panel' className='popover__panel'>
          {items}
        </ul>
        <div onClick={this.onClick} className='popover__overlay' />
      </div>
    );
  }
});

test.js

/** @jsx React.DOM */
'use strict';

var TestUtils;
var Popover = require('./popover');
var assert = require('assert');
function noop(){}

describe('Popover', function() {
  var ITEMS;
  beforeEach(() => {
    TestUtils = React.addons.TestUtils;

    ITEMS = [
      'Item 1',
      'Item 2',
      'Item 3',
    ];
  });

  it('should render a popover', () => {
    var instance = <Popover items={ITEMS}>My Popover</Popover>;
    var popover = TestUtils.renderIntoDocument(instance);
    assert(popover.refs.button.getDOMNode().textContent === 'My Popover', 'Button textContent should equal `My Popover`');
    assert(popover.refs.panel.getDOMNode().querySelectorAll('.popover__item').length === 3, 'There should be 3 .popover__item\'s');
  })

  it('should be openable', () => {
    var instance = <Popover items={ITEMS}>A Popover</Popover>;
    var popover = TestUtils.renderIntoDocument(instance);

    var button = popover.refs.button;
    TestUtils.Simulate.click(button);
    console.log(popover.getDOMNode());

    assert(/is-open/.test(popover.getDOMNode().className), 'Popover should have `popover--is-open` class');

    //var spy = sinon.spy(button, 'onClick');
    //assert(spy.called, 'Popover onClick handler should be called');
  });

  xit('should be selectable', (done) => {
    var spy = sinon.spy();
    var instance = <Popover onChange={spy} items={ITEMS}>A Popover</Popover>;
    var popover = TestUtils.renderIntoDocument(instance);
    var element = popover.refs.panel.getDOMNode().querySelectorAll('.popover__item')[2];
    TestUtils.Simulate.click(element);

    setTimeout(() => {
      assert(spy.calledWith('Item 3'), 'onChange handler should have been called with `Item 3`');
      done();
    });
  });

});