/*global React, chai, describe, it, Controllables*/
const {assert} = chai;
const {Simulate, findRenderedDOMComponentWithClass, findRenderedComponentWithType: find} = React.addons.TestUtils;


const DumbThing = React.createClass({
  displayName: 'Thing',
  render() {
    return (
      <div
          className="clickme"
          onClick={this.handleClick.bind(this)}>
        { `VALUE:${ this.props.value }` }
      </div>
    );
  },
  handleClick() {
    if (this.props.onValueChange) this.props.onValueChange(this.props.value + 1);
  },
});

const Thing = Controllables.controllable(DumbThing, {value: 0});


function click(tree) {
  Simulate.click(findRenderedDOMComponentWithClass(tree, 'clickme'));
}


function assertRenderedIncludes(component, str) {
  assert.include(React.renderToString(component), `VALUE:${ str }`);
}


describe('higher-order component', () => {

  describe('an uncontrolled state', () => {

    it('should use the internal default', () => {
      assertRenderedIncludes(<Thing />, 0);
    });

    it('should use the provided default', () => {
      assertRenderedIncludes(<Thing defaultValue={1} />, 1);
    });

  });

  describe('a controlled state', () => {

    it('should use the provided value', () => {
      assertRenderedIncludes(<Thing value={2} />, 2);
    });

    it('should not change the controllable value itself', () => {
      const el = document.createElement('div');
      const thing = React.render(<Thing value={2} />, el);
      click(thing);
      assert.equal(thing.props.value, 2);
    });

    it('should invoke onBlahChange callbacks', () => {
      const App = React.createClass({
        getInitialState() { return {value: 2}; },
        handleValueChange(newValue, oldValue) {
          this.setState({value: newValue});
        },
        render() {
          return (
            <Thing
              value={this.state.value}
              onValueChange={this.handleValueChange} />
          );
        },
      });
      const el = document.createElement('div');
      const app = React.render(<App />, el);
      click(app);
      assert.equal(app.state.value, 3);
      assert.equal(find(app, DumbThing).props.value, 3);
    });

    it('should invoke onBlahChange callbacks even when controlled', () => {
      const App = React.createClass({
        getInitialState() { return {value: 2}; },
        handleValueChange(newValue, oldValue) {
          this.setState({value: newValue});
        },
        render() {
          return (
            <Thing
              value={this.state.value}
              onValueChange={this.handleValueChange} />
          );
        },
      });
      const el = document.createElement('div');
      const app = React.render(<App />, el);
      click(app);
      assert.equal(app.state.value, 3);
      assert.equal(find(app, DumbThing).props.value, 3);
    });

  });

});

@@ -186,20 +186,20 @@
 ils;%0A%0A%0Ac
-onst
+lass
  DumbThi
@@ -205,53 +205,33 @@
 ing 
-= React.createClass(%7B%0A  displayName: 'Thing',
+extends React.Component %7B
 %0A  r
@@ -408,17 +408,16 @@
   );%0A  %7D
-,
 %0A  handl
@@ -516,13 +516,10 @@
 %0A  %7D
-,
 %0A%7D
-);
 %0A%0Aco

Use class instead of createClass