How to test `onChange` event with range input in Jasmine/React

1
votes

I'm having issues firing onChange in Jasmine tests (and using Phantom) with React. The particular issue I am seeing is with a range input. Supposing that a className changes in a React component after the onChange event. In Jasmine I am unable to manually fire that onChange in my tests so that I can then assert the DOM changes.

Everything I have tried so far doesn't work - both using React.addons.TestUtils or just doing a simple $(node).trigger('change') on the node in question. I cannot get the onChange to fire on the React node. Does anyone see anything awry with this sample code, or am I missing something?

For example here would be the sample Jasmine code:

// assuming I already have full access to node and its in the DOM
var node = React.findDOMNode(this.refs.input);

// updating input `value` manually
node.value = 10;

// simulate change to `input` so that `onChange` will fire
React.addons.TestUtils.Simulate.change(node);
// or React.addons.TestUtils.Simulate.change(node, { target: { value: 10 } });

// assert that sample `className` is changed for example, this could be anything - just a simple assertion that something in the DOM changed as expected
expect(node.className).not.toBe('hidden');

I can never get the above expect to pass - nothing in the DOM is picking up the value change on the node in question.

Here's also a codepen illustrating the issue: http://codepen.io/bessington/pen/azXwVy

Thanks for your help everyone!

2
javascriptjasminephantomjsreactjs

2 Answers

3
votes

Well looks like it works properly when I use TestUtils. For the life of me not sure why I couldn't get this fully working before. But here is the solution in case anyone else needs it:

<!DOCTYPE html>
<html>
<head>
  <title>React test</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css"/>
  <script defer src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
  <script defer src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
  <script defer src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
  <script defer src="http://fb.me/JSXTransformer-0.10.0.js"></script>
</head>
<body>

<script type="text/jsx">
  /**@jsx React.DOM*/
  var sampleInput = React.createClass({
    getInitialState: function() {
      return {
        inputVal: 2
      }
    },
    updateValue: function(e) {
      // update textual value
      this.setState({ inputVal: e.currentTarget.valueAsNumber });
    },
    render: function() {
      return (
        <div>
          <input type="range" min="0" max="10"
            onChange={this.updateValue}
            value={this.state.inputVal} />
        </div>
      )
    }
  });


  // Jasmine

  describe('A component', function() {

    var TestUtils = React.addons.TestUtils;
    var inputInstance;

    describe('with input range', function() {
      it('updates its value `onChange`', function() {
        inputInstance = TestUtils.renderIntoDocument(
          React.createElement(sampleInput, { sample: true })
        );

        // sanity check
        expect(inputInstance.props.sample).toBe(true);

        var input = React.findDOMNode(inputInstance).querySelector('input');

        input.value = 10;

        TestUtils.Simulate.change(input);

        expect(input.valueAsNumber).toBe(10);
        expect(inputInstance.state.inputVal).toBe(10);
      });
    });
  });
</script>

</body>
</html>
3
votes

Adding my 2 cents on your own answer...

A better option would be to set a spy function on jasmine and check whether it has been called:

describe('A component', () => {
  describe('when it renders', () => {
    it('should trigger the onChange function', () => {
      const callback = jasmine.createSpy('changed');

      const sut = TestUtils.renderIntoDocument(
        <MyReactComponent onChange={callback}>BlaBlaBla</MyReactComponent>
      );
      const domNode = ReactDOM.findDOMNode(sut);

      const input = domNode.querySelector('input');

      TestUtils.Simulate.change(input);

      expect(callback).toHaveBeenCalled();
    });
  });
});