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

Post a Comment

Popular posts from this blog

c# - Where does the .ToList() go in LINQ query result -

-
when getting data populate data grid, have pulled data, made list , mapped model, this: public list<person> getpeople() { var data = _db.person.tolist(); list<person> people = new list<person>(); foreach (var item in data) { person person = new person() { personid = item.personid, firstname = item.firstname, lastname = item.lastname }; people.add(person); } return people; } this works fine, in interest of writing less code discovered .select method , (what think is) anonymous type. have: public list<person> getpeople() { return _db.person.select(d => new person { personid = item.personid, firstname = item.firstname, lastname = item.lastname }).tolist(); } though not easy read, works fine too. there preference either way? ...
Read more

Listeners to visualise results of load test in JMeter -

-
i want run load test in non-gui mode , save results in .csv file. (i have not modified .properties files, standard information saved) i plan load file , visualise results jmeter’s listeners. which listeners suited purpose? should avoid @ cost, might cause me misinterpret information? (e.g. in view results tree response data empty have - - not saved this. however, there has in fact been response. if saw listener might think there hasn’t been one. since want avoid this, listeners have gain information needed .csv file.) i’d know both jmeter listeners plugins. if running test in non-ui mode ideally should disable listeners in script. use '-l' option store test results .jtl extension. can later open jtl file jmeter. aggregate report or summary report should summarize test results , response time , throughput. if want plot graphs see trends on test duration can use http://jmeter-plugins.org/#/ standard , lib set. i suggest following listeners: response ...
Read more

android - CollapsingToolbarLayout: position the ExpandedText programmatically -

-
i using new android support design view collapsingtoolbarlayout. have need position expandedtitle programmatically. actually way set position expandedtitle in .xml file (example here: https://goo.gl/l5h5fc ) there no public api set text position programmatically , fields private . do know if it's possible without reflection or 'hacky' tricks? i have solved problem exposing properties via reflection ( https://gist.github.com/fpezzato/8e7d45112883dbbc5ffb ), works don't use trick in production code. @google: please no more private or final stuff! :)
Read more