Permalink
Browse files

Dialog tests: More async focus handling to deal with IE8.

  • Loading branch information...
1 parent d5f06c3 commit 245a82d5aad6e2b721bfb24c9e118f2d92b8696a @scottgonzalez scottgonzalez committed Dec 10, 2012
Showing with 54 additions and 29 deletions.
  1. +54 −29 tests/unit/dialog/dialog_core.js
@@ -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);

0 comments on commit 245a82d

Please sign in to comment.