I am looking for a testing library for javascript that will work for spec-testing user interaction such as drag and drop, hovers, double/single clicks and drawing on a canvas. I have looked at a couple libraries including jspec and jasmine but both seem to be more based on unit testing.
If I overlooked the fact that either of the above libraries support such testing I would love an example.
Edit
So I did a lot of looking last night and really didn't come across anything. I would like if possible to emulate user interaction on a higher level than something like jasmine which is capybara style in the sense that it just fakes interaction with the dom.
I would like a library that actually emulates a mouse down -> mouse move -> mouse up event chain.
Does such a magical creation exist?
Post bounty edit
So, I have continued to experiment with JS testing libraries and am really not happy with how they function around using the html5 canvas. It seems that with the canvas you cannot test events in jasmine because jasmine will not initialize the canvas.
I don't like that you must use "html" fixtures rather than actually testing application code. That seems backwards if you are trying to integrate js into your app. For spec testing it makes sense but BDD testing of a web framework would mandate it actually use application views for testing.
Again does such a monster exist or is my head in the clouds?
Using Developer ToolsGo to the sources tab. Click on the Event Listener Breakpoints, on the right side. Then perform the activity that will trigger the event, i.e. click if the event that used is click, double click if it is dblclick event.
Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.
Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.
An event listener is a function that initiates a predefined process if a specific event occurs. So, an event listener “listens” for an action, then calls a function that performs a related task. This event can take one of many forms. Common examples include mouse events, keyboard events, and window events.
Have you tried PhantomJS or ZombieJS? I've heard good things about Phantom in particular.
=============
Another suggestion: Selenium plug-ins/macros. www.seleniumwiki.com/selenium-rc/selenium-mousedownat-mousemoveat-and-mouseupat-example/ or glauche.de/2009/09/09/drag-drop-with-selenium/ .
I've seen the only good solution to this problem: DOH Robot. It runs java applet, which allows to emit actual javascript events and emulate real user behavior (including drag-and-drop testing).
DOH doesn't depend on dojo, so you can use it in any project. Unfortunately it is not widely used, although it is really cool testing framework.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With