Search code examples
reactjsreactjs-testutils

Testing for mouse wheel events

I've set up a simple function to handle mouse wheel events on a menu component I built. The component works fine, I'm trying to write a unit test around it and that is giving me an issue.

component handler:

handleWheel: function (event) {
        (event.deltaY < 0 ) ? this.moveUp() : this.moveDown();

        return false;
}

this.moveUp() / this.moveDown() simply sets the state of firstIndex

The issue is that when I try to write a test for this functionality I can't get it to work. I'm almost 100% certain it has to do with the eventDetails object i'm passing in, but I don't know how to format it correctly. 

// set firstIndex = 0
TestUtils.Simulate.scroll(menu, {deltaY: 52});
expect(menu.state.firstIndex).to.equal(1);
// error: expected 0 to be 1

Does anyone know how to correctly format the TestUtils.Simulate.Scroll() / know of a better way to test onWheel() ?

Solution

  • If the event handler is for onWheel you should use Simulate.wheel.

    There's a 1:1 mapping of events to Simulate methods. Remove the "on" and lowercase the first letter.

    onScroll   ->   Simulate.scroll
onKeyDown  ->   Simulate.keyDown
onWheel    ->   Simulate.wheel