]> source.dussan.org Git - jquery-ui.git/commitdiff
Dialog tests: More async focus handling to deal with IE8.
authorScott González <scott.gonzalez@gmail.com>
Mon, 10 Dec 2012 20:31:56 +0000 (15:31 -0500)
committerScott González <scott.gonzalez@gmail.com>
Mon, 10 Dec 2012 20:31:56 +0000 (15:31 -0500)
tests/unit/dialog/dialog_core.js

index f100879125d6f212d5c853471126d01b6346e025..817f76ea9d17e122d22c69695c81903490c7eeb4 100644 (file)
@@ -39,7 +39,7 @@ test("widget method", function() {
        dialog.remove();
 });
 
-test( "focus tabbable", function() {
+asyncTest( "focus tabbable", function() {
        expect( 5 );
        var el,
                options = {
@@ -49,36 +49,59 @@ test( "focus tabbable", function() {
                        }]
                };
 
-       el = $( "<div><input><input autofocus></div>" ).dialog( options );
-       equal( document.activeElement, el.find( "input" )[ 1 ], "1. first element inside the dialog matching [autofocus]" );
-       el.remove();
+       function checkFocus( markup, options, testFn, next ) {
+               el = $( markup ).dialog( options );
+               setTimeout(function() {
+                       testFn();
+                       el.remove();
+                       setTimeout( next );
+               });
+       }
 
-       // IE8 fails to focus the input, <body> ends up being the activeElement
-       // so wait for that stupid browser
-       stop();
-       setTimeout(function() {
-               el = $( "<div><input><input></div>" ).dialog( options );
-               equal( document.activeElement, el.find( "input" )[ 0 ], "2. tabbable element inside the content element" );
-               el.remove();
+       function step1() {
+               checkFocus( "<div><input><input autofocus></div>", options, function() {
+                       equal( document.activeElement, el.find( "input" )[ 1 ],
+                               "1. first element inside the dialog matching [autofocus]" );
+               }, step2 );
+       }
 
-               el = $( "<div>text</div>" ).dialog( options );
-               equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ], "3. tabbable element inside the buttonpane" );
-               el.remove();
+       function step2() {
+               checkFocus( "<div><input><input></div>", options, function() {
+                       equal( document.activeElement, el.find( "input" )[ 0 ],
+                               "2. tabbable element inside the content element" );
+               }, step3 );
+       }
 
-               el = $( "<div>text</div>" ).dialog();
-               equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], "4. the close button" );
-               el.remove();
+       function step3() {
+               checkFocus( "<div>text</div>", options, function() {
+                       equal( document.activeElement,
+                               el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
+                               "3. tabbable element inside the buttonpane" );
+               }, step4 );
+       }
+
+       function step4() {
+               checkFocus( "<div>text</div>", {}, function() {
+                       equal( document.activeElement,
+                               el.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
+                               "4. the close button" );
+               }, step5 );
+       }
 
+       function step5() {
                el = $( "<div>text</div>" ).dialog({
                        autoOpen: false
                });
                el.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
                el.dialog( "open" );
-               equal( document.activeElement, el.parent()[ 0 ], "5. the dialog itself" );
-               el.remove();
+               setTimeout(function() {
+                       equal( document.activeElement, el.parent()[ 0 ], "5. the dialog itself" );
+                       el.remove();
+                       start();
+               });
+       }
 
-               start();
-       }, 13);
+       step1();
 });
 
 test( "#7960: resizable handles below modal overlays", function() {
@@ -93,10 +116,10 @@ test( "#7960: resizable handles below modal overlays", function() {
        dialog.dialog( "destroy" );
 });
 
-asyncTest( "#3123: Prevent tabbing out of modal dialogs", function() {
+asyncTest( "Prevent tabbing out of dialogs", function() {
        expect( 3 );
 
-       var el = $( "<div><input id='t3123-first'><input id='t3123-last'></div>" ).dialog({ modal: true }),
+       var el = $( "<div><input><input></div>" ).dialog(),
                inputs = el.find( "input" ),
                widget = el.dialog( "widget" )[ 0 ];
 
@@ -105,21 +128,23 @@ asyncTest( "#3123: Prevent tabbing out of modal dialogs", function() {
 
                // check shift tab
                $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
-               setTimeout( checkShiftTab, 2 );
+               setTimeout( checkShiftTab );
        }
 
        function checkShiftTab() {
                ok( $.contains( widget, document.activeElement ), "Shift-Tab key event moved focus within the modal" );
 
                el.remove();
-               start();
+               setTimeout( start );
        }
 
-       inputs.eq( 1 ).focus();
-       equal( document.activeElement, inputs[1], "Focus set on second input" );
-       inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
+       inputs[1].focus();
+       setTimeout(function() {
+               equal( document.activeElement, inputs[1], "Focus set on second input" );
+               inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
 
-       setTimeout( checkTab, 2 );
+               setTimeout( checkTab );
+       });
 });
 
 })(jQuery);