library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Dialog: Extend visual test to verify DOM position restore on destroy; overhaul unit test for destroy method.

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-11-16 19:33:55 +01:00
parent 999617343f
commit b694409e76
3 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
tests/unit/dialog/dialog.html
View File

@ -45,6 +45,17 @@
<div id="qunit-fixture"> <div id="qunit-fixture">
<div id="dialog1"></div> <div id="dialog1"></div>
<div id="dialog2"></div> <div id="dialog2"></div>
<div id="form-dialog" title="Profile Information">
<fieldset>
<legend>Please share some personal information</legend>
<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
<label for="favorite-color">Your favorite color</label><input id="favorite-color">
</fieldset>
<div role="group" aria-describedby="section2">
<p id="section2">Some more (optional) information</p>
<label for="favorite-food">Favorite food</label><input id="favorite-food">
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

25
tests/unit/dialog/dialog_methods.js
View File

@ -34,20 +34,17 @@ test("init", function() {
}); });
test("destroy", function() { test("destroy", function() {
expect( 4 ); expect( 6 );
domEqual( "#dialog1", function() {
$("<div></div>").appendTo('body').dialog().dialog("destroy").remove(); var dialog = $( "#dialog1" ).dialog().dialog( "destroy" );
ok(true, '.dialog("destroy") called on element'); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 0 );
$([]).dialog().dialog("destroy").remove(); });
ok(true, '.dialog("destroy") called on empty collection'); domEqual( "#form-dialog", function() {
var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" );
$('<div></div>').dialog().dialog("destroy").remove(); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
ok(true, '.dialog("destroy") called on disconnected DOMElement'); equal( dialog.index(), 2 );
});
var expected = $('<div></div>').dialog(),
actual = expected.dialog('destroy');
equal(actual, expected, 'destroy is chainable');
}); });
test("enable", function() { test("enable", function() {

11
tests/visual/dialog/complex-dialogs.html
View File

@ -24,7 +24,7 @@
$(function() { $(function() {
var dialog = $( "#dialog" ).dialog({ var dialog = $( "#dialog" ).dialog({
modal: true, modal: true,
height: 300, height: 350,
width: 500, width: 500,
buttons: [ buttons: [
{ {
@ -82,6 +82,11 @@
] ]
}); });
$( "#destroy-dialog" ).click(function() {
dialog.dialog( "destroy" ).show();
$( this ).remove();
});
$( document ).tooltip(); $( document ).tooltip();
}); });
</script> </script>
@ -91,13 +96,13 @@
<p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p> <p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p>
<p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p> <p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p>
<a href="#">Outside link</a>
<button id="open-dialog">Reopen dialog</button> <button id="open-dialog">Reopen dialog</button>
<div id="dialog" title="Basic dialog"> <div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<p><button id="open-datepicker">Open another window with a datepicker.</button></p> <p><button id="open-datepicker">Open another window with a datepicker.</button></p>
<p><button id="destroy-dialog">Self destruct</button></p>
</div> </div>
<div id="dialog-datepicker" title="A dialog with a datepicker"> <div id="dialog-datepicker" title="A dialog with a datepicker">
@ -110,5 +115,7 @@
<input id="autocomplete" title="Try typing something!"> <input id="autocomplete" title="Try typing something!">
</div> </div>
<a href="#">Outside link</a>
</body> </body>
</html> </html>