D3 is a great library but one of the challenges I have found is with unit testing anything based on event handlers. In my specific example I was trying to show a tooltip when the user hovered over an element. hoverTargets .on('mouseover', showTooltip(true)) .on('mousemove', positionTooltip) .on('mouseout', closeTooltip); D3 doesn't currently have the ability to trigger a mouse event so in order to test the behaviour I have had to roll my own very simple helper to invoke these events. $.fn.triggerSVGEvent = function(eventName) { var event = document.createEvent('SVGEvents'); event.initEvent(eventName,true,true); this[0].dispatchEvent(event); return $(this); }; This is implemented as jQuery plugin that directly invokes the event as if it had come from the browser. You can use it as below: $point .triggerSVGEvent('mouseover') .triggerSVGEvent('mousemove'); It will probably change over time as I need to do more with it but for now this works as a way to test my tooltip behaviour.


I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to

Development,JavaScript,D3,software-development,testing,unit testing,Visualisation