reactjs - React TestUtils, how can I simulate document mouseMove? -


i want use testutils.simulate.mousemove on document. have component dragger adds mousemove event listener document. here incomplete version:

// dragger.js 'use strict';  var react = require('react');  export default react.createclass({     proptypes: {         handledrag: react.proptypes.func // callback set parent     },     getinitialstate: function() {         return {dragging: false}     },     componentdidupdate: function(props, state) {         //          if (this.state.dragging && !state.dragging) {             document.addeventlistener('mousemove', this.onmousemove)         } else if (!this.state.dragging && state.dragging) {             document.removeeventlistener('mousemove', this.onmousemove)         }     },     onmousedown: function(e) {         this.setstate({dragging: true})     },     onmousemove: function(e) {         // calls parent drag         this.props.handledrag(e);     },     render: function() {         return <div onmousedown={this.onmousedown} ></div>     } }); 

i'm using jasmine, , want make sure handledrag callback called after mousedown followed mousemove.

// dragger.spec.js  var react = require('react/addons'); import dragger './dragger';  var testutils = react.addons.testutils;  describe('dragger', function() {     it('should call callback after drag interaction', function() {         // make callback spy on         var f = {callback: function(e){return}};          // render dragger         var dragger = testutils.renderintodocument(<dragger handledrag={f.callback} />);          // spy on callback         spyon(f, 'callback');          // simulate mousedown , mousemove         testutils.simulate.mousedown(dragger.getdomnode(), {button: 0});         testutils.simulate.mousemove(document);          expect(f.callback).tohavebeencalled(); // fails!     } } 

but mousemove event not being simulated. see 2 problems

  1. i might need pass event data testutils.simulate.mousemove. example, call testutils.simulate.mousedown(dragger.getdomnode()) did not work until changed testutils.simulate.mousedown(dragger.getdomnode(), {button: 0}). event data should pass testutils.simulate.mousemove?
  2. the document not part of detached dom test component rendered into. reason simulate.mousemove doesn't work. can use in test instead of document?

how can use testutils.simulate.mousemove?

after hours of trying various methods enzyme , react's testutils came upon creating , dispatching events in pure js, works in jest tests

it('calls handler on mousedown on element, mousemove on document', () => {   const handler = jest.fn();   const props = {     foo: {       uid: '1',       resizable: true,     },     resizehandler,   };    const instance = mount(<header {...props} />);   const resizer = instance.find('.resizer');   const top = window.document.documentelement;  // target documentelement   resizer.simulate('mousedown', { preventdefault: () => true });   // uses enzyme simulate event, adding listener documentelement on mousemove   const mousemove = new event('mousemove');  // creates new event   top.dispatchevent(mousemove);              // dispatches   const mouseup = new event('mouseup');   top.dispatchevent(mouseup);   expect(resizehandler).tobecalled();        // passed in handler called on mousemove }); 

basically, can find document.documentelement window.document.documentelement , dispatch events other element


Comments

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

javascript - Complex json ng-repeat -

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -