8000 Dialog tests: More async focus handling to deal with IE8. · faroncoder/jquery-ui@245a82d · GitHub
[go: up one dir, main page]
Skip to content

Commit 245a82d

Browse files
scottgonzalezscottgonzalez
committed
Dialog tests: More async focus handling to deal with IE8.
1 parent d5f06c3 commit 245a82d

File tree

1 file changed

+54
-29
lines changed

1 file changed

+54
-29
lines changed

‎tests/unit/dialog/dialog_core.js

Lines changed: 54 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ test("widget method", function() {
3939
dialog.remove();
4040
});
4141

42-
test( "focus tabbable", function() {
42+
asyncTest( "focus tabbable", function() {
4343
expect( 5 );
4444
var el,
4545
options = {
@@ -49,36 +49,59 @@ test( "focus tabbable", function() {
4949
}]
5050
};
5151

52-
el = $( "<div><input><input autofocus></div>" ).dialog( options );
53-
equal( document.activeElement, el.find( "input" )[ 1 ], "1. first element inside the dialog matching [autofocus]" );
54-
el.remove();
52+
function checkFocus( markup, options, testFn, next ) {
53+
el = $( markup ).dialog( options );
54+
setTimeout(function() {
55+
testFn();
56+
el.remove();
57+
setTimeout( next );
58+
});
59+
}
5560

56-
// IE8 fails to focus the input, <body> ends up being the activeElement
57-
// so wait for that stupid browser
58-
stop();
59-
setTimeout(function() {
60-
el = $( "<div><input><input></div>" ).dialog( options );
61-
equal( document.activeElement, el.find( "input" )[ 0 ], "2. tabbable element inside the content element" );
62-
el.remove();
61+
function step1() {
62+
checkFocus( "<div><input><input autofocus></div>", options, function() {
63+
equal( document.activeElement, el.find( "input" )[ 1 ],
64+
"1. first element inside the dialog matching [autofocus]" );
65+
}, step2 );
66+
}
6367

64-
el = $( "<div>text</div>" ).dialog( options );
65-
equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ], "3. tabbable element inside the buttonpane" );
66-
el.remove();
68+
function step2() {
69+
checkFocus( "<div><input><input></div>", options, function() {
70+
equal( document.activeElement, el.find( "input" )[ 0 ],
71+
"2. tabbable element inside the content element" );
72+
}, step3 );
73+
}
6774

68-
el = $( "<div>text</div>" ).dialog();
69-
equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], "4. the close button" );
70-
el.remove();
75+
function step3() {
76+
checkFocus( "<div>text</div>", options, function() {
77+
equal( document.activeElement,
78+
el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
79+
"3. tabbable element inside the buttonpane" );
80+
}, step4 );
81+
}
82+
83+
function step4() {
84+
checkFocus( "<div>text</div>", {}, function() {
85+
equal( document.activeElement,
86+
el.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
87+
"4. the close button" );
88+
}, step5 );
89+
}
7190

91+
function step5() {
7292
el = $( "<div>text</div>" ).dialog({
7393
autoOpen: false
7494
});
7595
el.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
7696
el.dialog( "open" );
77-
equal( document.activeElement, el.parent()[ 0 ], "5. the dialog itself" );
78-
el.remove();
97+
setTimeout(function() {
98+
equal( document.activeElement, el.parent()[ 0 ], "5. the dialog itself" );
99+
el.remove();
100+
start();
101+
});
102+
}
79103

80-
start();
81-
}, 13);
104+
step1();
82105
});
83106

84107
test( "#7960: resizable handles below modal overlays", function() {
@@ -93,10 +116,10 @@ test( "#7960: resizable handles below modal overlays", function() {
93116
dialog.dialog( "destroy" );
94117
});
95118

96-
asyncTest( "#3123: Prevent tabbing out of modal dialogs", function() {
119+
asyncTest( "Prevent tabbing out of dialogs", function() {
97120
expect( 3 );
98121

99-
var el = $( "<div><input id='t3123-first'><input id='t3123-last'></div>" ).dialog({ modal: true }),
122+
var el = $( "<div><input><input></div>" ).dialog(),
100123
inputs = el.find( "input" ),
101124
widget = el.dialog( "widget" )[ 0 ];
102125

@@ -105,21 +128,23 @@ asyncTest( "#3123: Prevent tabbing out of modal dialogs", function() {
105128

106129
// check shift tab
107130
$( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
108-
setTimeout( checkShiftTab, 2 );
131+
setTimeout( checkShiftTab );
109132
}
110133

111134
function checkShiftTab() {
112135
ok( $.contains( widget, document.activeElement ), "Shift-Tab key event moved focus within the modal" );
113136

114137
el.remove();
115-
start();
138+
setTimeout( start );
116139
}
117140

118-
inputs.eq( 1 ).focus();
119-
equal( document.activeElement, inputs[1], "Focus set on second input" );
120-
inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
141+
inputs[1].focus();
142+
setTimeout(function() {
143+
equal( document.activeElement, inputs[1], "Focus set on second input" );
144+
inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
121145

122-
setTimeout( checkTab, 2 );
146+
setTimeout( checkTab );
147+
});
123148
});
124149

125150
})(jQuery);

0 commit comments

Comments
 (0)
0