How to simulate change events with react-numeric-input

[ksrawat]

Hey @vlad-ignatov using react-numeric-input control has helped me a lot and serving my purpose. Now its time for some unit testing react-numeric-input with my project..

Some how the test cases you provided taking them as reference i can't simulate key-up/down/change events. Is their any best way to do it or am i making wrong direction. Following is the code.

`it('calls onChange when user press up arrow key', () => {
let onChangeCalls = 0
function onChange(x){
console.log('change function fired');
onChangeCalls += 1;
}

   var widget = TestUtils.renderIntoDocument(<MyNumericInput
                onChange={ onChange }
   />             
   )

   TestUtils.Simulate.keyDown(widget.refs.numericbox, {
        keyCode: KEYCODE_UP,
        ctrlKey: true
    })
   console.log(onChangeCalls); 
   expect(onChangeCalls).to.equal(1);
});`

Whereas MyNumericInput is my component wrapping react-numeric-input control inside it.

Let me know if you need more information on this..

[zorahrel]

It seems you forgot the ref="numericbox" in component declaration.

[ksrawat]

@zorahrel
I can not keep like following:

 <KndyNumericInput
                    ref="numericbox"
                    value = {30}
                    min={5}
                    max={80}
       />

Because only ReactOwner can have refs which is created insider render method. In my case is the component which renders

[vlad-ignatov]

If you have wrapped the NumericInput with a numericbox ref then that ref will point to the wrapper span. I guess something like widget.refs.numericbox.firstElementChild will give you the correct target for keyDown events which is the <input /> element.

[ksrawat]

import React from 'react';
import NumericInput from 'react-numeric-input';

class CustomNumericInput extends React.Component{
    constructor(props, context){
        super(props, context);
    }

    render () {
       let me = this;
        return (
        <div>

                       <NumericInput ref="numericbox" min={me.props.min} max={me.props.max} value={me.props.value}/>

        </div>
       ) 
    }
}

export default CustomNumericInput;

@vlad-ignatov Is the above component created fine?

[vlad-ignatov]

It's fine enough. So, what is your question (I'm not sure I understand it)?