jQuery Forum

I am writing a suite of tests for the UI of an audio player and need to wait until the side-effect of one UI event is seen by another UI element. 

Ideally I'd like to "wait until a UI element is is a prticular state" but for the moment I am "allowing a reasonable time for the side-effect to happen". 

The problem is with setTimeout and  is that, if the browser's threads are not "hot" - as it were - the tests will usually fail due to steps being run in either the wrong order or too close together in time. Indeed,  according to Mozilla MDN  "It's important to note that the function or code snippet cannot be executed until the thread that called setTimeout() has terminated."

By "hot browser threads" I mean that a first refresh of the page will produce false test negatives but a second page refresh will have all the tests passing.  

I'd be very grateful for any advice on how others approach what must be a reasonably common QUnit use case.

I thought this would be the best place to come  for some extra light! The test below works .... but only after a first page refresh produces false negatives; a secong page refresh passes all the assertions. Not suitable for an outomated test then!

Ideally I would like to "wait for a UI element to be in  an asserted state" but for the moment, until I understand the QUnit + Javascript threading model better my approach is to "wait for a reasonable amount of time for one UI element to see the side-effect of another UI action`'.

1. // Not entirely satisfactory since you have to run the test suite more than once to achieve sufficent response from the browser.
2. QUnit.test( 
3.     'play sequence: mute button sets volume slider to zero and toggle remembers previous volume' , 
4.     function ( assert ) {
5.     var play_button = $('.playa > section > button:first-child');
6.     var seek_slider = $('.playa > section > div > input');
7.     var mute_button = $('.playa button.btn:nth-child(4)');
8.     var volume_slider = $('.playa div.btn:nth-child(5) > input:nth-child(1)');
9.     var delay = 1000; // milliseconds
10.     var volume_level = '0.13';
11. 
    
12.     // quiet: we're testing
13.     volume_slider.val(volume_level);
14.     volume_slider.trigger('change');
15. 
    
16.     // wait for the volume slider's round-trip side-effect
17.     // mute button is notified by an audio volumechange 
18.     var done_1 = assert.async();
19.     setTimeout(function() {
20.         play_button.trigger('click');
21.         done_1();
22. 
    
23.         // wait for the play button's riund-trip side-effect
24.         // seek slider is notified by audio.currentTime
25.         var done_2 = assert.async();
26.         setTimeout(function() {
27.             play_button.trigger('click'); // stop play
28.             assert.ok( seek_slider.val() > '0', 'volume  in non-zero position after pause');
29.             mute_button.trigger('click'); // mute
30.             assert.ok( true, 'mute button clicked (to mute) after volume slider checked' );
31.             done_2();
32. 
    
33.             // wait for the mute button to have a round-trip effect on the volume slider
34.             var done_3 = assert.async();
35.             setTimeout(function() {
36.                 assert.equal( volume_slider.val(), '0', 'mute button sets volume slider to zero' );
37.                 mute_button.trigger('click'); // unmute
38.                 assert.ok( true, 'mute button clicked (to UN-mute) after volume slider checked' );
39.                 done_3();
40. 
    
41.                 // again, wait for the mute button to have a round-trip effect on the volume slider
42.                 var done_4 = assert.async();
43.                 setTimeout(function() {
44.                     assert.equal( volume_slider.val(), volume_level, 'volume has been restored' );
45.                     done_4();
46.                 }, delay); // wait this long before calling the function above   
47.             }, delay); // wait for slider to adjust          
48.         }, delay); // wait for the audio to play for a mo 
49.     }, delay); // wait this long before pressing the pause button 
50. });