This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to Simulate events - Click, Change, Key Up, Mouse Over etc.

Example

Observe below example component. This component handles click,  double click, mouse over, change events.
import React from 'react';

class EventComponent  extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            clickClass:'',
            dblClickClass:'',
            mouseOverEventClass:'',
            inputVal:''
        }
        this.clickEventFunc = this.clickEventFunc.bind(this);
        this.dblClickEventFunc = this.dblClickEventFunc.bind(this);
        this.onChange = this.onChange.bind(this);
        this.mouseOverEventFunc = this.mouseOverEventFunc.bind(this);
    }

    clickEventFunc() {
        this.setState({
            clickClass:'click-class'
        });
    }

    dblClickEventFunc() {
        this.setState({
            dblClickClass:'dblclick-class'
        });
    }

    mouseOverEventFunc() {
        this.setState({
            mouseOverEventClass:'mouseover-class'
        });
    }

    onChange(event) {
        this.setState({
            inputVal:event.target.value
        });
    }

    render () {
        return <div>
      <div id="clickEventDiv" className={this.state.clickClass} onClick={this.clickEventFunc}>
      </div>
      <div id="dblClickEventDiv" className={this.state.dblClickClass} onDoubleClick={this.dblClickEventFunc}>
      </div>
      <div id="mouseOverEventDiv" className={this.state.mouseOverEventClass} onMouseOver={this.mouseOverEventFunc}>
      </div>
            <input id="inputElm" value={this.state.inputVal} onChange={this.onChange}></input>
    </div>;
    }

}

EventComponent.propTypes = {

}

EventComponent.defaultProps = {

}

export default EventComponent;

Find Component by ID

This is small utility function which we use to find element by Id
function scryRenderedDOMComponentsWithId(tree, id) {
  return ReactTestUtils.findAllInRenderedTree(tree, function(inst) {
    return ReactTestUtils.isDOMComponent(inst) && inst.id === id;
  });
}

Click Event

When we click on the clickEventDiv component, click-class will be added. This test case verifies the class
it('click event test', () => {
    let instance = ReactTestUtils.renderIntoDocument(
      <EventComponent/>
    );
    let clickDiv = scryRenderedDOMComponentsWithId(instance, "clickEventDiv");
    ReactTestUtils.Simulate.click(clickDiv[0]);
    expect(clickDiv[0].className.match(/\bclick-class\b/)).toExist();
});

Double Click Event

When we double click on the dbClickEventDiv component, dblclick-class will be added. This test case verifies the class
  it('double click event test', () => {
    let instance = ReactTestUtils.renderIntoDocument(
      <EventComponent/>
    );
    let dbClickDiv = scryRenderedDOMComponentsWithId(instance, "dblClickEventDiv");
    ReactTestUtils.Simulate.doubleClick(dbClickDiv[0]);
    expect(dbClickDiv[0].className.match(/\bdblclick-class\b/)).toExist();
});

Mouse Over Event

When we double click on the mouseOverEventDiv component, mouseover-class will be added. This test case verifies the class
it('mouser over event test', () => {
    let instance = ReactTestUtils.renderIntoDocument(
      <EventComponent/>
    );
    let mOverDiv = scryRenderedDOMComponentsWithId(instance, "mouseOverEventDiv");
    ReactTestUtils.Simulate.mouseOver(mOverDiv[0]);
    expect(mOverDiv[0].className.match(/\bmouseover-class\b/)).toExist();
});

Change Event

When we change the input value of inputElm component, inputVal state variable changes. This test case verifies the state variable
it('change event test', () => {
    let instance = ReactTestUtils.renderIntoDocument(
      <EventComponent/>
    );
    let inputElm = scryRenderedDOMComponentsWithId(instance, "inputElm");
    inputElm[0].value = 'some value';
    ReactTestUtils.Simulate.change(inputElm[0]);
    expect(instance.state.inputVal).toEqual("some value");
});

1 comment:

  1. Even all types of assignment and projects papers are available at online. You can collect your writing papers with our online address. The high range and popular types of examples are discussed with their graduates. The best essay writing service is submitting interviews related essays, resume papers, application essay papers etc are available at online

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts