ButtonSelectorWidget

Source

index.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/ButtonSelectorWidget.mcss';

export default class ButtonSelectorWidget extends React.Component {
  constructor(props) {
    super(props);

    // Bind callback
    this.processItem = this.processItem.bind(this);
  }

  processItem(event) {
    const name = event.target.name;
    const array = this.props.list;
    let count = array.length;

    if (this.props.onChange) {
      while (count) {
        count -= 1;
        if (array[count].name === name) {
          this.props.onChange(count, array);
        }
      }
    }
  }

  render() {
    const list = [];

    this.props.list.forEach((item) => {
      list.push(
        <button
          type="button"
          className={style.button}
          key={item.name}
          name={item.name}
          onClick={this.processItem}
        >
          {item.name}
        </button>
      );
    });

    return <section className={style.container}>{list}</section>;
  }
}

ButtonSelectorWidget.propTypes = {
  list: PropTypes.array.isRequired,
  onChange: PropTypes.func,
};

ButtonSelectorWidget.defaultProps = {
  onChange: undefined,
};

test.js

import ButtonSelector from './index';
import expect from 'expect';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react/lib/ReactTestUtils';

describe('ButtonSelector', function () {
  afterEach(function (done) {
    ReactDOM.unmountComponentAtNode(document.body);
    document.body.innerHTML = '';
    setTimeout(done);
  });

  it('lists buttons given an array of objects', function () {
    var options = [
        { name: 'Choice A' },
        { name: 'Choice B' },
        { name: 'Choice C' },
      ],
      el = TestUtils.renderIntoDocument(<ButtonSelector list={options} />),
      buttons = TestUtils.scryRenderedDOMComponentsWithTag(el, 'button');

    expect(buttons.length).toBe(options.length);
    expect(buttons[0].name).toBe(options[0].name);
  });

  it('lists buttons given an array of objects', function () {
    var changling = 0,
      countOut = -1,
      arrayOut = [],
      options = [
        { name: 'Choice A' },
        { name: 'Choice B' },
        { name: 'Choice C' },
      ],
      el = TestUtils.renderIntoDocument(
        <ButtonSelector
          list={options}
          onChange={(count, array) => {
            changling += 1;
            countOut = count;
            arrayOut = array;
          }}
        />
      ),
      buttons = TestUtils.scryRenderedDOMComponentsWithTag(el, 'button');

    TestUtils.Simulate.click(buttons[0]);
    expect(changling).toEqual(1);
    expect(countOut).toEqual(0);
    expect(arrayOut).toEqual(options);
  });
});