Skip to content
Permalink
Browse files

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

  • Loading branch information...
scottgonzalez committed Dec 10, 2012
1 parent d5f06c3 commit 245a82d5aad6e2b721bfb24c9e118f2d92b8696a
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.
You can’t perform that action at this time.