diff options
| -rw-r--r-- | tests/unit/dialog/common-deprecated.js | 2 | ||||
| -rw-r--r-- | tests/unit/dialog/common.js | 2 | ||||
| -rw-r--r-- | tests/unit/dialog/core.js | 108 | ||||
| -rw-r--r-- | tests/unit/dialog/deprecated.js | 6 | ||||
| -rw-r--r-- | tests/unit/dialog/events.js | 498 | ||||
| -rw-r--r-- | tests/unit/dialog/helper.js | 30 | ||||
| -rw-r--r-- | tests/unit/dialog/methods.js | 230 | ||||
| -rw-r--r-- | tests/unit/dialog/options.js | 492 | ||||
| -rw-r--r-- | ui/widgets/dialog.js | 15 |
9 files changed, 702 insertions, 681 deletions
diff --git a/tests/unit/dialog/common-deprecated.js b/tests/unit/dialog/common-deprecated.js index 26f7cb201..1efdcb030 100644 --- a/tests/unit/dialog/common-deprecated.js +++ b/tests/unit/dialog/common-deprecated.js @@ -49,6 +49,6 @@ common.testWidget( "dialog", { resizeStart: null, resizeStop: null } -}); +} ); } ); diff --git a/tests/unit/dialog/common.js b/tests/unit/dialog/common.js index b1884b8cc..c8d885ad0 100644 --- a/tests/unit/dialog/common.js +++ b/tests/unit/dialog/common.js @@ -48,6 +48,6 @@ common.testWidget( "dialog", { resizeStart: null, resizeStop: null } -}); +} ); } ); diff --git a/tests/unit/dialog/core.js b/tests/unit/dialog/core.js index b351b0aeb..7008a832d 100644 --- a/tests/unit/dialog/core.js +++ b/tests/unit/dialog/core.js @@ -4,17 +4,17 @@ define( [ ], function( $ ) { // TODO add teardown callback to remove dialogs -module("dialog: core"); +module( "dialog: core" ); test( "markup structure", function( assert ) { expect( 11 ); - var element = $( "<div>" ).dialog({ + var element = $( "<div>" ).dialog( { buttons: [ { text: "Ok", click: $.noop } ] - }), + } ), widget = element.dialog( "widget" ), titlebar = widget.find( ".ui-dialog-titlebar" ), title = titlebar.find( ".ui-dialog-title" ), @@ -35,7 +35,7 @@ test( "markup structure", function( assert ) { equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" ); equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" ); -}); +} ); test( "markup structure - no buttons", function( assert ) { expect( 7 ); @@ -53,18 +53,18 @@ test( "markup structure - no buttons", function( assert ) { equal( close.length, 1, "Titlebar has exactly one close button" ); equal( title.length, 1, "Titlebar has exactly one title" ); assert.hasClasses( element, "ui-dialog-content ui-widget-content" ); -}); +} ); -test("title id", function() { - expect(1); +test( "title id", function() { + expect( 1 ); var titleId, - element = $("<div>").dialog(); + element = $( "<div>" ).dialog(); - titleId = element.dialog("widget").find(".ui-dialog-title").attr("id"); - ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id"); + 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 ); @@ -76,26 +76,26 @@ test( "ARIA", function() { 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(); + element = $( "<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>" ).dialog(); equal( element.dialog( "widget" ).attr( "aria-describedby" ), null, "no aria-describedby added, as already present in markup" ); element.remove(); -}); +} ); -test("widget method", function() { +test( "widget method", function() { expect( 1 ); - var dialog = $("<div>").appendTo("#qunit-fixture").dialog(); - deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]); + var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog(); + deepEqual( dialog.parent()[ 0 ], dialog.dialog( "widget" )[ 0 ] ); dialog.remove(); -}); +} ); asyncTest( "focus tabbable", function() { expect( 8 ); var element, options = { - buttons: [{ + buttons: [ { text: "Ok", click: $.noop - }] + } ] }; function checkFocus( markup, options, testFn, next ) { @@ -106,23 +106,23 @@ asyncTest( "focus tabbable", function() { $( "body" ).trigger( "focus" ); element = $( markup ).dialog( options ); - setTimeout(function() { - testFn(function done() { + setTimeout( function() { + testFn( function done() { element.remove(); setTimeout( next ); - }); - }); + } ); + } ); } function step1() { checkFocus( "<div><input><input></div>", options, function( done ) { var input = element.find( "input:last" ).trigger( "focus" ).trigger( "blur" ); element.dialog( "instance" )._focusTabbable(); - setTimeout(function() { + setTimeout( function() { equal( document.activeElement, input[ 0 ], "1. an element that was focused previously." ); done(); - }); + } ); }, step2 ); } @@ -164,10 +164,10 @@ asyncTest( "focus tabbable", function() { checkFocus( "<div>text</div>", { autoOpen: false }, function( done ) { element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); element.dialog( "open" ); - setTimeout(function() { + setTimeout( function() { equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" ); done(); - }); + } ); }, step7 ); } @@ -177,17 +177,17 @@ asyncTest( "focus tabbable", function() { { open: function() { var inputs = $( this ).find( "input" ); - inputs.last().on( "keydown",function( event ) { + inputs.last().on( "keydown", function( event ) { event.preventDefault(); inputs.first().trigger( "focus" ); - }); + } ); } }, function( done ) { var inputs = element.find( "input" ); equal( document.activeElement, inputs[ 1 ], "Focus starts on second input" ); - inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB }); - setTimeout(function() { + inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB } ); + setTimeout( function() { equal( document.activeElement, inputs[ 0 ], "Honor preventDefault, allowing custom focus management" ); done(); @@ -198,19 +198,19 @@ asyncTest( "focus tabbable", function() { } step1(); -}); +} ); test( "#7960: resizable handles below modal overlays", function() { expect( 1 ); var resizable = $( "<div>" ).resizable(), - dialog = $( "<div>" ).dialog({ modal: true }), + 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 ); @@ -219,13 +219,13 @@ asyncTest( "Prevent tabbing out of dialogs", function() { inputs = element.find( "input" ); // Remove close button to test focus on just the two buttons - element.dialog( "widget" ).find( ".ui-button").remove(); + element.dialog( "widget" ).find( ".ui-button" ).remove(); function checkTab() { equal( document.activeElement, inputs[ 0 ], "Tab key event moved focus within the modal" ); // Check shift tab - $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true }); + $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true } ); setTimeout( checkShiftTab ); } @@ -237,27 +237,27 @@ asyncTest( "Prevent tabbing out of dialogs", function() { } inputs[ 1 ].focus(); - setTimeout(function() { + setTimeout( function() { equal( document.activeElement, inputs[ 1 ], "Focus set on second input" ); - inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB }); + 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, #dialog2" ).dialog( { autoOpen: false, modal:true } ); $( "#dialog1" ).dialog( "open" ); $( "#dialog2" ).dialog( "open" ); $( "#dialog1" ).dialog( "close" ); - setTimeout(function() { + setTimeout( function() { $( "#dialog2" ).dialog( "close" ); $( "#favorite-animal" ).trigger( "focus" ); ok( true, "event handlers cleaned up (no errors thrown)" ); start(); - }); -}); + } ); +} ); asyncTest( "interaction between overlay and other dialogs", function() { $.widget( "ui.testWidget", $.ui.dialog, { @@ -265,11 +265,11 @@ asyncTest( "interaction between overlay and other dialogs", function() { modal: true, autoOpen: false } - }); + } ); expect( 2 ); - var first = $( "<div><input id='input-1'></div>" ).dialog({ + var first = $( "<div><input id='input-1'></div>" ).dialog( { modal: true - }), + } ), firstInput = first.find( "input" ), second = $( "<div><input id='input-2'></div>" ).testWidget(), secondInput = second.find( "input" ); @@ -280,18 +280,18 @@ asyncTest( "interaction between overlay and other dialogs", function() { $( "body" ).trigger( "focus" ); // Wait for the modal to init - setTimeout(function() { + setTimeout( function() { second.testWidget( "open" ); // Simulate user tabbing from address bar to an element outside the dialog $( "#favorite-animal" ).trigger( "focus" ); - setTimeout(function() { + setTimeout( function() { equal( document.activeElement, secondInput[ 0 ] ); // Last active dialog must receive focus firstInput.trigger( "focus" ); $( "#favorite-animal" ).trigger( "focus" ); - setTimeout(function() { + setTimeout( function() { equal( document.activeElement, firstInput[ 0 ] ); // Cleanup @@ -300,9 +300,9 @@ asyncTest( "interaction between overlay and other dialogs", function() { delete $.ui.testWidget; delete $.fn.testWidget; start(); - }); - }); - }); -}); + } ); + } ); + } ); +} ); } ); diff --git a/tests/unit/dialog/deprecated.js b/tests/unit/dialog/deprecated.js index 2d75cad0d..1a6794338 100644 --- a/tests/unit/dialog/deprecated.js +++ b/tests/unit/dialog/deprecated.js @@ -13,7 +13,7 @@ test( "dialogClass", function( assert ) { assert.lacksClasses( widget, "foo", "dialogClass not specified. class not added" ); element.remove(); - element = $( "<div>" ).dialog({ dialogClass: "foo" }); + element = $( "<div>" ).dialog( { dialogClass: "foo" } ); widget = element.dialog( "widget" ); assert.hasClasses( widget, "foo", "dialogClass in init, foo class added" ); element.dialog( "option", "dialogClass", "foobar" ); @@ -21,10 +21,10 @@ test( "dialogClass", function( assert ) { assert.hasClasses( widget, "foobar", "dialogClass changed, new one was added" ); element.remove(); - element = $( "<div>" ).dialog({ dialogClass: "foo bar" }); + element = $( "<div>" ).dialog( { dialogClass: "foo bar" } ); widget = element.dialog( "widget" ); assert.hasClasses( widget, "foo bar", "dialogClass in init, two classes." ); element.remove(); -}); +} ); } ); diff --git a/tests/unit/dialog/events.js b/tests/unit/dialog/events.js index 8a56699ab..dd1f4055a 100644 --- a/tests/unit/dialog/events.js +++ b/tests/unit/dialog/events.js @@ -4,75 +4,75 @@ define( [ "ui/widgets/dialog" ], function( $, testHelper ) { -module("dialog: events"); - -test("open", function() { - expect(13); - - var element = $("<div></div>"); - element.dialog({ - open: function(ev, ui) { - ok(element.dialog( "instance" )._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"); +module( "dialog: events" ); + +test( "open", function() { + expect( 13 ); + + var element = $( "<div></div>" ); + element.dialog( { + open: function( ev, ui ) { + ok( element.dialog( "instance" )._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({ + 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"); + 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" ); } - }).on("dialogopen", function(ev, ui) { - ok(element.dialog( "instance" )._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"); + } ).on( "dialogopen", function( ev, ui ) { + ok( element.dialog( "instance" )._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({ + element = $( "#dialog1" ).dialog( { autoOpen: false - }); - other = $("#dialog2").dialog({ + } ); + 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.on( "dialogfocus", function() { ok( true, "when mousedown anywhere on the dialog and it wasn't on top" ); - }); + } ); other.dialog( "moveToTop" ); element.trigger( "mousedown" ); @@ -82,289 +82,289 @@ test( "focus", function() { element.trigger( "mousedown" ); element.add( other ).remove(); -}); +} ); -test("dragStart", function() { - expect(9); +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"); + 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" ); } - }).on("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")); - testHelper.drag(element, handle, 50, 50); + } ).on( "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" ) ); + testHelper.drag( element, handle, 50, 50 ); element.remove(); -}); +} ); -test("drag", function() { - expect(9); +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"); + 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")); - testHelper.drag(element, handle, 50, 50); + } ).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" ) ); + testHelper.drag( element, handle, 50, 50 ); element.remove(); -}); +} ); -test("dragStop", function() { - expect(9); +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"); + 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" ); } - }).on("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")); - testHelper.drag(element, handle, 50, 50); + } ).on( "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" ) ); + testHelper.drag( element, handle, 50, 50 ); element.remove(); -}); +} ); -test("resizeStart", function() { - expect(13); +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"); + 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" ); } - }).on("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")); - testHelper.drag(element, handle, 50, 50); + } ).on( "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" ) ); + testHelper.drag( element, handle, 50, 50 ); element.remove(); -}); +} ); -test("resize", function() { - expect(13); +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"); + 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")); - testHelper.drag(element, handle, 50, 50); + } ).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" ) ); + testHelper.drag( element, handle, 50, 50 ); element.remove(); -}); +} ); -test("resizeStop", function() { - expect(13); +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"); + 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" ); } - }).on("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")); - testHelper.drag(element, handle, 50, 50); + } ).on( "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" ) ); + testHelper.drag( element, handle, 50, 50 ); element.remove(); -}); +} ); -asyncTest("close", function() { - expect(14); +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"); + 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" ); } - }).on("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"); + } ).on( "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({ + 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"); + 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(); } - }).on("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"); + } ).on( "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.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"); + 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"); + } ); + element.dialog( "close" ); - ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing"); + ok( element.dialog( "widget" ).is( ":visible" ), "beforeClose callback should prevent dialog from closing" ); element.remove(); - element = $("<div></div>").dialog().on("dialogbeforeclose", function(ev, ui) { - ok(true, ".dialog('close') triggers dialogbeforeclose event"); - equal(this, element[0], "context of event"); - deepEqual(ui, {}, "ui hash in event"); + element = $( "<div></div>" ).dialog().on( "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.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"); +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(); - }); -}); + } ); +} ); -test("#5184: isOpen in dialogclose event is true", function() { +test( "#5184: isOpen in dialogclose event is true", function() { expect( 3 ); - var element = $( "<div></div>" ).dialog({ + var element = $( "<div></div>" ).dialog( { close: function() { - ok( !element.dialog("isOpen"), "dialog is not open during close" ); + ok( !element.dialog( "isOpen" ), "dialog is not open during close" ); } - }); - ok( element.dialog("isOpen"), "dialog is open after init" ); + } ); + ok( element.dialog( "isOpen" ), "dialog is open after init" ); element.dialog( "close" ); - ok( !element.dialog("isOpen"), "dialog is not open after close" ); + ok( !element.dialog( "isOpen" ), "dialog is not open after close" ); element.remove(); -}); +} ); -test("ensure dialog keeps focus when clicking modal overlay", function() { +test( "ensure dialog keeps focus when clicking modal overlay", function() { expect( 2 ); - var element = $( "<div></div>" ).dialog({ + var element = $( "<div></div>" ).dialog( { modal: true - }); + } ); equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is in dialog" ); - $(".ui-widget-overlay").simulate("mousedown"); + $( ".ui-widget-overlay" ).simulate( "mousedown" ); equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is still in dialog" ); element.remove(); -}); +} ); } ); diff --git a/tests/unit/dialog/helper.js b/tests/unit/dialog/helper.js index 87ca9c172..9db5b5613 100644 --- a/tests/unit/dialog/helper.js +++ b/tests/unit/dialog/helper.js @@ -5,22 +5,23 @@ define( [ ], function( $, helper ) { return $.extend( helper, { - drag: function(element, handle, dx, dy) { - var d = element.dialog("widget"); + 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", { + $( handle, d ).simulate( "mouseover" ).simulate( "drag", { dx: dx, dy: dy - }); + } ); }, - testDrag: function(element, dx, dy, expectedDX, expectedDY, msg) { + testDrag: function( element, dx, dy, expectedDX, expectedDY, msg ) { var actualDX, actualDY, offsetAfter, - d = element.dialog("widget"), - handle = $(".ui-dialog-titlebar", d), + d = element.dialog( "widget" ), + handle = $( ".ui-dialog-titlebar", d ), offsetBefore = d.offset(); - this.drag(element, handle, dx, dy); + this.drag( element, handle, dx, dy ); offsetAfter = d.offset(); @@ -28,19 +29,20 @@ return $.extend( helper, { actualDX = offsetAfter.left - offsetBefore.left; actualDY = offsetAfter.top - offsetBefore.top; - ok( expectedDX - actualDX <= 1 && expectedDY - actualDY <= 1, "dragged[" + expectedDX + ", " + expectedDY + "] " + msg); + ok( expectedDX - actualDX <= 1 && expectedDY - actualDY <= 1, "dragged[" + expectedDX + ", " + expectedDY + "] " + msg ); }, + // TODO switch back to checking the size of the .ui-dialog element (var d) // once we switch to using box-sizing: border-box (#9845) that should work fine // using the element's dimensions to avoid subpixel errors - shouldResize: function(element, dw, dh, msg) { + shouldResize: function( element, dw, dh, msg ) { var heightAfter, widthAfter, actual, expected, - d = element.dialog("widget"), - handle = $(".ui-resizable-se", d), + d = element.dialog( "widget" ), + handle = $( ".ui-resizable-se", d ), heightBefore = element.height(), widthBefore = element.width(); - this.drag(element, handle, 50, 50); + this.drag( element, handle, 50, 50 ); heightAfter = element.height(); widthAfter = element.width(); @@ -48,7 +50,7 @@ return $.extend( helper, { msg = msg ? msg + "." : ""; actual = { width: widthAfter, height: heightAfter }, expected = { width: widthBefore + dw, height: heightBefore + dh }; - deepEqual(actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg); + deepEqual( actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg ); } } ); diff --git a/tests/unit/dialog/methods.js b/tests/unit/dialog/methods.js index a730350b1..acb0f885a 100644 --- a/tests/unit/dialog/methods.js +++ b/tests/unit/dialog/methods.js @@ -3,37 +3,37 @@ define( [ "ui/widgets/dialog" ], function( $ ) { -module("dialog: methods", { +module( "dialog: methods", { teardown: function() { - $("body>.ui-dialog").remove(); + $( "body>.ui-dialog" ).remove(); } -}); +} ); -test("init", function() { - expect(6); +test( "init", function() { + expect( 6 ); - $("<div></div>").appendTo("body").dialog().remove(); - ok(true, ".dialog() called on element"); + $( "<div></div>" ).appendTo( "body" ).dialog().remove(); + ok( true, ".dialog() called on element" ); - $([]).dialog().remove(); - ok(true, ".dialog() called on empty collection"); + $( [] ).dialog().remove(); + ok( true, ".dialog() called on empty collection" ); - $("<div></div>").dialog().remove(); - ok(true, ".dialog() called on disconnected DOMElement - never connected"); + $( "<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"); + $( "<div></div>" ).appendTo( "body" ).remove().dialog().remove(); + ok( true, ".dialog() called on disconnected DOMElement - removed" ); - var element = $("<div></div>").dialog(); - element.dialog("option", "foo"); + var element = $( "<div></div>" ).dialog(); + element.dialog( "option", "foo" ); element.remove(); - ok(true, "arbitrary option getter after init"); + ok( true, "arbitrary option getter after init" ); - $("<div></div>").dialog().dialog("option", "foo", "bar").remove(); - ok(true, "arbitrary option setter after init"); -}); + $( "<div></div>" ).dialog().dialog( "option", "foo", "bar" ).remove(); + ok( true, "arbitrary option setter after init" ); +} ); -test("destroy", function( assert ) { +test( "destroy", function( assert ) { expect( 17 ); var element, element2; @@ -43,30 +43,30 @@ test("destroy", function( assert ) { var dialog = $( "#dialog1" ).dialog().dialog( "destroy" ); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); equal( dialog.index(), 0 ); - }); + } ); assert.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({ + $( "#dialog1" ).show().css( { width: "400px", minHeight: "100px", height: "200px" - }); + } ); assert.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" ); + $( "#dialog1" ).dialog( { autoOpen: false, modal: true } ).dialog( "destroy" ); equal( $( ".ui-widget-overlay" ).length, 0, "overlay does not exist" ); - equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays"); + equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" ); - element = $( "#dialog1" ).dialog({ modal: true }), - element2 = $( "#dialog2" ).dialog({ modal: true }); + element = $( "#dialog1" ).dialog( { modal: true } ), + element2 = $( "#dialog2" ).dialog( { modal: true } ); equal( $( ".ui-widget-overlay" ).length, 2, "overlays created when dialogs are open" ); equal( $( document ).data( "ui-dialog-overlays" ), 2, "ui-dialog-overlays equals the number of open overlays" ); element.dialog( "close" ); @@ -78,147 +78,147 @@ test("destroy", function( assert ) { element2.dialog( "destroy" ); equal( $( ".ui-widget-overlay" ).length, 0, "overlays removed when all dialogs are destoryed" ); equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" ); -}); +} ); -asyncTest("#9000: Dialog leaves broken event handler after close/destroy in certain cases", function() { +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() { + $( "#dialog1" ).dialog( { modal:true } ).dialog( "close" ).dialog( "destroy" ); + setTimeout( function() { $( "#favorite-animal" ).trigger( "focus" ); ok( true, "close and destroy modal dialog before its really opened" ); start(); - }); -}); + } ); +} ); -test("#4980: Destroy should place element back in original DOM position", function(){ +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"); + 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"); -}); + 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( assert ) { expect( 3 ); var element = $( "<div></div>" ).dialog(); element.dialog( "disable" ); - equal(element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" ); + equal( element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" ); assert.lacksClasses( element, "ui-dialog-disabled ui-state-disabled", "disable method doesn't add classes" ); ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" ); -}); +} ); -test("close", function() { +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"); + 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 = $( "<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() { +test( "moveToTop", function() { expect( 5 ); function order() { - var actual = $( ".ui-dialog" ).map(function() { + var actual = $( ".ui-dialog" ).map( function() { return +$( this ).css( "z-index" ); - }).get(); + } ).get(); deepEqual( actual, $.makeArray( arguments ) ); } var dialog1, dialog2, focusOn = "dialog1"; - dialog1 = $( "#dialog1" ).dialog({ + dialog1 = $( "#dialog1" ).dialog( { focus: function() { equal( focusOn, "dialog1" ); } - }); + } ); focusOn = "dialog2"; - dialog2 = $( "#dialog2" ).dialog({ + dialog2 = $( "#dialog2" ).dialog( { focus: function() { equal( focusOn, "dialog2" ); } - }); + } ); order( 100, 101 ); focusOn = "dialog1"; dialog1.dialog( "moveToTop" ); order( 102, 101 ); -}); +} ); test( "moveToTop: content scroll stays intact", function() { expect( 2 ); var otherDialog = $( "#dialog1" ).dialog(), - scrollDialog = $( "#form-dialog" ).dialog({ + scrollDialog = $( "#form-dialog" ).dialog( { height: 200 - }); + } ); scrollDialog.scrollTop( 50 ); equal( scrollDialog.scrollTop(), 50 ); otherDialog.dialog( "moveToTop" ); equal( scrollDialog.scrollTop(), 50 ); -}); +} ); -test("open", function() { +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"); -}); + 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" ); +} ); // http://bugs.jqueryui.com/ticket/6137 -test("Ensure form elements don't reset when opening a dialog", function() { - expect(2); +test( "Ensure form elements don't reset when opening a dialog", 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}); + 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.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.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({ + 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 @@ -226,42 +226,44 @@ asyncTest( "#8958: dialog can be opened while opening", function() { $( "body" ).trigger( "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. .on( "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. .on( "blur", function() { element.dialog( "open" ); - }) + } ) .trigger( "focus" ); -}); +} ); -test("#5531: dialog width should be at least minWidth on creation", function () { +test( "#5531: dialog width should be at least minWidth on creation", function() { expect( 4 ); - var element = $("<div></div>").dialog({ + 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"); + 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({ + element = $( "<div></div>" ).dialog( { minWidth: 300 - }); - ok(element.dialog("option", "width") >= 300, "width is at least 300"); + } ); + ok( element.dialog( "option", "width" ) >= 300, "width is at least 300" ); element.remove(); -}); +} ); } ); diff --git a/tests/unit/dialog/options.js b/tests/unit/dialog/options.js index aa659f041..7565799c4 100644 --- a/tests/unit/dialog/options.js +++ b/tests/unit/dialog/options.js @@ -6,155 +6,155 @@ define( [ "ui/effects/effect-explode" ], function( $, testHelper ) { -module("dialog: options"); +module( "dialog: options" ); test( "appendTo", function() { expect( 16 ); var detached = $( "<div>" ), - element = $( "#dialog1" ).dialog({ + 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" ); + } ); + 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({ + 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( 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({ + 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" ); + } ); + equal( element.dialog( "widget" ).parent()[ 0 ], document.body, "null" ); + equal( $( ".ui-widget-overlay" ).parent()[ 0 ], document.body, "overlay null" ); element.dialog( "destroy" ); - element.dialog({ + 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" ); + } ).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({ + 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" ); + } ); + 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], + 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" ); + } ); + 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({ + element.dialog( { autoOpen: false, modal: true - }).dialog( "option", "appendTo", detached ); - equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" ); + } ).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); +test( "autoOpen", function() { + expect( 2 ); - var element = $("<div></div>").dialog({ autoOpen: false }); - ok( !element.dialog("widget").is(":visible"), ".dialog({ autoOpen: false })"); + 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 = $( "<div></div>" ).dialog( { autoOpen: true } ); + ok( element.dialog( "widget" ).is( ":visible" ), ".dialog({ autoOpen: true })" ); element.remove(); -}); +} ); -test("buttons", function( assert ) { - expect(21); +test( "buttons", function( assert ) { + 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"); + 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"); + 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 }); + element = $( "<div></div>" ).dialog( { buttons: buttons } ); btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); - equal(btn.length, 2, "number of buttons"); + equal( btn.length, 2, "number of buttons" ); i = 0; - $.each(buttons, function( key ) { - equal(btn.eq(i).text(), key, "text of button " + (i+1)); + $.each( buttons, function( key ) { + equal( btn.eq( i ).text(), key, "text of button " + ( i + 1 ) ); i++; - }); + } ); assert.hasClasses( btn.parent(), "ui-dialog-buttonset" ); assert.hasClasses( element.parent(), "ui-dialog-buttons" ); - btn.trigger("click"); + 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"); + 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"); + 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"); + 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)); + $.each( newButtons, function( key ) { + equal( btn.eq( i ).text(), key, "text of button " + ( i + 1 ) ); i += 1; - }); + } ); - element.dialog("option", "buttons", null); + 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( btn.length, 0, "all buttons have been removed" ); + equal( element.find( ".ui-dialog-buttonset" ).length, 0, "buttonset has been removed" ); assert.lacksClasses( element.parent(), "ui-dialog-buttons" ); element.remove(); -}); +} ); -test("buttons - advanced", function( assert ) { +test( "buttons - advanced", function( assert ) { expect( 7 ); var buttons, - element = $("<div></div>").dialog({ + element = $( "<div></div>" ).dialog( { buttons: [ { text: "a button", "class": "additional-class", id: "my-button-id", click: function() { - equal(this, element[0], "correct context"); + equal( this, element[ 0 ], "correct context" ); }, icons: { primary: "ui-icon-cancel" @@ -162,21 +162,21 @@ test("buttons - advanced", function( assert ) { 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"); + equal( buttons.length, 1, "correct number of buttons" ); + equal( buttons.attr( "id" ), "my-button-id", "correct id" ); + equal( buttons.text(), "a button", "correct label" ); assert.hasClasses( buttons, "additional-class" ); - deepEqual( buttons.button("option", "icons"), { primary: "ui-icon-cancel", secondary: null } ); + deepEqual( buttons.button( "option", "icons" ), { primary: "ui-icon-cancel", secondary: null } ); equal( buttons.button( "option", "text" ), false ); buttons.trigger( "click" ); element.remove(); -}); +} ); -test("#9043: buttons with Array.prototype modification", function() { +test( "#9043: buttons with Array.prototype modification", function() { expect( 1 ); Array.prototype.test = $.noop; var element = $( "<div></div>" ).dialog(); @@ -184,162 +184,162 @@ test("#9043: buttons with Array.prototype modification", function() { "no button pane" ); element.remove(); delete Array.prototype.test; -}); +} ); -test("closeOnEscape", function() { +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"); -}); + 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); +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"); + 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 = $( "<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 = $( "<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("draggable", function() { - expect(4); +test( "draggable", function() { + expect( 4 ); - var element = $("<div></div>").dialog({ draggable: false }); + var element = $( "<div></div>" ).dialog( { draggable: false } ); - testHelper.testDrag(element, 50, -50, 0, 0); - element.dialog("option", "draggable", true); - testHelper.testDrag(element, 50, -50, 50, -50); + testHelper.testDrag( element, 50, -50, 0, 0 ); + element.dialog( "option", "draggable", true ); + testHelper.testDrag( element, 50, -50, 50, -50 ); element.remove(); - element = $("<div></div>").dialog({ draggable: true }); - testHelper.testDrag(element, 50, -50, 50, -50); - element.dialog("option", "draggable", false); - testHelper.testDrag(element, 50, -50, 0, 0); + element = $( "<div></div>" ).dialog( { draggable: true } ); + testHelper.testDrag( element, 50, -50, 50, -50 ); + element.dialog( "option", "draggable", false ); + testHelper.testDrag( element, 50, -50, 0, 0 ); element.remove(); -}); +} ); -test("height", function() { - expect(4); +test( "height", function() { + expect( 4 ); - var element = $("<div></div>").dialog(); - equal(element.dialog("widget").outerHeight(), 150, "default height"); + 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 = $( "<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 = $( "<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 = $( "<div></div>" ).css( "padding", "20px" ) + .dialog( { height: 240 } ); + equal( element.dialog( "widget" ).outerHeight(), 240, "explicit height with padding" ); element.remove(); -}); +} ); -test("maxHeight", function( assert ) { - expect(3); +test( "maxHeight", function( assert ) { + expect( 3 ); - var element = $("<div></div>").dialog({ maxHeight: 200 }); - testHelper.drag(element, ".ui-resizable-s", 1000, 1000); - assert.close(element.dialog("widget").height(), 200, 1, "maxHeight"); + var element = $( "<div></div>" ).dialog( { maxHeight: 200 } ); + testHelper.drag( element, ".ui-resizable-s", 1000, 1000 ); + assert.close( element.dialog( "widget" ).height(), 200, 1, "maxHeight" ); element.remove(); - element = $("<div></div>").dialog({ maxHeight: 200 }); - testHelper.drag(element, ".ui-resizable-n", -1000, -1000); - assert.close(element.dialog("widget").height(), 200, 1, "maxHeight"); + element = $( "<div></div>" ).dialog( { maxHeight: 200 } ); + testHelper.drag( element, ".ui-resizable-n", -1000, -1000 ); + assert.close( element.dialog( "widget" ).height(), 200, 1, "maxHeight" ); element.remove(); - element = $("<div></div>").dialog({ maxHeight: 200 }).dialog("option", "maxHeight", 300); - testHelper.drag(element, ".ui-resizable-s", 1000, 1000); - assert.close(element.dialog("widget").height(), 300, 1, "maxHeight"); + element = $( "<div></div>" ).dialog( { maxHeight: 200 } ).dialog( "option", "maxHeight", 300 ); + testHelper.drag( element, ".ui-resizable-s", 1000, 1000 ); + assert.close( element.dialog( "widget" ).height(), 300, 1, "maxHeight" ); element.remove(); -}); +} ); -test("maxWidth", function( assert ) { - expect(3); +test( "maxWidth", function( assert ) { + expect( 3 ); - var element = $("<div></div>").dialog({ maxWidth: 200 }); - testHelper.drag(element, ".ui-resizable-e", 1000, 1000); - assert.close(element.dialog("widget").width(), 200, 1, "maxWidth"); + var element = $( "<div></div>" ).dialog( { maxWidth: 200 } ); + testHelper.drag( element, ".ui-resizable-e", 1000, 1000 ); + assert.close( element.dialog( "widget" ).width(), 200, 1, "maxWidth" ); element.remove(); - element = $("<div></div>").dialog({ maxWidth: 200 }); - testHelper.drag(element, ".ui-resizable-w", -1000, -1000); - assert.close(element.dialog("widget").width(), 200, 1, "maxWidth"); + element = $( "<div></div>" ).dialog( { maxWidth: 200 } ); + testHelper.drag( element, ".ui-resizable-w", -1000, -1000 ); + assert.close( element.dialog( "widget" ).width(), 200, 1, "maxWidth" ); element.remove(); - element = $("<div></div>").dialog({ maxWidth: 200 }).dialog("option", "maxWidth", 300); - testHelper.drag(element, ".ui-resizable-w", -1000, -1000); - assert.close(element.dialog("widget").width(), 300, 1, "maxWidth"); + element = $( "<div></div>" ).dialog( { maxWidth: 200 } ).dialog( "option", "maxWidth", 300 ); + testHelper.drag( element, ".ui-resizable-w", -1000, -1000 ); + assert.close( element.dialog( "widget" ).width(), 300, 1, "maxWidth" ); element.remove(); -}); +} ); -test("minHeight", function( assert ) { - expect(3); +test( "minHeight", function( assert ) { + expect( 3 ); - var element = $("<div></div>").dialog({ minHeight: 10 }); - testHelper.drag(element, ".ui-resizable-s", -1000, -1000); - assert.close(element.dialog("widget").height(), 10, 1, "minHeight"); + var element = $( "<div></div>" ).dialog( { minHeight: 10 } ); + testHelper.drag( element, ".ui-resizable-s", -1000, -1000 ); + assert.close( element.dialog( "widget" ).height(), 10, 1, "minHeight" ); element.remove(); - element = $("<div></div>").dialog({ minHeight: 10 }); - testHelper.drag(element, ".ui-resizable-n", 1000, 1000); - assert.close(element.dialog("widget").height(), 10, 1, "minHeight"); + element = $( "<div></div>" ).dialog( { minHeight: 10 } ); + testHelper.drag( element, ".ui-resizable-n", 1000, 1000 ); + assert.close( element.dialog( "widget" ).height(), 10, 1, "minHeight" ); element.remove(); - element = $("<div></div>").dialog({ minHeight: 10 }).dialog("option", "minHeight", 30); - testHelper.drag(element, ".ui-resizable-n", 1000, 1000); - assert.close(element.dialog("widget").height(), 30, 1, "minHeight"); + element = $( "<div></div>" ).dialog( { minHeight: 10 } ).dialog( "option", "minHeight", 30 ); + testHelper.drag( element, ".ui-resizable-n", 1000, 1000 ); + assert.close( element.dialog( "widget" ).height(), 30, 1, "minHeight" ); element.remove(); -}); +} ); -test("minWidth", function( assert ) { - expect(3); +test( "minWidth", function( assert ) { + expect( 3 ); - var element = $("<div></div>").dialog({ minWidth: 10 }); - testHelper.drag(element, ".ui-resizable-e", -1000, -1000); - assert.close(element.dialog("widget").width(), 10, 1, "minWidth"); + var element = $( "<div></div>" ).dialog( { minWidth: 10 } ); + testHelper.drag( element, ".ui-resizable-e", -1000, -1000 ); + assert.close( element.dialog( "widget" ).width(), 10, 1, "minWidth" ); element.remove(); - element = $("<div></div>").dialog({ minWidth: 10 }); - testHelper.drag(element, ".ui-resizable-w", 1000, 1000); - assert.close(element.dialog("widget").width(), 10, 1, "minWidth"); + element = $( "<div></div>" ).dialog( { minWidth: 10 } ); + testHelper.drag( element, ".ui-resizable-w", 1000, 1000 ); + assert.close( element.dialog( "widget" ).width(), 10, 1, "minWidth" ); element.remove(); - element = $("<div></div>").dialog({ minWidth: 30 }).dialog("option", "minWidth", 30); - testHelper.drag(element, ".ui-resizable-w", 1000, 1000); - assert.close(element.dialog("widget").width(), 30, 1, "minWidth"); + element = $( "<div></div>" ).dialog( { minWidth: 30 } ).dialog( "option", "minWidth", 30 ); + testHelper.drag( element, ".ui-resizable-w", 1000, 1000 ); + assert.close( element.dialog( "widget" ).width(), 30, 1, "minWidth" ); element.remove(); -}); +} ); test( "position, default center on window", function( assert ) { expect( 2 ); @@ -349,13 +349,13 @@ test( "position, default center on window", function( assert ) { // Support: Firefox var winWidth = $( window ).width(), winHeight = $( window ).height(), - element = $("<div></div>").dialog(), - dialog = element.dialog("widget"), + element = $( "<div></div>" ).dialog(), + dialog = element.dialog( "widget" ), offset = dialog.offset(); assert.close( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" ); assert.close( 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( assert ) { expect( 2 ); @@ -365,51 +365,51 @@ test( "position, right bottom at right bottom via ui.position args", function( a // Support: Firefox var winWidth = $( window ).width(), winHeight = $( window ).height(), - element = $("<div></div>").dialog({ + element = $( "<div></div>" ).dialog( { position: { my: "right bottom", at: "right bottom" } - }), - dialog = element.dialog("widget"), + } ), + dialog = element.dialog( "widget" ), offset = dialog.offset(); assert.close( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" ); assert.close( 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( assert ) { expect( 4 ); - var parent = $("<div></div>").css({ + var parent = $( "<div></div>" ).css( { position: "absolute", top: 400, left: 600, height: 10, width: 10 - }).appendTo("body"), + } ).appendTo( "body" ), - element = $("<div></div>").dialog({ + element = $( "<div></div>" ).dialog( { position: { my: "left top", at: "left top", of: parent, collision: "none" } - }), + } ), - dialog = element.dialog("widget"), + dialog = element.dialog( "widget" ), offset = dialog.offset(); assert.close( offset.left, 600, 1, "dialog left position at another element on initilization" ); assert.close( offset.top, 400, 1, "dialog top position at another element on initilization" ); - element.dialog("option", "position", { + element.dialog( "option", "position", { my: "left top", at: "right bottom", of: parent, collision: "none" - }); + } ); offset = dialog.offset(); @@ -418,32 +418,33 @@ test( "position, at another element", function( assert ) { element.remove(); parent.remove(); -}); +} ); -test("resizable", function() { - expect(4); +test( "resizable", function() { + expect( 4 ); - var element = $("<div></div>").dialog(); - testHelper.shouldResize(element, 50, 50, "[default]"); - element.dialog("option", "resizable", false); - testHelper.shouldResize(element, 0, 0, "disabled after init"); + var element = $( "<div></div>" ).dialog(); + testHelper.shouldResize( element, 50, 50, "[default]" ); + element.dialog( "option", "resizable", false ); + testHelper.shouldResize( element, 0, 0, "disabled after init" ); element.remove(); - element = $("<div></div>").dialog({ resizable: false }); - testHelper.shouldResize(element, 0, 0, "disabled in init options"); - element.dialog("option", "resizable", true); - testHelper.shouldResize(element, 50, 50, "enabled after init"); + element = $( "<div></div>" ).dialog( { resizable: false } ); + testHelper.shouldResize( element, 0, 0, "disabled in init options" ); + element.dialog( "option", "resizable", true ); + testHelper.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(); + 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]" ); @@ -452,17 +453,17 @@ test( "title", function() { element = $( "<div title='foo'>" ).dialog(); equal( titleText(), "foo", "title in element attribute" ); - equal( element.dialog( "option", "title"), "foo", "option updated from attribute" ); + equal( element.dialog( "option", "title" ), "foo", "option updated from attribute" ); element.remove(); - element = $( "<div></div>" ).dialog({ title: "foo" }); + element = $( "<div></div>" ).dialog( { title: "foo" } ); equal( titleText(), "foo", "title in init options" ); - equal( element.dialog("option", "title"), "foo", "opiton set from options hash" ); + equal( element.dialog( "option", "title" ), "foo", "opiton set from options hash" ); element.remove(); - element = $( "<div title='foo'>" ).dialog({ title: "bar" }); + 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" ); + equal( element.dialog( "option", "title" ), "bar", "opiton set from options hash" ); element.remove(); element = $( "<div></div>" ).dialog().dialog( "option", "title", "foo" ); @@ -471,87 +472,88 @@ test( "title", function() { // 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( assert ) { - expect(3); +test( "width", function( assert ) { + expect( 3 ); - var element = $("<div></div>").dialog(); - assert.close(element.dialog("widget").width(), 300, 1, "default width"); + var element = $( "<div></div>" ).dialog(); + assert.close( element.dialog( "widget" ).width(), 300, 1, "default width" ); element.remove(); - element = $("<div></div>").dialog({width: 437 }); - assert.close(element.dialog("widget").width(), 437, 1, "explicit width"); - element.dialog("option", "width", 438); - assert.close(element.dialog("widget").width(), 438, 1, "explicit width after init"); + element = $( "<div></div>" ).dialog( { width: 437 } ); + assert.close( element.dialog( "widget" ).width(), 437, 1, "explicit width" ); + element.dialog( "option", "width", 438 ); + assert.close( element.dialog( "widget" ).width(), 438, 1, "explicit width after init" ); element.remove(); -}); +} ); -test("#4826: setting resizable false toggles resizable on dialog", function() { - expect(6); +test( "#4826: setting resizable false toggles resizable on dialog", function() { + expect( 6 ); var i, - element = $("<div></div>").dialog({ resizable: false }); + element = $( "<div></div>" ).dialog( { resizable: false } ); - testHelper.shouldResize(element, 0, 0, "[default]"); - for (i=0; i<2; i++) { - element.dialog("close").dialog("open"); - testHelper.shouldResize(element, 0, 0, "initialized with resizable false toggle ("+ (i+1) +")"); + testHelper.shouldResize( element, 0, 0, "[default]" ); + for ( i = 0; i < 2; i++ ) { + element.dialog( "close" ).dialog( "open" ); + testHelper.shouldResize( element, 0, 0, "initialized with resizable false toggle (" + ( i + 1 ) + ")" ); } element.remove(); - element = $("<div></div>").dialog({ resizable: true }); - testHelper.shouldResize(element, 50, 50, "[default]"); - for (i=0; i<2; i++) { - element.dialog("close").dialog("option", "resizable", false).dialog("open"); - testHelper.shouldResize(element, 0, 0, "set option resizable false toggle ("+ (i+1) +")"); + element = $( "<div></div>" ).dialog( { resizable: true } ); + testHelper.shouldResize( element, 50, 50, "[default]" ); + for ( i = 0; i < 2; i++ ) { + element.dialog( "close" ).dialog( "option", "resizable", false ).dialog( "open" ); + testHelper.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({ + 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({ + var element = $( "<div></div>" ).dialog( { show: "blind", focus: function() { equal( element.dialog( "widget" ).find( document.activeElement ).length, 1, "dialog maintains focus" ); element.remove(); start(); } - }); -}); + } ); +} ); asyncTest( "Open followed by close during show effect", function() { expect( 1 ); - var element = $( "<div></div>" ).dialog({ + var element = $( "<div></div>" ).dialog( { show: "blind", close: function() { ok( true, "dialog closed properly during animation" ); element.remove(); start(); } - }); + } ); setTimeout( function() { - element.dialog("close"); + element.dialog( "close" ); }, 100 ); -}); +} ); } ); diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js index abff0e535..4380c6f8f 100644 --- a/ui/widgets/dialog.js +++ b/ui/widgets/dialog.js @@ -68,6 +68,7 @@ $.widget( "ui.dialog", { at: "center", of: window, collision: "fit", + // Ensure the titlebar is always visible using: function( pos ) { var topOffset = $( this ).css( pos ).offset().top; @@ -176,6 +177,7 @@ $.widget( "ui.dialog", { this.element .removeUniqueId() .css( this.originalCss ) + // Without detaching first, the following becomes really slow .detach(); @@ -186,6 +188,7 @@ $.widget( "ui.dialog", { } next = originalPosition.parent.children().eq( originalPosition.index ); + // Don't try to place the dialog next to itself (#8613) if ( next.length && next[ 0 ] !== this.element[ 0 ] ) { next.before( this.element ); @@ -290,6 +293,7 @@ $.widget( "ui.dialog", { }, _focusTabbable: function() { + // Set focus to the first match: // 1. An element that was focused previously // 2. First element inside the dialog matching [autofocus] @@ -327,6 +331,7 @@ $.widget( "ui.dialog", { } event.preventDefault(); checkFocus.call( this ); + // support: IE // IE <= 8 doesn't prevent moving focus even with event.preventDefault() // so we check again later @@ -337,6 +342,7 @@ $.widget( "ui.dialog", { this.uiDialog = $( "<div>" ) .hide() .attr( { + // Setting tabIndex makes the div focusable tabIndex: -1, role: "dialog" @@ -398,10 +404,12 @@ $.widget( "ui.dialog", { "ui-dialog-titlebar", "ui-widget-header ui-helper-clearfix" ); this._on( this.uiDialogTitlebar, { mousedown: function( event ) { + // Don't prevent click on close button (#8838) // Focusing a dialog that is partially scrolled out of view // causes the browser to scroll it into view, preventing the click event if ( !$( event.target ).closest( ".ui-dialog-titlebar-close" ) ) { + // Dialog isn't getting focus when dragging (#8063) this.uiDialog.trigger( "focus" ); } @@ -478,8 +486,10 @@ $.widget( "ui.dialog", { props = $.isFunction( props ) ? { click: props, text: name } : props; + // Default to a non-submitting button props = $.extend( { type: "button" }, props ); + // Change the context for the click callback to be the main element click = props.click; buttonOptions = { @@ -545,6 +555,7 @@ $.widget( "ui.dialog", { var that = this, options = this.options, handles = options.resizable, + // .ui-resizable has position: relative defined in the stylesheet // but dialogs have to use absolute or fixed positioning position = this.uiDialog.css( "position" ), @@ -639,6 +650,7 @@ $.widget( "ui.dialog", { }, _position: function() { + // Need to show the dialog to get the actual offset in the position plugin var isVisible = this.uiDialog.is( ":visible" ); if ( !isVisible ) { @@ -695,6 +707,7 @@ $.widget( "ui.dialog", { if ( key === "closeText" ) { this.uiDialogTitlebarClose.button( { + // Ensure that we always pass a string label: "" + value } ); @@ -716,6 +729,7 @@ $.widget( "ui.dialog", { } if ( key === "resizable" ) { + // currently resizable, becoming non-resizable isResizable = uiDialog.is( ":data(ui-resizable)" ); if ( isResizable && !value ) { @@ -739,6 +753,7 @@ $.widget( "ui.dialog", { }, _size: function() { + // If the user has resized the dialog, the .ui-dialog and .ui-dialog-content // divs will both have width and height set, so we need to reset them var nonContentHeight, minContentHeight, maxContentHeight, |