diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/dialog')
10 files changed, 1687 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/unit/dialog/all.html b/apps/it/static/js/ui/tests/unit/dialog/all.html new file mode 100644 index 0000000..9efbe3e --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/all.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog Test Suite</title> + + <script src="../../../jquery-1.10.2.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <link rel="stylesheet" href="../qunit-composite.css"> + <script src="../../../external/qunit.js"></script> + <script src="../qunit-composite.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "dialog" ); + </script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Dialog Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog.html b/apps/it/static/js/ui/tests/unit/dialog/dialog.html new file mode 100644 index 0000000..d8506a1 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog Test Suite</title> + + <script src="../../jquery.js"></script> + <script> + $.uiBackCompat = false; + </script> + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + <script> + TestHelpers.loadResources({ + css: [ "ui.core", "ui.dialog" ], + js: [ + "ui/jquery.ui.core.js", + "ui/jquery.ui.widget.js", + "ui/jquery.ui.position.js", + "ui/jquery.ui.mouse.js", + "ui/jquery.ui.draggable.js", + "ui/jquery.ui.resizable.js", + "ui/jquery.ui.button.js", + "ui/jquery.ui.effect.js", + "ui/jquery.ui.effect-blind.js", + "ui/jquery.ui.effect-clip.js", + "ui/jquery.ui.effect-explode.js", + "ui/jquery.ui.dialog.js" + ] + }); + </script> + + <script src="dialog_common.js"></script> + <script src="dialog_core.js"></script> + <script src="dialog_events.js"></script> + <script src="dialog_methods.js"></script> + <script src="dialog_options.js"></script> + <script src="dialog_test_helpers.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Dialog Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + <div id="dialog1"></div> + <div id="dialog2"></div> + <div id="form-dialog" title="Profile Information"> + <!-- create a spacer to ensure there's enough space to scroll --> + <div style="height: 250px;">...</div> + <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 class="wrap" id="wrap1"></div> + <div class="wrap" id="wrap2"></div> +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_common.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_common.js new file mode 100644 index 0000000..ea4c917 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_common.js @@ -0,0 +1,43 @@ +TestHelpers.commonWidgetTests( "dialog", { + defaults: { + appendTo: "body", + autoOpen: true, + buttons: [], + closeOnEscape: true, + closeText: "close", + disabled: false, + dialogClass: "", + draggable: true, + height: "auto", + hide: null, + maxHeight: null, + maxWidth: null, + minHeight: 150, + minWidth: 150, + modal: false, + position: { + my: "center", + at: "center", + of: window, + collision: "fit", + using: $.ui.dialog.prototype.options.position.using + }, + resizable: true, + show: null, + title: null, + width: 300, + + // callbacks + beforeClose: null, + close: null, + create: null, + drag: null, + dragStart: null, + dragStop: null, + focus: null, + open: null, + resize: null, + resizeStart: null, + resizeStop: null + } +}); diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_core.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_core.js new file mode 100644 index 0000000..e85759d --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_core.js @@ -0,0 +1,163 @@ +/* + * dialog_core.js + */ + +(function($) { + +module("dialog: core"); + +test("title id", function() { + expect(1); + + var titleId, + element = $("<div></div>").dialog(); + + titleId = element.dialog("widget").find(".ui-dialog-title").attr("id"); + ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id"); + element.remove(); +}); + +test( "ARIA", function() { + expect( 4 ); + + var element = $( "<div></div>" ).dialog(), + wrapper = element.dialog( "widget" ); + equal( wrapper.attr( "role" ), "dialog", "dialog role" ); + equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) ); + equal( wrapper.attr( "aria-describedby" ), element.attr( "id" ), "aria-describedby added" ); + element.remove(); + + element = $("<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>").dialog(); + strictEqual( element.dialog( "widget" ).attr( "aria-describedby" ), undefined, "no aria-describedby added, as already present in markup" ); + element.remove(); +}); + +test("widget method", function() { + expect( 1 ); + var dialog = $("<div>").appendTo("#qunit-fixture").dialog(); + deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]); + dialog.remove(); +}); + +asyncTest( "focus tabbable", function() { + expect( 5 ); + var element, + options = { + buttons: [{ + text: "Ok", + click: $.noop + }] + }; + + function checkFocus( markup, options, testFn, next ) { + element = $( markup ).dialog( options ); + setTimeout(function() { + testFn(); + element.remove(); + setTimeout( next ); + }); + } + + function step1() { + checkFocus( "<div><input><input autofocus></div>", options, function() { + equal( document.activeElement, element.find( "input" )[ 1 ], + "1. first element inside the dialog matching [autofocus]" ); + }, step2 ); + } + + function step2() { + checkFocus( "<div><input><input></div>", options, function() { + equal( document.activeElement, element.find( "input" )[ 0 ], + "2. tabbable element inside the content element" ); + }, step3 ); + } + + function step3() { + checkFocus( "<div>text</div>", options, function() { + equal( document.activeElement, + element.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, + element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], + "4. the close button" ); + }, step5 ); + } + + function step5() { + element = $( "<div>text</div>" ).dialog({ + autoOpen: false + }); + element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); + element.dialog( "open" ); + setTimeout(function() { + equal( document.activeElement, element.parent()[ 0 ], "5. the dialog itself" ); + element.remove(); + start(); + }); + } + + step1(); +}); + +test( "#7960: resizable handles below modal overlays", function() { + expect( 1 ); + + var resizable = $( "<div>" ).resizable(), + dialog = $( "<div>" ).dialog({ modal: true }), + resizableZindex = parseInt( resizable.find( ".ui-resizable-handle" ).css( "zIndex" ), 10 ), + overlayZindex = parseInt( $( ".ui-widget-overlay" ).css( "zIndex" ), 10 ); + + ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" ); + dialog.dialog( "destroy" ); +}); + +asyncTest( "Prevent tabbing out of dialogs", function() { + expect( 3 ); + + var element = $( "<div><input><input></div>" ).dialog(), + inputs = element.find( "input" ), + widget = element.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" ); + + element.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 ); + }); +}); + +asyncTest( "#9048: multiple modal dialogs opened and closed in different order", function() { + expect( 1 ); + $( "#dialog1, #dialog2" ).dialog({ autoOpen: false, modal:true }); + $( "#dialog1" ).dialog( "open" ); + $( "#dialog2" ).dialog( "open" ); + $( "#dialog1" ).dialog( "close" ); + setTimeout(function() { + $( "#dialog2" ).dialog( "close" ); + $( "#favorite-animal" ).focus(); + ok( true, "event handlers cleaned up (no errors thrown)" ); + start(); + }); +}); +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_deprecated.html b/apps/it/static/js/ui/tests/unit/dialog/dialog_deprecated.html new file mode 100644 index 0000000..1f8bac6 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_deprecated.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Dialog Test Suite</title> + + <script src="../../jquery.js"></script> + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + <script> + TestHelpers.loadResources({ + css: [ "ui.core", "ui.dialog" ], + js: [ + "ui/jquery.ui.core.js", + "ui/jquery.ui.widget.js", + "ui/jquery.ui.position.js", + "ui/jquery.ui.mouse.js", + "ui/jquery.ui.draggable.js", + "ui/jquery.ui.resizable.js", + "ui/jquery.ui.button.js", + "ui/jquery.ui.effect.js", + "ui/jquery.ui.effect-blind.js", + "ui/jquery.ui.effect-clip.js", + "ui/jquery.ui.effect-explode.js", + "ui/jquery.ui.dialog.js" + ] + }); + </script> + + <script src="dialog_common.js"></script> + <script src="dialog_core.js"></script> + <script src="dialog_events.js"></script> + <script src="dialog_methods.js"></script> + <script src="dialog_options.js"></script> + <script src="dialog_test_helpers.js"></script> + <script src="dialog_deprecated.js"></script> + + <script src="../swarminject.js"></script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Dialog Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + <div id="dialog1"></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 class="wrap" id="wrap1"></div> + <div class="wrap" id="wrap2"></div> +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_deprecated.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_deprecated.js new file mode 100644 index 0000000..ff6284e --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_deprecated.js @@ -0,0 +1,63 @@ +module("dialog (deprecated): position option with string and array"); + +test( "position, right bottom on window w/array", function() { + expect( 2 ); + + // dialogs alter the window width and height in FF and IE7 + // so we collect that information before creating the dialog + // Support: FF, IE7 + var winWidth = $( window ).width(), + winHeight = $( window ).height(), + element = $("<div></div>").dialog({ position: [ "right", "bottom" ] }), + dialog = element.dialog("widget"), + offset = dialog.offset(); + closeEnough( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "offset left of right bottom on window w/array" ); + closeEnough( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "offset top of right bottom on window w/array" ); + element.remove(); +}); + +test( "position, right bottom on window", function() { + expect( 2 ); + + // dialogs alter the window width and height in FF and IE7 + // so we collect that information before creating the dialog + // Support: FF, IE7 + var winWidth = $( window ).width(), + winHeight = $( window ).height(), + element = $("<div></div>").dialog({ position: "right bottom" }), + dialog = element.dialog("widget"), + offset = dialog.offset(); + closeEnough( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "offset left of right bottom on window" ); + closeEnough( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "offset top of right bottom on window" ); + element.remove(); +}); + +test("position, offset from top left w/array", function() { + expect( 2 ); + var element = $("<div></div>").dialog({ position: [10, 10] }), + dialog = element.dialog("widget"), + offset = dialog.offset(); + closeEnough(offset.left, 10 + $(window).scrollLeft(), 1); + closeEnough(offset.top, 10 + $(window).scrollTop(), 1); + element.remove(); +}); + +test("position, top on window", function() { + expect( 2 ); + var element = $("<div></div>").dialog({ position: "top" }), + dialog = element.dialog("widget"), + offset = dialog.offset(); + closeEnough(offset.left, Math.round($(window).width() / 2 - dialog.outerWidth() / 2) + $(window).scrollLeft(), 1); + closeEnough(offset.top, $(window).scrollTop(), 1); + element.remove(); +}); + +test("position, left on window", function() { + expect( 2 ); + var element = $("<div></div>").dialog({ position: "left" }), + dialog = element.dialog("widget"), + offset = dialog.offset(); + closeEnough(offset.left, 0, 1); + closeEnough(offset.top, Math.round($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop(), 1); + element.remove(); +}); diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_events.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_events.js new file mode 100644 index 0000000..7bcd567 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_events.js @@ -0,0 +1,370 @@ +/* + * dialog_events.js + */ +(function($) { + +module("dialog: events"); + +test("open", function() { + expect(13); + + var element = $("<div></div>"); + element.dialog({ + open: function(ev, ui) { + ok(element.data("ui-dialog")._isOpen, "interal _isOpen flag is set"); + ok(true, "autoOpen: true fires open callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogopen", "event type in callback"); + deepEqual(ui, {}, "ui hash in callback"); + } + }); + element.remove(); + + element = $("<div></div>"); + element.dialog({ + autoOpen: false, + open: function(ev, ui) { + ok(true, ".dialog('open') fires open callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogopen", "event type in callback"); + deepEqual(ui, {}, "ui hash in callback"); + } + }).bind("dialogopen", function(ev, ui) { + ok(element.data("ui-dialog")._isOpen, "interal _isOpen flag is set"); + ok(true, "dialog('open') fires open event"); + equal(this, element[0], "context of event"); + deepEqual(ui, {}, "ui hash in event"); + }); + element.dialog("open"); + element.remove(); +}); + + +test( "focus", function() { + expect( 5 ); + var element, other; + element = $("#dialog1").dialog({ + autoOpen: false + }); + other = $("#dialog2").dialog({ + autoOpen: false + }); + + element.one( "dialogopen", function() { + ok( true, "open, just once" ); + }); + element.one( "dialogfocus", function() { + ok( true, "focus on open" ); + }); + other.dialog( "open" ); + + element.one( "dialogfocus", function() { + ok( true, "when opening and already open and wasn't on top" ); + }); + other.dialog( "open" ); + element.dialog( "open" ); + + element.one( "dialogfocus", function() { + ok( true, "when calling moveToTop and wasn't on top" ); + }); + other.dialog( "moveToTop" ); + element.dialog( "moveToTop" ); + + element.bind( "dialogfocus", function() { + ok( true, "when mousedown anywhere on the dialog and it wasn't on top" ); + }); + other.dialog( "moveToTop" ); + element.trigger( "mousedown" ); + + // triggers just once when already on top + element.dialog( "open" ); + element.dialog( "moveToTop" ); + element.trigger( "mousedown" ); + + element.add( other ).remove(); +}); + +test("dragStart", function() { + expect(9); + + var handle, + element = $("<div></div>").dialog({ + dragStart: function(ev, ui) { + ok(true, "dragging fires dragStart callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogdragstart", "event type in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.offset !== undefined, "ui.offset in callback"); + } + }).bind("dialogdragstart", function(ev, ui) { + ok(true, "dragging fires dialogdragstart event"); + equal(this, element[0], "context of event"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.offset !== undefined, "ui.offset in callback"); + }); + + handle = $(".ui-dialog-titlebar", element.dialog("widget")); + TestHelpers.dialog.drag(element, handle, 50, 50); + element.remove(); +}); + +test("drag", function() { + expect(9); + var handle, + hasDragged = false, + element = $("<div></div>").dialog({ + drag: function(ev, ui) { + if (!hasDragged) { + ok(true, "dragging fires drag callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogdrag", "event type in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.offset !== undefined, "ui.offset in callback"); + + hasDragged = true; + } + } + }).one("dialogdrag", function(ev, ui) { + ok(true, "dragging fires dialogdrag event"); + equal(this, element[0], "context of event"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.offset !== undefined, "ui.offset in callback"); + }); + + handle = $(".ui-dialog-titlebar", element.dialog("widget")); + TestHelpers.dialog.drag(element, handle, 50, 50); + element.remove(); +}); + +test("dragStop", function() { + expect(9); + + var handle, + element = $("<div></div>").dialog({ + dragStop: function(ev, ui) { + ok(true, "dragging fires dragStop callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogdragstop", "event type in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.offset !== undefined, "ui.offset in callback"); + } + }).bind("dialogdragstop", function(ev, ui) { + ok(true, "dragging fires dialogdragstop event"); + equal(this, element[0], "context of event"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.offset !== undefined, "ui.offset in callback"); + }); + + handle = $(".ui-dialog-titlebar", element.dialog("widget")); + TestHelpers.dialog.drag(element, handle, 50, 50); + element.remove(); +}); + +test("resizeStart", function() { + expect(13); + + var handle, + element = $("<div></div>").dialog({ + resizeStart: function(ev, ui) { + ok(true, "resizing fires resizeStart callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogresizestart", "event type in callback"); + ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); + ok(ui.originalSize !== undefined, "ui.originalSize in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.size !== undefined, "ui.size in callback"); + } + }).bind("dialogresizestart", function(ev, ui) { + ok(true, "resizing fires dialogresizestart event"); + equal(this, element[0], "context of event"); + ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); + ok(ui.originalSize !== undefined, "ui.originalSize in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.size !== undefined, "ui.size in callback"); + }); + + handle = $(".ui-resizable-se", element.dialog("widget")); + TestHelpers.dialog.drag(element, handle, 50, 50); + element.remove(); +}); + +test("resize", function() { + expect(13); + var handle, + hasResized = false, + element = $("<div></div>").dialog({ + resize: function(ev, ui) { + if (!hasResized) { + ok(true, "resizing fires resize callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogresize", "event type in callback"); + ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); + ok(ui.originalSize !== undefined, "ui.originalSize in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.size !== undefined, "ui.size in callback"); + + hasResized = true; + } + } + }).one("dialogresize", function(ev, ui) { + ok(true, "resizing fires dialogresize event"); + equal(this, element[0], "context of event"); + ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); + ok(ui.originalSize !== undefined, "ui.originalSize in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.size !== undefined, "ui.size in callback"); + }); + + handle = $(".ui-resizable-se", element.dialog("widget")); + TestHelpers.dialog.drag(element, handle, 50, 50); + element.remove(); +}); + +test("resizeStop", function() { + expect(13); + + var handle, + element = $("<div></div>").dialog({ + resizeStop: function(ev, ui) { + ok(true, "resizing fires resizeStop callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogresizestop", "event type in callback"); + ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); + ok(ui.originalSize !== undefined, "ui.originalSize in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.size !== undefined, "ui.size in callback"); + } + }).bind("dialogresizestop", function(ev, ui) { + ok(true, "resizing fires dialogresizestop event"); + equal(this, element[0], "context of event"); + ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); + ok(ui.originalSize !== undefined, "ui.originalSize in callback"); + ok(ui.position !== undefined, "ui.position in callback"); + ok(ui.size !== undefined, "ui.size in callback"); + }); + + handle = $(".ui-resizable-se", element.dialog("widget")); + TestHelpers.dialog.drag(element, handle, 50, 50); + element.remove(); +}); + +asyncTest("close", function() { + expect(14); + + var element = $("<div></div>").dialog({ + close: function(ev, ui) { + ok(true, ".dialog('close') fires close callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogclose", "event type in callback"); + deepEqual(ui, {}, "ui hash in callback"); + } + }).bind("dialogclose", function(ev, ui) { + ok(true, ".dialog('close') fires dialogclose event"); + equal(this, element[0], "context of event"); + deepEqual(ui, {}, "ui hash in event"); + }); + element.dialog("close"); + element.remove(); + + // Close event with an effect + element = $("<div></div>").dialog({ + hide: 10, + close: function(ev, ui) { + ok(true, ".dialog('close') fires close callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogclose", "event type in callback"); + deepEqual(ui, {}, "ui hash in callback"); + start(); + } + }).bind("dialogclose", function(ev, ui) { + ok(true, ".dialog('close') fires dialogclose event"); + equal(this, element[0], "context of event"); + deepEqual(ui, {}, "ui hash in event"); + }); + element.dialog("close"); +}); + +test("beforeClose", function() { + expect(14); + + var element = $("<div></div>").dialog({ + beforeClose: function(ev, ui) { + ok(true, ".dialog('close') fires beforeClose callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogbeforeclose", "event type in callback"); + deepEqual(ui, {}, "ui hash in callback"); + return false; + } + }); + + element.dialog("close"); + ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing"); + element.remove(); + + element = $("<div></div>").dialog(); + element.dialog("option", "beforeClose", function(ev, ui) { + ok(true, ".dialog('close') fires beforeClose callback"); + equal(this, element[0], "context of callback"); + equal(ev.type, "dialogbeforeclose", "event type in callback"); + deepEqual(ui, {}, "ui hash in callback"); + return false; + }); + element.dialog("close"); + + ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing"); + element.remove(); + + element = $("<div></div>").dialog().bind("dialogbeforeclose", function(ev, ui) { + ok(true, ".dialog('close') triggers dialogbeforeclose event"); + equal(this, element[0], "context of event"); + deepEqual(ui, {}, "ui hash in event"); + return false; + }); + element.dialog("close"); + ok( element.dialog("widget").is(":visible"), "dialogbeforeclose event should prevent dialog from closing"); + element.remove(); +}); + +// #8789 and #8838 +asyncTest("ensure dialog's container doesn't scroll on resize and focus", function() { + expect(2); + + var element = $("#dialog1").dialog(), + initialScroll = $(window).scrollTop(); + element.dialog("option", "height", 600); + equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after height change"); + setTimeout( function(){ + $(".ui-dialog-titlebar-close").simulate("mousedown"); + equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after focus moved to dialog"); + element.dialog("destroy"); + start(); + }, 500); +}); + +test("#5184: isOpen in dialogclose event is true", function() { + expect( 3 ); + + var element = $( "<div></div>" ).dialog({ + close: function() { + ok( !element.dialog("isOpen"), "dialog is not open during close" ); + } + }); + ok( element.dialog("isOpen"), "dialog is open after init" ); + element.dialog( "close" ); + ok( !element.dialog("isOpen"), "dialog is not open after close" ); + element.remove(); +}); + +test("ensure dialog keeps focus when clicking modal overlay", function() { + expect( 2 ); + + var element = $( "<div></div>" ).dialog({ + modal: true + }); + ok( $(":focus").closest(".ui-dialog").length, "focus is in dialog" ); + $(".ui-widget-overlay").simulate("mousedown"); + ok( $(":focus").closest(".ui-dialog").length, "focus is still in dialog" ); + element.remove(); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_methods.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_methods.js new file mode 100644 index 0000000..b9c8cad --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_methods.js @@ -0,0 +1,252 @@ +/* + * dialog_methods.js + */ +(function($) { + +module("dialog: methods", { + teardown: function() { + $("body>.ui-dialog").remove(); + } +}); + +test("init", function() { + expect(6); + + $("<div></div>").appendTo("body").dialog().remove(); + ok(true, ".dialog() called on element"); + + $([]).dialog().remove(); + ok(true, ".dialog() called on empty collection"); + + $("<div></div>").dialog().remove(); + ok(true, ".dialog() called on disconnected DOMElement - never connected"); + + $("<div></div>").appendTo("body").remove().dialog().remove(); + ok(true, ".dialog() called on disconnected DOMElement - removed"); + + var element = $("<div></div>").dialog(); + element.dialog("option", "foo"); + element.remove(); + ok(true, "arbitrary option getter after init"); + + $("<div></div>").dialog().dialog("option", "foo", "bar").remove(); + ok(true, "arbitrary option setter after init"); +}); + +test("destroy", function() { + expect( 17 ); + + var element, element2; + + $( "#dialog1, #form-dialog" ).hide(); + domEqual( "#dialog1", function() { + var dialog = $( "#dialog1" ).dialog().dialog( "destroy" ); + equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); + equal( dialog.index(), 0 ); + }); + domEqual( "#form-dialog", function() { + var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" ); + 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" ); + }); + + // Don't throw errors when destroying a never opened modal dialog (#9004) + $( "#dialog1" ).dialog({ autoOpen: false, modal: true }).dialog( "destroy" ); + equal( $( ".ui-widget-overlay" ).length, 0, "overlay does not exist" ); + equal( $.ui.dialog.overlayInstances, 0, "overlayInstances equals the number of open overlays"); + + element = $( "#dialog1" ).dialog({ modal: true }), + element2 = $( "#dialog2" ).dialog({ modal: true }); + equal( $( ".ui-widget-overlay" ).length, 2, "overlays created when dialogs are open" ); + equal( $.ui.dialog.overlayInstances, 2, "overlayInstances equals the number of open overlays" ); + element.dialog( "close" ); + equal( $( ".ui-widget-overlay" ).length, 1, "overlay remains after closing one dialog" ); + equal( $.ui.dialog.overlayInstances, 1, "overlayInstances equals the number of open overlays" ); + element.dialog( "destroy" ); + equal( $( ".ui-widget-overlay" ).length, 1, "overlay remains after destroying one dialog" ); + equal( $.ui.dialog.overlayInstances, 1, "overlayInstances equals the number of open overlays" ); + element2.dialog( "destroy" ); + equal( $( ".ui-widget-overlay" ).length, 0, "overlays removed when all dialogs are destoryed" ); + equal( $.ui.dialog.overlayInstances, 0, "overlayInstances equals the number of open overlays" ); +}); + +asyncTest("#9000: Dialog leaves broken event handler after close/destroy in certain cases", function() { + expect( 1 ); + $( "#dialog1" ).dialog({ modal:true }).dialog( "close" ).dialog( "destroy" ); + setTimeout(function() { + $( "#favorite-animal" ).focus(); + ok( true, "close and destroy modal dialog before its really opened" ); + start(); + }, 2 ); +}); + +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() { + expect( 2 ); + var element = $( "<div></div>" ).dialog(); + element.dialog( "disable" ); + equal(element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" ); + ok( !element.dialog( "widget" ).hasClass( "ui-dialog-disabled" ), "disable method doesn't add ui-dialog-disabled class" ); +}); + +test("close", function() { + expect( 3 ); + + var element, + expected = $("<div></div>").dialog(), + actual = expected.dialog("close"); + equal(actual, expected, "close is chainable"); + + element = $("<div></div>").dialog(); + ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible before close method called"); + element.dialog("close"); + ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden after close method called"); +}); + +test("isOpen", function() { + expect(4); + + var element = $("<div></div>").dialog(); + equal(element.dialog("isOpen"), true, "dialog is open after init"); + element.dialog("close"); + equal(element.dialog("isOpen"), false, "dialog is closed"); + element.remove(); + + element = $("<div></div>").dialog({autoOpen: false}); + equal(element.dialog("isOpen"), false, "dialog is closed after init"); + element.dialog("open"); + equal(element.dialog("isOpen"), true, "dialog is open"); + element.remove(); +}); + +test("moveToTop", function() { + expect( 5 ); + function order() { + var actual = $( ".ui-dialog" ).map(function() { + return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" ); + }).get().reverse(); + deepEqual( actual, $.makeArray( arguments ) ); + } + var dialog1, dialog2, + focusOn = "dialog1"; + dialog1 = $( "#dialog1" ).dialog({ + focus: function() { + equal( focusOn, "dialog1" ); + } + }); + focusOn = "dialog2"; + dialog2 = $( "#dialog2" ).dialog({ + focus: function() { + equal( focusOn, "dialog2" ); + } + }); + order( 2, 1 ); + focusOn = "dialog1"; + dialog1.dialog( "moveToTop" ); + order( 1, 2 ); +}); + +test("open", function() { + expect( 3 ); + var element, + expected = $("<div></div>").dialog(), + actual = expected.dialog("open"); + equal(actual, expected, "open is chainable"); + + element = $("<div></div>").dialog({ autoOpen: false }); + ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden before open method called"); + element.dialog("open"); + ok(element.dialog("widget").is(":visible") && !element.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(); +}); + +asyncTest( "#8958: dialog can be opened while opening", function() { + expect( 1 ); + + var element = $( "<div>" ).dialog({ + autoOpen: false, + modal: true, + open: function() { + equal( $( ".ui-widget-overlay" ).length, 1 ); + start(); + } + }); + + // Support: IE8 + // For some reason the #favorite-color input doesn't get focus if we don't + // focus the body first, causing the test to hang. + $( "body" ).focus(); + + $( "#favorite-animal" ) + // We focus the input to start the test. Once it receives focus, the + // dialog will open. Opening the dialog, will cause an element inside + // the dialog to gain focus, thus blurring the input. + .bind( "focus", function() { + element.dialog( "open" ); + }) + // When the input blurs, the dialog is in the process of opening. We + // try to open the dialog again, to make sure that dialogs properly + // handle a call to the open() method during the process of the dialog + // being opened. + .bind( "blur", function() { + element.dialog( "open" ); + }) + .focus(); +}); + +test("#5531: dialog width should be at least minWidth on creation", function () { + expect( 4 ); + var element = $("<div></div>").dialog({ + width: 200, + minWidth: 300 + }); + + equal(element.dialog("option", "width"), 300, "width is minWidth"); + element.dialog("option", "width", 200); + equal(element.dialog("option", "width"), 300, "width unchanged when set to < minWidth"); + element.dialog("option", "width", 320); + equal(element.dialog("option", "width"), 320, "width changed if set to > minWidth"); + element.remove(); + + element = $("<div></div>").dialog({ + minWidth: 300 + }); + ok(element.dialog("option", "width") >= 300, "width is at least 300"); + element.remove(); + +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_options.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_options.js new file mode 100644 index 0000000..07c2d68 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_options.js @@ -0,0 +1,584 @@ +/* + * dialog_options.js + */ +(function($) { + +module("dialog: options"); + +test( "appendTo", function() { + expect( 16 ); + var detached = $( "<div>" ), + element = $( "#dialog1" ).dialog({ + modal: true + }); + equal( element.dialog( "widget" ).parent()[0], document.body, "defaults to body" ); + equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay defaults to body" ); + element.dialog( "destroy" ); + + element.dialog({ + appendTo: ".wrap", + modal: true + }); + equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "first found element" ); + equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay first found element" ); + equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" ); + equal( $( "#wrap2 .ui-widget-overlay" ).length, 0, "overlay only appends to one element" ); + element.dialog( "destroy" ); + + element.dialog({ + appendTo: null, + modal: true + }); + equal( element.dialog( "widget" ).parent()[0], document.body, "null" ); + equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay null" ); + element.dialog( "destroy" ); + + element.dialog({ + autoOpen: false, + modal: true + }).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" ); + equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "modified after init" ); + equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay modified after init" ); + element.dialog( "destroy" ); + + element.dialog({ + appendTo: detached, + modal: true + }); + equal( element.dialog( "widget" ).parent()[0], detached[0], "detached jQuery object" ); + equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached jQuery object" ); + element.dialog( "destroy" ); + + element.dialog({ + appendTo: detached[0], + modal: true + }); + equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element" ); + equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached DOM element" ); + element.dialog( "destroy" ); + + element.dialog({ + autoOpen: false, + modal: true + }).dialog( "option", "appendTo", detached ); + equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" ); + equal( detached.find( ".ui-widget-overlay" ).length, 0, "overlay detached DOM element via option()" ); + element.dialog( "destroy" ); +}); + +test("autoOpen", function() { + expect(2); + + var element = $("<div></div>").dialog({ autoOpen: false }); + ok( !element.dialog("widget").is(":visible"), ".dialog({ autoOpen: false })"); + element.remove(); + + element = $("<div></div>").dialog({ autoOpen: true }); + ok( element.dialog("widget").is(":visible"), ".dialog({ autoOpen: true })"); + element.remove(); +}); + +test("buttons", function() { + expect(21); + + var btn, i, newButtons, + buttons = { + "Ok": function( ev ) { + ok(true, "button click fires callback"); + equal(this, element[0], "context of callback"); + equal(ev.target, btn[0], "event target"); + }, + "Cancel": function( ev ) { + ok(true, "button click fires callback"); + equal(this, element[0], "context of callback"); + equal(ev.target, btn[1], "event target"); + } + }, + element = $("<div></div>").dialog({ buttons: buttons }); + + btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); + equal(btn.length, 2, "number of buttons"); + + i = 0; + $.each(buttons, function( key ) { + equal(btn.eq(i).text(), key, "text of button " + (i+1)); + i++; + }); + + ok(btn.parent().hasClass("ui-dialog-buttonset"), "buttons in container"); + ok(element.parent().hasClass("ui-dialog-buttons"), "dialog wrapper adds class about having buttons"); + + btn.trigger("click"); + + newButtons = { + "Close": function( ev ) { + ok(true, "button click fires callback"); + equal(this, element[0], "context of callback"); + equal(ev.target, btn[0], "event target"); + } + }; + + deepEqual(element.dialog("option", "buttons"), buttons, ".dialog('option', 'buttons') getter"); + element.dialog("option", "buttons", newButtons); + deepEqual(element.dialog("option", "buttons"), newButtons, ".dialog('option', 'buttons', ...) setter"); + + btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); + equal(btn.length, 1, "number of buttons after setter"); + btn.trigger("click"); + + i = 0; + $.each(newButtons, function( key ) { + equal(btn.eq(i).text(), key, "text of button " + (i+1)); + i += 1; + }); + + element.dialog("option", "buttons", null); + btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); + equal(btn.length, 0, "all buttons have been removed"); + equal(element.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed"); + equal(element.parent().hasClass("ui-dialog-buttons"), false, "dialog wrapper removes class about having buttons"); + + element.remove(); +}); + +test("buttons - advanced", function() { + expect( 7 ); + + var buttons, + element = $("<div></div>").dialog({ + buttons: [ + { + text: "a button", + "class": "additional-class", + id: "my-button-id", + click: function() { + equal(this, element[0], "correct context"); + }, + icons: { + primary: "ui-icon-cancel" + }, + showText: false + } + ] + }); + + buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); + equal(buttons.length, 1, "correct number of buttons"); + equal(buttons.attr("id"), "my-button-id", "correct id"); + equal(buttons.text(), "a button", "correct label"); + ok(buttons.hasClass("additional-class"), "additional classes added"); + deepEqual( buttons.button("option", "icons"), { primary: "ui-icon-cancel", secondary: null } ); + equal( buttons.button( "option", "text" ), false ); + buttons.click(); + + element.remove(); +}); + +test("#9043: buttons with Array.prototype modification", function() { + expect( 1 ); + Array.prototype.test = $.noop; + var element = $( "<div></div>" ).dialog(); + equal( element.dialog( "widget" ).find( ".ui-dialog-buttonpane" ).length, 0, + "no button pane" ); + element.remove(); + delete Array.prototype.test; +}); + +test("closeOnEscape", function() { + expect( 6 ); + var element = $("<div></div>").dialog({ closeOnEscape: false }); + ok(true, "closeOnEscape: false"); + ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open before ESC"); + element.simulate("keydown", { keyCode: $.ui.keyCode.ESCAPE }) + .simulate("keypress", { keyCode: $.ui.keyCode.ESCAPE }) + .simulate("keyup", { keyCode: $.ui.keyCode.ESCAPE }); + ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open after ESC"); + + element.remove(); + + element = $("<div></div>").dialog({ closeOnEscape: true }); + ok(true, "closeOnEscape: true"); + ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open before ESC"); + element.simulate("keydown", { keyCode: $.ui.keyCode.ESCAPE }) + .simulate("keypress", { keyCode: $.ui.keyCode.ESCAPE }) + .simulate("keyup", { keyCode: $.ui.keyCode.ESCAPE }); + ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog is closed after ESC"); +}); + +test("closeText", function() { + expect(3); + + var element = $("<div></div>").dialog(); + equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "close", + "default close text"); + element.remove(); + + element = $("<div></div>").dialog({ closeText: "foo" }); + equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "foo", + "closeText on init"); + element.remove(); + + element = $("<div></div>").dialog().dialog("option", "closeText", "bar"); + equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "bar", + "closeText via option method"); + element.remove(); +}); + +test("dialogClass", function() { + expect( 6 ); + + var element = $("<div></div>").dialog(); + equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added"); + element.remove(); + + element = $("<div></div>").dialog({ dialogClass: "foo" }); + equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added"); + element.dialog( "option", "dialogClass", "foobar" ); + equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" ); + equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" ); + element.remove(); + + element = $("<div></div>").dialog({ dialogClass: "foo bar" }); + equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added"); + equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added"); + element.remove(); +}); + +test("draggable", function() { + expect(4); + + var element = $("<div></div>").dialog({ draggable: false }); + + TestHelpers.dialog.testDrag(element, 50, -50, 0, 0); + element.dialog("option", "draggable", true); + TestHelpers.dialog.testDrag(element, 50, -50, 50, -50); + element.remove(); + + element = $("<div></div>").dialog({ draggable: true }); + TestHelpers.dialog.testDrag(element, 50, -50, 50, -50); + element.dialog("option", "draggable", false); + TestHelpers.dialog.testDrag(element, 50, -50, 0, 0); + element.remove(); +}); + +test("height", function() { + expect(4); + + var element = $("<div></div>").dialog(); + equal(element.dialog("widget").outerHeight(), 150, "default height"); + element.remove(); + + element = $("<div></div>").dialog({ height: 237 }); + equal(element.dialog("widget").outerHeight(), 237, "explicit height"); + element.remove(); + + element = $("<div></div>").dialog(); + element.dialog("option", "height", 238); + equal(element.dialog("widget").outerHeight(), 238, "explicit height set after init"); + element.remove(); + + element = $("<div></div>").css("padding", "20px") + .dialog({ height: 240 }); + equal(element.dialog("widget").outerHeight(), 240, "explicit height with padding"); + element.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); + + var element = $("<div></div>").dialog({ maxHeight: 200 }); + TestHelpers.dialog.drag(element, ".ui-resizable-s", 1000, 1000); + closeEnough(element.dialog("widget").height(), 200, 1, "maxHeight"); + element.remove(); + + element = $("<div></div>").dialog({ maxHeight: 200 }); + TestHelpers.dialog.drag(element, ".ui-resizable-n", -1000, -1000); + closeEnough(element.dialog("widget").height(), 200, 1, "maxHeight"); + element.remove(); + + element = $("<div></div>").dialog({ maxHeight: 200 }).dialog("option", "maxHeight", 300); + TestHelpers.dialog.drag(element, ".ui-resizable-s", 1000, 1000); + closeEnough(element.dialog("widget").height(), 300, 1, "maxHeight"); + element.remove(); +}); + +test("maxWidth", function() { + expect(3); + + var element = $("<div></div>").dialog({ maxWidth: 200 }); + TestHelpers.dialog.drag(element, ".ui-resizable-e", 1000, 1000); + closeEnough(element.dialog("widget").width(), 200, 1, "maxWidth"); + element.remove(); + + element = $("<div></div>").dialog({ maxWidth: 200 }); + TestHelpers.dialog.drag(element, ".ui-resizable-w", -1000, -1000); + closeEnough(element.dialog("widget").width(), 200, 1, "maxWidth"); + element.remove(); + + element = $("<div></div>").dialog({ maxWidth: 200 }).dialog("option", "maxWidth", 300); + TestHelpers.dialog.drag(element, ".ui-resizable-w", -1000, -1000); + closeEnough(element.dialog("widget").width(), 300, 1, "maxWidth"); + element.remove(); +}); + +test("minHeight", function() { + expect(3); + + var element = $("<div></div>").dialog({ minHeight: 10 }); + TestHelpers.dialog.drag(element, ".ui-resizable-s", -1000, -1000); + closeEnough(element.dialog("widget").height(), 10, 1, "minHeight"); + element.remove(); + + element = $("<div></div>").dialog({ minHeight: 10 }); + TestHelpers.dialog.drag(element, ".ui-resizable-n", 1000, 1000); + closeEnough(element.dialog("widget").height(), 10, 1, "minHeight"); + element.remove(); + + element = $("<div></div>").dialog({ minHeight: 10 }).dialog("option", "minHeight", 30); + TestHelpers.dialog.drag(element, ".ui-resizable-n", 1000, 1000); + closeEnough(element.dialog("widget").height(), 30, 1, "minHeight"); + element.remove(); +}); + +test("minWidth", function() { + expect(3); + + var element = $("<div></div>").dialog({ minWidth: 10 }); + TestHelpers.dialog.drag(element, ".ui-resizable-e", -1000, -1000); + closeEnough(element.dialog("widget").width(), 10, 1, "minWidth"); + element.remove(); + + element = $("<div></div>").dialog({ minWidth: 10 }); + TestHelpers.dialog.drag(element, ".ui-resizable-w", 1000, 1000); + closeEnough(element.dialog("widget").width(), 10, 1, "minWidth"); + element.remove(); + + element = $("<div></div>").dialog({ minWidth: 30 }).dialog("option", "minWidth", 30); + TestHelpers.dialog.drag(element, ".ui-resizable-w", 1000, 1000); + closeEnough(element.dialog("widget").width(), 30, 1, "minWidth"); + element.remove(); +}); + +test( "position, default center on window", function() { + expect( 2 ); + + // dialogs alter the window width and height in FF and IE7 + // so we collect that information before creating the dialog + // Support: FF, IE7 + var winWidth = $( window ).width(), + winHeight = $( window ).height(), + element = $("<div></div>").dialog(), + dialog = element.dialog("widget"), + offset = dialog.offset(); + closeEnough( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" ); + closeEnough( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" ); + element.remove(); +}); + +test( "position, right bottom at right bottom via ui.position args", function() { + expect( 2 ); + + // dialogs alter the window width and height in FF and IE7 + // so we collect that information before creating the dialog + // Support: FF, IE7 + var winWidth = $( window ).width(), + winHeight = $( window ).height(), + element = $("<div></div>").dialog({ + position: { + my: "right bottom", + at: "right bottom" + } + }), + dialog = element.dialog("widget"), + offset = dialog.offset(); + + closeEnough( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" ); + closeEnough( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" ); + element.remove(); +}); + +test( "position, at another element", function() { + expect( 4 ); + var parent = $("<div></div>").css({ + position: "absolute", + top: 400, + left: 600, + height: 10, + width: 10 + }).appendTo("body"), + + element = $("<div></div>").dialog({ + position: { + my: "left top", + at: "left top", + of: parent, + collision: "none" + } + }), + + dialog = element.dialog("widget"), + offset = dialog.offset(); + + closeEnough( offset.left, 600, 1, "dialog left position at another element on initilization" ); + closeEnough( offset.top, 400, 1, "dialog top position at another element on initilization" ); + + element.dialog("option", "position", { + my: "left top", + at: "right bottom", + of: parent, + collision: "none" + }); + + offset = dialog.offset(); + + closeEnough( offset.left, 610, 1, "dialog left position at another element via setting option" ); + closeEnough( offset.top, 410, 1, "dialog top position at another element via setting option" ); + + element.remove(); + parent.remove(); +}); + +test("resizable", function() { + expect(4); + + var element = $("<div></div>").dialog(); + TestHelpers.dialog.shouldResize(element, 50, 50, "[default]"); + element.dialog("option", "resizable", false); + TestHelpers.dialog.shouldResize(element, 0, 0, "disabled after init"); + element.remove(); + + element = $("<div></div>").dialog({ resizable: false }); + TestHelpers.dialog.shouldResize(element, 0, 0, "disabled in init options"); + element.dialog("option", "resizable", true); + TestHelpers.dialog.shouldResize(element, 50, 50, "enabled after init"); + element.remove(); +}); + +test( "title", function() { + expect( 11 ); + + function titleText() { + return element.dialog("widget").find( ".ui-dialog-title" ).html(); + } + + var element = $( "<div></div>" ).dialog(); + // some browsers return a non-breaking space and some return " " + // so we generate a non-breaking space for comparison + equal( titleText(), $( "<span> </span>" ).html(), "[default]" ); + equal( element.dialog( "option", "title" ), null, "option not changed" ); + element.remove(); + + element = $( "<div title='foo'>" ).dialog(); + equal( titleText(), "foo", "title in element attribute" ); + equal( element.dialog( "option", "title"), "foo", "option updated from attribute" ); + element.remove(); + + element = $( "<div></div>" ).dialog({ title: "foo" }); + equal( titleText(), "foo", "title in init options" ); + equal( element.dialog("option", "title"), "foo", "opiton set from options hash" ); + element.remove(); + + element = $( "<div title='foo'>" ).dialog({ title: "bar" }); + equal( titleText(), "bar", "title in init options should override title in element attribute" ); + equal( element.dialog("option", "title"), "bar", "opiton set from options hash" ); + element.remove(); + + element = $( "<div></div>" ).dialog().dialog( "option", "title", "foo" ); + equal( titleText(), "foo", "title after init" ); + element.remove(); + + // make sure attroperties are properly ignored - #5742 - .attr() might return a DOMElement + element = $( "<form><input name='title'></form>" ).dialog(); + // some browsers return a non-breaking space and some return " " + // so we get the text to normalize to the actual non-breaking space + equal( titleText(), $( "<span> </span>" ).html(), "[default]" ); + equal( element.dialog( "option", "title" ), null, "option not changed" ); + element.remove(); +}); + +test("width", function() { + expect(3); + + var element = $("<div></div>").dialog(); + closeEnough(element.dialog("widget").width(), 300, 1, "default width"); + element.remove(); + + element = $("<div></div>").dialog({width: 437 }); + closeEnough(element.dialog("widget").width(), 437, 1, "explicit width"); + element.dialog("option", "width", 438); + closeEnough(element.dialog("widget").width(), 438, 1, "explicit width after init"); + element.remove(); +}); + +test("#4826: setting resizable false toggles resizable on dialog", function() { + expect(6); + var i, + element = $("<div></div>").dialog({ resizable: false }); + + TestHelpers.dialog.shouldResize(element, 0, 0, "[default]"); + for (i=0; i<2; i++) { + element.dialog("close").dialog("open"); + TestHelpers.dialog.shouldResize(element, 0, 0, "initialized with resizable false toggle ("+ (i+1) +")"); + } + element.remove(); + + element = $("<div></div>").dialog({ resizable: true }); + TestHelpers.dialog.shouldResize(element, 50, 50, "[default]"); + for (i=0; i<2; i++) { + element.dialog("close").dialog("option", "resizable", false).dialog("open"); + TestHelpers.dialog.shouldResize(element, 0, 0, "set option resizable false toggle ("+ (i+1) +")"); + } + element.remove(); + +}); + +asyncTest( "#8051 - 'Explode' dialog animation causes crash in IE 6, 7 and 8", function() { + expect( 1 ); + var element = $( "<div></div>" ).dialog({ + show: "explode", + focus: function() { + ok( true, "dialog opened with animation" ); + element.remove(); + start(); + } + }); +}); + +asyncTest( "#4421 - Focus lost from dialog which uses show-effect", function() { + expect( 1 ); + var element = $( "<div></div>" ).dialog({ + show: "blind", + focus: function() { + equal( element.dialog( "widget" ).find( ":focus" ).length, 1, "dialog maintains focus" ); + element.remove(); + start(); + } + }); +}); + +asyncTest( "Open followed by close during show effect", function() { + expect( 1 ); + var element = $( "<div></div>" ).dialog({ + show: "blind", + close: function() { + ok( true, "dialog closed properly during animation" ); + element.remove(); + start(); + } + }); + + setTimeout( function() { + element.dialog("close"); + }, 100 ); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/dialog/dialog_test_helpers.js b/apps/it/static/js/ui/tests/unit/dialog/dialog_test_helpers.js new file mode 100644 index 0000000..64e8dbf --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/dialog/dialog_test_helpers.js @@ -0,0 +1,44 @@ +TestHelpers.dialog = { + drag: function(element, handle, dx, dy) { + var d = element.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").simulate( "drag", { + dx: dx, + dy: dy + }); + }, + testDrag: function(element, dx, dy, expectedDX, expectedDY, msg) { + var actualDX, actualDY, offsetAfter, + d = element.dialog("widget"), + handle = $(".ui-dialog-titlebar", d), + offsetBefore = d.offset(); + + TestHelpers.dialog.drag(element, handle, dx, dy); + + offsetAfter = d.offset(); + + msg = msg ? msg + "." : ""; + + actualDX = offsetAfter.left - offsetBefore.left; + actualDY = offsetAfter.top - offsetBefore.top; + ok( expectedDX - actualDX <= 1 && expectedDY - actualDY <= 1, "dragged[" + expectedDX + ", " + expectedDY + "] " + msg); + }, + shouldResize: function(element, dw, dh, msg) { + var heightAfter, widthAfter, actual, expected, + d = element.dialog("widget"), + handle = $(".ui-resizable-se", d), + heightBefore = d.height(), + widthBefore = d.width(); + + TestHelpers.dialog.drag(element, handle, 50, 50); + + heightAfter = d.height(); + widthAfter = d.width(); + + msg = msg ? msg + "." : ""; + actual = { width: widthAfter, height: heightAfter }, + expected = { width: widthBefore + dw, height: heightBefore + dh }; + deepEqual(actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg); + } +}; |