aboutsummaryrefslogtreecommitdiffstats
path: root/tests/unit/dialog
diff options
context:
space:
mode:
Diffstat (limited to 'tests/unit/dialog')
-rw-r--r--tests/unit/dialog/dialog.html4
-rw-r--r--tests/unit/dialog/dialog_common.js7
-rw-r--r--tests/unit/dialog/dialog_core.js110
-rw-r--r--tests/unit/dialog/dialog_deprecated.html2
-rw-r--r--tests/unit/dialog/dialog_events.js14
-rw-r--r--tests/unit/dialog/dialog_methods.js61
-rw-r--r--tests/unit/dialog/dialog_options.js72
-rw-r--r--tests/unit/dialog/dialog_test_helpers.js7
-rw-r--r--tests/unit/dialog/dialog_tickets.js132
9 files changed, 241 insertions, 168 deletions
diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html
index 5413e7cc1..8f2583ce1 100644
--- a/tests/unit/dialog/dialog.html
+++ b/tests/unit/dialog/dialog.html
@@ -23,6 +23,8 @@
"ui/jquery.ui.draggable.js",
"ui/jquery.ui.resizable.js",
"ui/jquery.ui.button.js",
+ "ui/jquery.ui.effect.js",
+ "ui/jquery.ui.effect-clip.js",
"ui/jquery.ui.dialog.js"
]
});
@@ -59,6 +61,8 @@
<label for="favorite-food">Favorite food</label><input id="favorite-food">
</div>
</div>
+ <div class="wrap" id="wrap1"></div>
+ <div class="wrap" id="wrap2"></div>
</div>
</body>
</html>
diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js
index 47fff1013..57d7aa0aa 100644
--- a/tests/unit/dialog/dialog_common.js
+++ b/tests/unit/dialog/dialog_common.js
@@ -1,7 +1,8 @@
TestHelpers.commonWidgetTests( "dialog", {
defaults: {
+ appendTo: "body",
autoOpen: true,
- buttons: {},
+ buttons: [],
closeOnEscape: true,
closeText: 'close',
disabled: false,
@@ -9,8 +10,8 @@ TestHelpers.commonWidgetTests( "dialog", {
draggable: true,
height: 'auto',
hide: null,
- maxHeight: false,
- maxWidth: false,
+ maxHeight: null,
+ maxWidth: null,
minHeight: 150,
minWidth: 150,
modal: false,
diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js
index 9c0e80825..817f76ea9 100644
--- a/tests/unit/dialog/dialog_core.js
+++ b/tests/unit/dialog/dialog_core.js
@@ -34,11 +34,12 @@ test( "ARIA", function() {
test("widget method", function() {
expect( 1 );
- var dialog = $("<div>").appendTo("#main").dialog();
+ var dialog = $("<div>").appendTo("#qunit-fixture").dialog();
deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]);
+ dialog.remove();
});
-test( "focus tabbable", function() {
+asyncTest( "focus tabbable", function() {
expect( 5 );
var el,
options = {
@@ -48,40 +49,62 @@ 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();
-
- // 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();
-
- 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();
-
- 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 checkFocus( markup, options, testFn, next ) {
+ el = $( markup ).dialog( options );
+ setTimeout(function() {
+ testFn();
+ el.remove();
+ setTimeout( next );
+ });
+ }
+
+ 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 );
+ }
+
+ function step2() {
+ checkFocus( "<div><input><input></div>", options, function() {
+ equal( document.activeElement, el.find( "input" )[ 0 ],
+ "2. tabbable element inside the content element" );
+ }, step3 );
+ }
+
+ 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();
});
-// #7960
-test( "resizable handles below modal overlays", function() {
+test( "#7960: resizable handles below modal overlays", function() {
expect( 1 );
var resizable = $( "<div>" ).resizable(),
@@ -93,4 +116,35 @@ test( "resizable handles below modal overlays", function() {
dialog.dialog( "destroy" );
});
+asyncTest( "Prevent tabbing out of dialogs", function() {
+ expect( 3 );
+
+ var el = $( "<div><input><input></div>" ).dialog(),
+ inputs = el.find( "input" ),
+ widget = el.dialog( "widget" )[ 0 ];
+
+ function checkTab() {
+ ok( $.contains( widget, document.activeElement ), "Tab key event moved focus within the modal" );
+
+ // check shift tab
+ $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
+ setTimeout( checkShiftTab );
+ }
+
+ function checkShiftTab() {
+ ok( $.contains( widget, document.activeElement ), "Shift-Tab key event moved focus within the modal" );
+
+ el.remove();
+ setTimeout( start );
+ }
+
+ 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 );
+ });
+});
+
})(jQuery);
diff --git a/tests/unit/dialog/dialog_deprecated.html b/tests/unit/dialog/dialog_deprecated.html
index 2a876ac73..3360e6ef7 100644
--- a/tests/unit/dialog/dialog_deprecated.html
+++ b/tests/unit/dialog/dialog_deprecated.html
@@ -57,6 +57,8 @@
<label for="favorite-food">Favorite food</label><input id="favorite-food">
</div>
</div>
+ <div class="wrap" id="wrap1"></div>
+ <div class="wrap" id="wrap2"></div>
</div>
</body>
</html>
diff --git a/tests/unit/dialog/dialog_events.js b/tests/unit/dialog/dialog_events.js
index cbeced0f8..19337ad5d 100644
--- a/tests/unit/dialog/dialog_events.js
+++ b/tests/unit/dialog/dialog_events.js
@@ -341,4 +341,18 @@ asyncTest("ensure dialog's container doesn't scroll on resize and focus", functi
}, 500);
});
+test("#5184: isOpen in dialogclose event is true", function() {
+ expect( 3 );
+
+ var el = $( "<div></div>" ).dialog({
+ close: function() {
+ ok( !el.dialog("isOpen"), "dialog is not open during close" );
+ }
+ });
+ ok( el.dialog("isOpen"), "dialog is open after init" );
+ el.dialog( "close" );
+ ok( !el.dialog("isOpen"), "dialog is not open after close" );
+ el.remove();
+});
+
})(jQuery);
diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js
index e5275c7a4..85d13d157 100644
--- a/tests/unit/dialog/dialog_methods.js
+++ b/tests/unit/dialog/dialog_methods.js
@@ -34,7 +34,9 @@ test("init", function() {
});
test("destroy", function() {
- expect( 6 );
+ expect( 7 );
+
+ $( "#dialog1, #form-dialog" ).hide();
domEqual( "#dialog1", function() {
var dialog = $( "#dialog1" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
@@ -45,6 +47,26 @@ test("destroy", function() {
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 2 );
});
+
+ // Ensure dimensions are restored (#8119)
+ $( "#dialog1" ).show().css({
+ width: "400px",
+ minHeight: "100px",
+ height: "200px"
+ });
+ domEqual( "#dialog1", function() {
+ $( "#dialog1" ).dialog().dialog( "destroy" );
+ });
+});
+
+test("#4980: Destroy should place element back in original DOM position", function(){
+ expect( 2 );
+ var container = $('<div id="container"><div id="modal">Content</div></div>'),
+ modal = container.find('#modal');
+ modal.dialog();
+ ok(!$.contains(container[0], modal[0]), 'dialog should move modal element to outside container element');
+ modal.dialog('destroy');
+ ok($.contains(container[0], modal[0]), 'dialog(destroy) should place element back in original DOM position');
});
test( "enable/disable disabled", function() {
@@ -125,4 +147,41 @@ test("open", function() {
ok(el.dialog('widget').is(':visible') && !el.dialog('widget').is(':hidden'), 'dialog visible after open method called');
});
+test("#6137: dialog('open') causes form elements to reset on IE7", function() {
+ expect(2);
+
+ var d1 = $('<form><input type="radio" name="radio" id="a" value="a" checked="checked"></input>' +
+ '<input type="radio" name="radio" id="b" value="b">b</input></form>').appendTo( "body" ).dialog({autoOpen: false});
+
+ d1.find('#b').prop( "checked", true );
+ equal(d1.find('input:checked').val(), 'b', "checkbox b is checked");
+
+ d1.dialog('open');
+ equal(d1.find('input:checked').val(), 'b', "checkbox b is checked");
+
+ d1.remove();
+});
+
+test("#5531: dialog width should be at least minWidth on creation", function () {
+ expect( 4 );
+ var el = $('<div></div>').dialog({
+ width: 200,
+ minWidth: 300
+ });
+
+ equal(el.dialog('option', 'width'), 300, "width is minWidth");
+ el.dialog('option', 'width', 200);
+ equal(el.dialog('option', 'width'), 300, "width unchanged when set to < minWidth");
+ el.dialog('option', 'width', 320);
+ equal(el.dialog('option', 'width'), 320, "width changed if set to > minWidth");
+ el.remove();
+
+ el = $('<div></div>').dialog({
+ minWidth: 300
+ });
+ ok(el.dialog('option', 'width') >= 300, "width is at least 300");
+ el.remove();
+
+});
+
})(jQuery);
diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js
index f01a1a2a8..2ccbed573 100644
--- a/tests/unit/dialog/dialog_options.js
+++ b/tests/unit/dialog/dialog_options.js
@@ -5,6 +5,47 @@
module("dialog: options");
+test( "appendTo", function() {
+ expect( 8 );
+ var detached = $( "<div>" ),
+ element = $( "#dialog1" ).dialog();
+ equal( element.dialog( "widget" ).parent()[0], document.body, "defaults to body" );
+ element.dialog( "destroy" );
+
+ element.dialog({
+ appendTo: ".wrap"
+ });
+ equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "first found element" );
+ equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" );
+ element.dialog( "destroy" );
+
+ element.dialog({
+ appendTo: null
+ });
+ equal( element.dialog( "widget" ).parent()[0], document.body, "null" );
+ element.dialog( "destroy" );
+
+ element.dialog({ autoOpen: false }).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" );
+ equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "modified after init" );
+ element.dialog( "destroy" );
+
+ element.dialog({
+ appendTo: detached
+ });
+ equal( element.dialog( "widget" ).parent()[0], detached[0], "detached jQuery object" );
+ element.dialog( "destroy" );
+
+ element.dialog({
+ appendTo: detached[0]
+ });
+ equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element" );
+ element.dialog( "destroy" );
+
+ element.dialog({ autoOpen: false }).dialog( "option", "appendTo", detached );
+ equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" );
+ element.dialog( "destroy" );
+});
+
test("autoOpen", function() {
expect(2);
@@ -212,6 +253,15 @@ test("height", function() {
el.remove();
});
+asyncTest( "hide, #5860 - don't leave effects wrapper behind", function() {
+ expect( 1 );
+ $( "#dialog1" ).dialog({ hide: "clip" }).dialog( "close" ).dialog( "destroy" );
+ setTimeout(function() {
+ equal( $( ".ui-effects-wrapper" ).length, 0 );
+ start();
+ }, 500);
+});
+
test("maxHeight", function() {
expect(3);
@@ -428,4 +478,26 @@ test("width", function() {
el.remove();
});
+test("#4826: setting resizable false toggles resizable on dialog", function() {
+ expect(6);
+ var i,
+ el = $('<div></div>').dialog({ resizable: false });
+
+ TestHelpers.dialog.shouldResize(el, 0, 0, "[default]");
+ for (i=0; i<2; i++) {
+ el.dialog('close').dialog('open');
+ TestHelpers.dialog.shouldResize(el, 0, 0, 'initialized with resizable false toggle ('+ (i+1) +')');
+ }
+ el.remove();
+
+ el = $('<div></div>').dialog({ resizable: true });
+ TestHelpers.dialog.shouldResize(el, 50, 50, "[default]");
+ for (i=0; i<2; i++) {
+ el.dialog('close').dialog('option', 'resizable', false).dialog('open');
+ TestHelpers.dialog.shouldResize(el, 0, 0, 'set option resizable false toggle ('+ (i+1) +')');
+ }
+ el.remove();
+
+});
+
})(jQuery);
diff --git a/tests/unit/dialog/dialog_test_helpers.js b/tests/unit/dialog/dialog_test_helpers.js
index bbf43f48f..ef0b9b6fa 100644
--- a/tests/unit/dialog/dialog_test_helpers.js
+++ b/tests/unit/dialog/dialog_test_helpers.js
@@ -3,10 +3,9 @@ TestHelpers.dialog = {
var d = el.dialog('widget');
//this mouseover is to work around a limitation in resizable
//TODO: fix resizable so handle doesn't require mouseover in order to be used
- $(handle, d).simulate("mouseover");
- $(handle, d).simulate("drag", {
- dx: dx || 0,
- dy: dy || 0
+ $( handle, d ).simulate("mouseover").simulate( "drag", {
+ dx: dx,
+ dy: dy
});
},
testDrag: function(el, dx, dy, expectedDX, expectedDY, msg) {
diff --git a/tests/unit/dialog/dialog_tickets.js b/tests/unit/dialog/dialog_tickets.js
deleted file mode 100644
index 655f1e445..000000000
--- a/tests/unit/dialog/dialog_tickets.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * dialog_tickets.js
- */
-(function($) {
-
-module( "dialog: tickets" );
-
-asyncTest( "#3123: Prevent tabbing out of modal dialogs", function() {
- expect( 3 );
-
- var el = $( "<div><input id='t3123-first'><input id='t3123-last'></div>" ).dialog({ modal: true }),
- inputs = el.find( "input" ),
- widget = el.dialog( "widget" )[ 0 ];
-
- function checkTab() {
- ok( $.contains( widget, document.activeElement ), "Tab key event moved focus within the modal" );
-
- // check shift tab
- $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
- setTimeout( checkShiftTab, 2 );
- }
-
- function checkShiftTab() {
- ok( $.contains( widget, document.activeElement ), "Shift-Tab key event moved focus within the modal" );
-
- el.remove();
- start();
- }
-
- inputs.eq( 1 ).focus();
- equal( document.activeElement, inputs[1], "Focus set on second input" );
- inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
-
- setTimeout( checkTab, 2 );
-});
-
-test("#4826: setting resizable false toggles resizable on dialog", function() {
- expect(6);
- var i,
- el = $('<div></div>').dialog({ resizable: false });
-
- TestHelpers.dialog.shouldResize(el, 0, 0, "[default]");
- for (i=0; i<2; i++) {
- el.dialog('close').dialog('open');
- TestHelpers.dialog.shouldResize(el, 0, 0, 'initialized with resizable false toggle ('+ (i+1) +')');
- }
- el.remove();
-
- el = $('<div></div>').dialog({ resizable: true });
- TestHelpers.dialog.shouldResize(el, 50, 50, "[default]");
- for (i=0; i<2; i++) {
- el.dialog('close').dialog('option', 'resizable', false).dialog('open');
- TestHelpers.dialog.shouldResize(el, 0, 0, 'set option resizable false toggle ('+ (i+1) +')');
- }
- el.remove();
-
-});
-
-test("#5184: isOpen in dialogclose event is true", function() {
- expect( 3 );
-
- var el = $( "<div></div>" ).dialog({
- close: function() {
- ok( !el.dialog("isOpen"), "dialog is not open during close" );
- }
- });
- ok( el.dialog("isOpen"), "dialog is open after init" );
- el.dialog( "close" );
- ok( !el.dialog("isOpen"), "dialog is not open after close" );
- el.remove();
-});
-
-test("#5531: dialog width should be at least minWidth on creation", function () {
- expect( 4 );
- var el = $('<div></div>').dialog({
- width: 200,
- minWidth: 300
- });
-
- equal(el.dialog('option', 'width'), 300, "width is minWidth");
- el.dialog('option', 'width', 200);
- equal(el.dialog('option', 'width'), 300, "width unchanged when set to < minWidth");
- el.dialog('option', 'width', 320);
- equal(el.dialog('option', 'width'), 320, "width changed if set to > minWidth");
- el.remove();
-
- el = $('<div></div>').dialog({
- minWidth: 300
- });
- ok(el.dialog('option', 'width') >= 300, "width is at least 300");
- el.remove();
-
-});
-
-test("#6137: dialog('open') causes form elements to reset on IE7", function() {
- expect(2);
-
- var d1 = $('<form><input type="radio" name="radio" id="a" value="a" checked="checked"></input>' +
- '<input type="radio" name="radio" id="b" value="b">b</input></form>').appendTo( "body" ).dialog({autoOpen: false});
-
- d1.find('#b').prop( "checked", true );
- equal(d1.find('input:checked').val(), 'b', "checkbox b is checked");
-
- d1.dialog('open');
- equal(d1.find('input:checked').val(), 'b', "checkbox b is checked");
-
- d1.remove();
-});
-
-test("#6645: Missing element not found check in overlay", function(){
- expect(2);
- var d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true}),
- d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true, close: function(){ d2.remove(); }});
-
- equal($.ui.dialog.overlay.instances.length, 2, 'two overlays created');
- d2.dialog('close');
- equal($.ui.dialog.overlay.instances.length, 1, 'one overlay remains after closing the 2nd overlay');
- d1.add(d2).remove();
-});
-
-// TODO merge this with the main destroy test
-test("#4980: Destroy should place element back in original DOM position", function(){
- expect( 2 );
- var container = $('<div id="container"><div id="modal">Content</div></div>'),
- modal = container.find('#modal');
- modal.dialog();
- ok(!$.contains(container[0], modal[0]), 'dialog should move modal element to outside container element');
- modal.dialog('destroy');
- ok($.contains(container[0], modal[0]), 'dialog(destroy) should place element back in original DOM position');
-});
-
-})(jQuery);
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-31 13:15:01 +0000