General "Best Practices" Question: Testing jQuery Animations

[steve ross]

I know I can spy on the jQuery function, but instead, I chose to do
this (code is in coffeescript):

it 'should be revealed when "lightbox" is clicked', () ->
lightbox_button = $('li#lightbox-link a')
lightbox_button.click()
expect(@lightbox_number.is(":visible")).toBe(true)

the behavior of the click is to do a

$('#lightbox-number').slideDown()

This kind of test makes sense from the perspective of what I "expect"
to happen but relies on the is(":visible") function returning true
immediately upon completion of the slideDown() function. Because
slideDown() is an animation, it's possible that there would be some
delay before the visibility changed. This would probably be more
pronounced in the case of slideUp() where the visibility changes at
the end of the animation instead of the start.

What are others doing to test things like this in a less brittle way
than I've chosen.

Thanks

[Davis Frank]

In general, testing visibility is hard. Mostly because visibility inside the Jasmine runner DOM is *not* what it will be in your app.

Unless you want to change how this is implemented to add/remove a CSS class, which you can test much more easily, I'd not use Jasmine to test this particular code.

--dwf

--
You received this message because you are subscribed to the Google Groups "Jasmine" group.
To post to this group, send email to jasmi...@googlegroups.com.
To unsubscribe from this group, send email to jasmine-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jasmine-js?hl=en.

[Alex Chaffee]

This looks like a job for.... Mock Clock!

* Use a "Mock Clock"

  * replace `setTimeout` with a different function during tests

  * this function keeps track of what would be called when

  * then "ticks" forward when asked

  * you can simulate speeding up and slowing down time

* In Jasmine:

        beforeEach(function() { 

          jasmine.Clock.useMock(); 

        }); 

        //... call the code that calls setTimeout

        jasmine.Clock.tick(500); // advance 500 msec

        

  * see thread [How to test timers?](http://groups.google.com/group/jasmine-js/browse_thread/thread/f987956c624840d1/73b3ff5391244b19)

So call tick before your expect and it should pass... Davis' point about visibility notwithstanding.

However, while Davis is technically correct, I've found that due to the way the Jasmine Runner's CSS is built, if you put your test HTML inside the "#jasmine_content" element, it usually acts pretty much the way you want. For example, if you want to make an "arena" div in your tests:

	beforeEach(function() {		

		// set some fixture HTML inside the Jasmine runner page

		jasmineContent = document.getElementById("jasmine_content");

		jasmineContent.innerHTML = "<div id='arena' style='position:relative'></div>";

More at https://github.com/alexch/learn_javascript/blob/master/07_bouncing_ball/bouncingBallSpec.js

and https://github.com/alexch/javascript-notes/blob/master/dom.md

 - A

On Mon, Mar 28, 2011 at 1:29 PM, steve ross <cwd...@gmail.com> wrote:

--
You received this message because you are subscribed to the Google Groups "Jasmine" group.
To post to this group, send email to jasmi...@googlegroups.com.
To unsubscribe from this group, send email to jasmine-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jasmine-js?hl=en.

--
Alex Chaffee - al...@stinky.com - http://alexch.github.com
Stalk me: http://friendfeed.com/alexch | http://twitter.com/alexch | http://alexch.tumblr.com

[Chris F Carroll]

Putting jQuery.fx.off ahead of jasmine tests is helping me.

http://api.jquery.com/jQuery.fx.off/