Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Testing higherlevel javascript events

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?

like image 591
austinbv Avatar asked Jul 26 '11 02:07

austinbv


People also ask

How do you find out which JavaScript Events fired?

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.

How do you check an event is firing?

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.

How do you check event inspect?

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.

What events can you listen for JavaScript?

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.


2 Answers

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/ .

like image 62
oxyacanthous Avatar answered Oct 07 '22 03:10

oxyacanthous


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.

like image 40
Vladimir Razuvaev Avatar answered Oct 07 '22 02:10

Vladimir Razuvaev