From 9196c2022c428d5aa2b75e2558f981458356e9da Mon Sep 17 00:00:00 2001 From: Richard Worth Date: Sat, 21 Jun 2008 13:54:41 +0000 Subject: [PATCH] tests dialog - added some tests and placeholders --- tests/dialog.js | 245 ++++++++++++++++++++++++++++++++------------- tests/draggable.js | 2 +- 2 files changed, 177 insertions(+), 70 deletions(-) diff --git a/tests/dialog.js b/tests/dialog.js index 7520fe8b7..7cd6921a8 100644 --- a/tests/dialog.js +++ b/tests/dialog.js @@ -6,6 +6,26 @@ // Dialog Test Helper Functions // +var defaults = { + autoOpen: true, + buttons: {}, + disabled: false, + dialogClass: null, + draggable: true, + height: 200, + maxHeight: null, + maxWidth: null, + minHeight: 100, + minWidth: 150, + modal: false, + overlay: {}, + position: 'center', + resizable: true, + stack: true, + title: null, + width: 300 +}; + var el, offsetBefore, offsetAfter, heightBefore, heightAfter, @@ -29,6 +49,9 @@ var drag = function(handle, dx, dy) { offsetBefore = d.offset(); heightBefore = d.height(); widthBefore = d.width(); + //this mouseover is to work around a limitation in resizable + //TODO: fix resizable so handle doesn't require mouseover in order to be used + $(handle, d).simulate("mouseover"); $(handle, d).simulate("drag", { dx: dx || 0, dy: dy || 0 @@ -39,10 +62,10 @@ var drag = function(handle, dx, dy) { widthAfter = d.width(); } -var moved = function (dx, dy, msg) { +var moved = function(dx, dy, msg) { msg = msg ? msg + "." : ""; var actual = { left: offsetAfter.left, top: offsetAfter.top }; - var expected = { left: offsetBefore.left + dx, top: offsetAfter.top }; + var expected = { left: offsetBefore.left + dx, top: offsetBefore.top + dy }; compare2(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg); } @@ -58,6 +81,25 @@ function shouldnotmove(why) { moved(0, 0, why); } +var resized = function(dw, dh, msg) { + msg = msg ? msg + "." : ""; + var actual = { width: widthAfter, height: heightAfter }; + var expected = { width: widthBefore + dw, height: heightBefore + dh }; + compare2(actual, expected, 'resized[' + dragged.dx + ', ' + dragged.dy + '] ' + msg); +} + +function shouldresize(why) { + var handle = $(".ui-resizable-se", dlg()); + drag(handle, 50, 50); + resized(50, 50, why); +} + +function shouldnotresize(why) { + var handle = $(".ui-resizable-se", dlg()); + drag(handle, 50, 50); + resized(0, 0, why); +} + var border = function(el, side) { return parseInt(el.css('border-' + side + '-width')); } var margin = function(el, side) { return parseInt(el.css('margin-' + side)); } @@ -74,18 +116,18 @@ test("init", function() { $([]).dialog().remove(); ok(true, '.dialog() called on empty collection'); - $("
").dialog().remove(); + $('
').dialog().remove(); ok(true, '.dialog() called on disconnected DOMElement'); - $("
").dialog().dialog("foo").remove(); + $('
').dialog().dialog("foo").remove(); ok(true, 'arbitrary method called after init'); - el = $("
").dialog() + el = $('
').dialog() var foo = el.data("foo.dialog"); el.remove(); ok(true, 'arbitrary option getter after init'); - $("
").dialog().data("foo.dialog", "bar").remove(); + $('
').dialog().data("foo.dialog", "bar").remove(); ok(true, 'arbitrary option setter after init'); }); @@ -98,18 +140,18 @@ test("destroy", function() { $([]).dialog().dialog("destroy").remove(); ok(true, '.dialog("destroy") called on empty collection'); - $("
").dialog().dialog("destroy").remove(); + $('
').dialog().dialog("destroy").remove(); ok(true, '.dialog("destroy") called on disconnected DOMElement'); - $("
").dialog().dialog("destroy").dialog("foo").remove(); + $('
').dialog().dialog("destroy").dialog("foo").remove(); ok(true, 'arbitrary method called after destroy'); - el = $("
").dialog(); + el = $('
').dialog(); var foo = el.dialog("destroy").data("foo.dialog"); el.remove(); ok(true, 'arbitrary option getter after destroy'); - $("
").dialog().dialog("destroy").data("foo.dialog", "bar").remove(); + $('
').dialog().dialog("destroy").data("foo.dialog", "bar").remove(); ok(true, 'arbitrary option setter after destroy'); }); @@ -137,24 +179,6 @@ test("element types", function() { test("defaults", function() { el = $('
').dialog(); - var defaults = { - autoOpen: true, - buttons: {}, - disabled: false, - draggable: true, - height: 200, - maxHeight: null, - maxWidth: null, - minHeight: 100, - minWidth: 150, - modal: false, - overlay: {}, - position: 'center', - resizable: true, - stack: true, - title: null, - width: 300 - }; $.each(defaults, function(key, val) { var actual = el.data(key + ".dialog"), expected = val, method = (expected && expected.constructor == Object) ? @@ -168,18 +192,16 @@ module("dialog: Options"); test("autoOpen", function() { expect(2); - - el = $("
").dialog({ autoOpen: false }); - isNotOpen('.dialog({ autoOpen: false })'); + el = $('
').dialog({ autoOpen: false }); + isNotOpen('.dialog({ autoOpen: false })'); el.remove(); - - el = $("
").dialog({ autoOpen: true }); - isOpen('.dialog({ autoOpen: true })'); + el = $('
').dialog({ autoOpen: true }); + isOpen('.dialog({ autoOpen: true })'); el.remove(); }); test("buttons", function() { - expect(10); + expect(14); var buttons = { "Ok": function(ev, ui) { ok(true, "button click fires callback"); @@ -192,7 +214,7 @@ test("buttons", function() { equals(ev.target, btn[1], "event target"); } } - el = $("
").dialog({ buttons: buttons }); + el = $('
').dialog({ buttons: buttons }); var btn = $("button", dlg()); equals(btn.length, 2, "number of buttons"); var i = 0; @@ -202,68 +224,153 @@ test("buttons", function() { }); equals(btn.parent().attr('className'), 'ui-dialog-buttonpane', "buttons in container"); btn.trigger("click"); + + var newButtons = { + "Close": function() {} + } + + equals(el.data("buttons.dialog"), buttons, '.data("buttons.dialog") getter'); + el.data("buttons.dialog", newButtons); + equals(el.data("buttons.dialog"), newButtons, '.data("buttons.dialog", ...) setter'); + + btn = $("button", dlg()); + equals(btn.length, 1, "number of buttons after setter"); + var i = 0; + $.each(newButtons, function(key, val) { + equals(btn.eq(i).text(), key, "text of button " + (i+1)); + i += 1; + }); + + el.remove(); +}); + +test("dialogClass", function() { + expect(4); + el = $('
').dialog(); + equals(dlg().is(".foo"), false, 'dialogClass not specified. foo class added'); + el.remove(); + el = $('
').dialog({ dialogClass: "foo" }); + equals(dlg().is(".foo"), true, 'dialogClass in init. foo class added'); + el.remove(); + el = $('
').dialog({ dialogClass: "foo bar" }); + equals(dlg().is(".foo"), true, 'dialogClass in init, two classes. foo class added'); + equals(dlg().is(".bar"), true, 'dialogClass in init, two classes. bar class added'); el.remove(); }); test("draggable", function() { - el = $("
").dialog({ draggable: false }); - shouldnotmove(); + expect(2); + el = $('
').dialog({ draggable: false }); + shouldnotmove(); el.remove(); - el = $("
").dialog({ draggable: true }); - shouldmove(); + el = $('
').dialog({ draggable: true }); + shouldmove(); el.remove(); }); test("height", function() { - el = $("
").dialog(); - equals(dlg().height(), 200, "default height"); + expect(2); + el = $('
').dialog(); + equals(dlg().height(), defaults.height, "default height"); el.remove(); - el = $("
").dialog({ height: 437 }); - equals(dlg().height(), 437, "default height"); + el = $('
').dialog({ height: 437 }); + equals(dlg().height(), 437, "explicit height"); el.remove(); }); test("maxHeight", function() { - el = $("
").dialog({ maxHeight: 400 }); - drag('.ui-resizable-s', 1000, 1000); - equals(heightAfter, 400, "maxHeight"); + expect(2); + el = $('
').dialog({ maxHeight: 400 }); + drag('.ui-resizable-s', 1000, 1000); + equals(heightAfter, 400, "maxHeight"); el.remove(); - el = $("
").dialog({ maxHeight: 400 }); - drag('.ui-resizable-n', -1000, -1000); - equals(heightAfter, 400, "maxHeight"); + el = $('
').dialog({ maxHeight: 400 }); + drag('.ui-resizable-n', -1000, -1000); + equals(heightAfter, 400, "maxHeight"); el.remove(); }); test("maxWidth", function() { - el = $("
").dialog({ maxWidth: 400 }); - drag('.ui-resizable-e', 1000, 1000); - equals(widthAfter, 400, "maxWidth"); + expect(2); + el = $('
').dialog({ maxWidth: 400 }); + drag('.ui-resizable-e', 1000, 1000); + equals(widthAfter, 400, "maxWidth"); el.remove(); - el = $("
").dialog({ maxWidth: 400 }); - drag('.ui-resizable-w', -1000, -1000); - equals(widthAfter, 400, "maxWidth"); + el = $('
').dialog({ maxWidth: 400 }); + drag('.ui-resizable-w', -1000, -1000); + equals(widthAfter, 400, "maxWidth"); el.remove(); }); test("minHeight", function() { - el = $("
").dialog({ minHeight: 10 }); - drag('.ui-resizable-s', -1000, -1000); - equals(heightAfter, 10, "minHeight"); + expect(2); + el = $('
').dialog({ minHeight: 10 }); + drag('.ui-resizable-s', -1000, -1000); + equals(heightAfter, 10, "minHeight"); el.remove(); - el = $("
").dialog({ minHeight: 10 }); - drag('.ui-resizable-n', 1000, 1000); - equals(heightAfter, 10, "minHeight"); + el = $('
').dialog({ minHeight: 10 }); + drag('.ui-resizable-n', 1000, 1000); + equals(heightAfter, 10, "minHeight"); el.remove(); }); test("minWidth", function() { - el = $("
").dialog({ minWidth: 10 }); - drag('.ui-resizable-e', -1000, -1000); - equals(widthAfter, 10, "minWidth"); + expect(2); + el = $('
').dialog({ minWidth: 10 }); + drag('.ui-resizable-e', -1000, -1000); + equals(widthAfter, 10, "minWidth"); el.remove(); - el = $("
").dialog({ minWidth: 10 }); - drag('.ui-resizable-w', 1000, 1000); - equals(widthAfter, 10, "minWidth"); + el = $('
').dialog({ minWidth: 10 }); + drag('.ui-resizable-w', 1000, 1000); + equals(widthAfter, 10, "minWidth"); + el.remove(); +}); + +test("modal", function() { + ok(false, "missing test"); +}); + +test("overlay", function() { + ok(false, "missing test"); +}); + +test("position", function() { + ok(false, "missing test"); +}); + +test("resizable", function() { + expect(2); + el = $('
').dialog(); + shouldresize("[default]"); + el.remove(); + el = $('
').dialog({ resizable: false }); + shouldnotresize("disabled in init options"); + el.remove(); + +}); + +test("stack", function() { + ok(false, "missing test"); +}); + +test("title", function() { + expect(4); + function titleText() { + return dlg().find(".ui-dialog-title").text(); + } + el = $('
').dialog(); equals(titleText(), "", "[default]"); el.remove(); + el = $('
').dialog(); equals(titleText(), "foo", "title in element attribute"); el.remove(); + el = $('
').dialog({ title: 'foo' }); equals(titleText(), "foo", "title in init options"); el.remove(); + el = $('
').dialog({ title: 'bar' }); equals(titleText(), "bar", "title in init options should override title in element attribute"); el.remove(); +}); + +test("width", function() { + expect(2); + el = $('
').dialog(); + equals(dlg().width(), defaults.width, "default width"); + el.remove(); + el = $('
').dialog({width: 437 }); + equals(dlg().width(), 437, "explicit width"); el.remove(); }); @@ -297,7 +404,7 @@ test("open", function() { test("close", function() { expect(2); - el = $("
").dialog({ + el = $('
').dialog({ close: function(ev, ui) { ok(true, '.dialog("close") fires close callback'); equals(this, el[0], "context of callback"); diff --git a/tests/draggable.js b/tests/draggable.js index 064ec074c..fe22cdcfb 100644 --- a/tests/draggable.js +++ b/tests/draggable.js @@ -21,7 +21,7 @@ var drag = function(handle, dx, dy) { var moved = function (dx, dy, msg) { msg = msg ? msg + "." : ""; var actual = { left: offsetAfter.left, top: offsetAfter.top }; - var expected = { left: offsetBefore.left + dx, top: offsetAfter.top }; + var expected = { left: offsetBefore.left + dx, top: offsetBefore.top + dy }; compare2(actual, expected, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ' + msg); }