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
- i might need pass event data
testutils.simulate.mousemove
. example, calltestutils.simulate.mousedown(dragger.getdomnode())
did not work until changedtestutils.simulate.mousedown(dragger.getdomnode(), {button: 0})
. event data should passtestutils.simulate.mousemove
? - the
document
not part of detached dom test component rendered into. reasonsimulate.mousemove
doesn't work. can use in test instead ofdocument
?
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
Post a Comment