diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-01-07 03:19:50 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-01-07 03:19:50 +0000 |
| commit | 90fb45dffafc2e891b1ebca948ad33e6b94de112 (patch) | |
| tree | 6bd09ea116ef2cdd86ec0fa70bf740617f67d441 /tests/unit | |
| parent | 975b02a82cdff29fd8469bfe4324472c2ae3f954 (diff) | |
| download | jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.tar.gz jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.zip | |
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).
Diffstat (limited to 'tests/unit')
| -rw-r--r-- | tests/unit/accordion/accordion_core.js | 2 | ||||
| -rw-r--r-- | tests/unit/accordion/accordion_options.js | 13 | ||||
| -rw-r--r-- | tests/unit/button/button.html | 56 | ||||
| -rw-r--r-- | tests/unit/button/button_core.js | 70 | ||||
| -rw-r--r-- | tests/unit/button/button_defaults.js | 15 | ||||
| -rw-r--r-- | tests/unit/button/button_events.js | 17 | ||||
| -rw-r--r-- | tests/unit/button/button_methods.js | 15 | ||||
| -rw-r--r-- | tests/unit/button/button_options.js | 69 | ||||
| -rw-r--r-- | tests/unit/button/button_tickets.js | 10 | ||||
| -rw-r--r-- | tests/unit/core/core.js | 36 | ||||
| -rw-r--r-- | tests/unit/datepicker/datepicker_core.js | 5 | ||||
| -rw-r--r-- | tests/unit/dialog/dialog_core.js | 5 | ||||
| -rw-r--r-- | tests/unit/position/position_core.js | 666 | ||||
| -rw-r--r-- | tests/unit/testsuite.js | 64 | ||||
| -rw-r--r-- | tests/unit/widget/widget.html | 24 | ||||
| -rw-r--r-- | tests/unit/widget/widget.js | 168 |
16 files changed, 801 insertions, 434 deletions
diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 797ead864..47d2509e6 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -5,7 +5,7 @@ (function($) { -jQuery.ui.accordion.defaults.animated = false; +$.ui.accordion.prototype.options.animated = false; function state(accordion) { var args = $.makeArray(arguments).slice(1); diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index b77cb787e..ddb2c38cb 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -127,19 +127,20 @@ test("{ header: '> li > :first-child,> :not(li):even' }, default", function() { }); test("{ icons: false }", function() { + var list = $("#list1"); function icons(on) { - same($("#list1 span.ui-icon").length, on ? 3 : 0); - same( $("#list1").hasClass("ui-accordion-icons"), on ); + same($("span.ui-icon", list).length, on ? 3 : 0); + same( list.hasClass("ui-accordion-icons"), on ); } - $("#list1").accordion(); + list.accordion(); icons(true); - $("#list1").accordion("destroy").accordion({ + list.accordion("destroy").accordion({ icons: false }); icons(false); - $("#list1").accordion("option", "icons", $.ui.accordion.defaults.icons); + list.accordion("option", "icons", $.ui.accordion.prototype.options.icons); icons(true); - $("#list1").accordion("option", "icons", false); + list.accordion("option", "icons", false); icons(false); }); diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html new file mode 100644 index 000000000..5017c9bc6 --- /dev/null +++ b/tests/unit/button/button.html @@ -0,0 +1,56 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Button Test Suite</title>
+
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
+
+ <link type="text/css" href="../testsuite.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../../external/testrunner-r6588.js"></script>
+ <script type="text/javascript" src="../../jquery.simulate.js"></script>
+ <script type="text/javascript" src="../testsuite.js"></script>
+
+ <script type="text/javascript" src="button_core.js"></script>
+ <script type="text/javascript" src="button_defaults.js"></script>
+ <script type="text/javascript" src="button_events.js"></script>
+ <script type="text/javascript" src="button_methods.js"></script>
+ <script type="text/javascript" src="button_options.js"></script>
+ <script type="text/javascript" src="button_tickets.js"></script>
+
+</head>
+<body>
+
+<div id="main">
+
+ <div><button id="button" class="foo">Label</button></div>
+
+ <div id="radio0" style="margin-top: 2em;">
+ <input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label>
+ <input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label>
+ <input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label>
+ </div>
+ <form>
+ <div id="radio1" style="margin-top: 2em;">
+ <input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label>
+ <input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label>
+ <input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label>
+ </div>
+ </form>
+ <form>
+ <div id="radio2" style="margin-top: 2em;">
+ <input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label>
+ <input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label>
+ <input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label>
+ </div>
+ </form>
+
+ <input type="checkbox" id="check" /><label for="check">Toggle</label>
+
+ <div><input id="submit" type="submit" value="Label" /></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit/button/button_core.js b/tests/unit/button/button_core.js new file mode 100644 index 000000000..12016627f --- /dev/null +++ b/tests/unit/button/button_core.js @@ -0,0 +1,70 @@ +/*
+ * button_core.js
+ */
+
+
+(function($) {
+
+module("button: core");
+
+test("checkbox", function() {
+ var input = $("#check");
+ label = $("label[for=check]");
+ ok( input.is(":visble") );
+ ok( label.is(":not(.ui-button)") );
+ input.button();
+ ok( input.is(":hidden") );
+ ok( label.is(".ui-button") );
+});
+
+test("radios", function() {
+ var inputs = $("#radio0 input");
+ labels = $("#radio0 label");
+ ok( inputs.is(":visble") );
+ ok( labels.is(":not(.ui-button)") );
+ inputs.button();
+ ok( inputs.is(":hidden") );
+ ok( labels.is(".ui-button") );
+});
+
+function assert(noForm, form1, form2) {
+ ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
+ ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
+ ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
+}
+
+test("radio groups", function() {
+ $(":radio").button();
+ assert(":eq(0)", ":eq(1)", ":eq(2)");
+
+ // click outside of forms
+ $("#radio0 .ui-button:eq(1)").click();
+ assert(":eq(1)", ":eq(1)", ":eq(2)");
+
+ // click in first form
+ $("#radio1 .ui-button:eq(0)").click();
+ assert(":eq(1)", ":eq(0)", ":eq(2)");
+
+ // click in second form
+ $("#radio2 .ui-button:eq(0)").click();
+ assert(":eq(1)", ":eq(0)", ":eq(0)");
+});
+
+test("input type submit, don't create child elements", function() {
+ var input = $("#submit")
+ same( input.children().length, 0 );
+ input.button();
+ same( input.children().length, 0 );
+});
+
+test("buttonset", function() {
+ var set = $("#radio1").buttonset();
+ ok( set.is(".ui-button-set") );
+ same( set.children(".ui-button").length, 3 );
+ same( set.children("input:radio:hidden").length, 3 );
+ ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
+ ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
+ ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
+});
+
+})(jQuery);
diff --git a/tests/unit/button/button_defaults.js b/tests/unit/button/button_defaults.js new file mode 100644 index 000000000..f0152e3c2 --- /dev/null +++ b/tests/unit/button/button_defaults.js @@ -0,0 +1,15 @@ +/*
+ * button_defaults.js
+ */
+
+var button_defaults = {
+ disabled: false,
+ text: true,
+ label: null,
+ icons: {
+ primary: null,
+ secondary: null
+ }
+};
+
+commonWidgetTests('button', { defaults: button_defaults });
diff --git a/tests/unit/button/button_events.js b/tests/unit/button/button_events.js new file mode 100644 index 000000000..17f505458 --- /dev/null +++ b/tests/unit/button/button_events.js @@ -0,0 +1,17 @@ +/*
+ * button_events.js
+ */
+(function($) {
+
+module("button: events");
+
+test("click-through", function() {
+ expect(2);
+ var set = $("#radio1").buttonset();
+ set.find("input:first").click(function() {
+ ok( true );
+ });
+ ok( set.find("label:first").click().is(".ui-button") );
+});
+
+})(jQuery);
diff --git a/tests/unit/button/button_methods.js b/tests/unit/button/button_methods.js new file mode 100644 index 000000000..a162a8930 --- /dev/null +++ b/tests/unit/button/button_methods.js @@ -0,0 +1,15 @@ +/*
+ * button_methods.js
+ */
+(function($) {
+
+
+module("button: methods");
+
+test("destroy", function() {
+ var beforeHtml = $("#button").parent().html();
+ var afterHtml = $("#button").button().button("destroy").parent().html();
+ same( beforeHtml, afterHtml );
+});
+
+})(jQuery);
diff --git a/tests/unit/button/button_options.js b/tests/unit/button/button_options.js new file mode 100644 index 000000000..f44679a34 --- /dev/null +++ b/tests/unit/button/button_options.js @@ -0,0 +1,69 @@ +/*
+ * button_options.js
+ */
+(function($) {
+
+module("button: options");
+
+test("text false without icon", function() {
+ $("#button").button({
+ text: false
+ });
+ ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") );
+
+ $("#button").button("destroy");
+});
+
+test("text false with icon", function() {
+ $("#button").button({
+ text: false,
+ icons: {
+ primary: "iconclass"
+ }
+ });
+ ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") );
+
+ $("#button").button("destroy");
+});
+
+test("label, default", function() {
+ $("#button").button();
+ same( $("#button").text(), "Label" );
+
+ $("#button").button("destroy");
+});
+
+test("label", function() {
+ $("#button").button({
+ label: "xxx"
+ });
+ same( $("#button").text(), "xxx" );
+
+ $("#button").button("destroy");
+});
+
+test("label default with input type submit", function() {
+ same( $("#submit").button().val(), "Label" );
+});
+
+test("label with input type submit", function() {
+ var label = $("#submit").button({
+ label: "xxx"
+ }).val();
+ same( label, "xxx" );
+});
+
+test("icons", function() {
+ $("#button").button({
+ text: false,
+ icons: {
+ primary: "iconclass",
+ secondary: "iconclass2"
+ }
+ });
+ ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") );
+
+ $("#button").button("destroy");
+});
+
+})(jQuery);
diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js new file mode 100644 index 000000000..d3b981e21 --- /dev/null +++ b/tests/unit/button/button_tickets.js @@ -0,0 +1,10 @@ +/*
+ * button_tickets.js
+ */
+(function($) {
+
+module("button: tickets");
+
+
+
+})(jQuery);
diff --git a/tests/unit/core/core.js b/tests/unit/core/core.js index a35935c52..23292671a 100644 --- a/tests/unit/core/core.js +++ b/tests/unit/core/core.js @@ -57,40 +57,4 @@ test('zIndex', function() { equals($('#zIndexAutoNoParent').zIndex(), 0, 'zIndex never explicitly set in hierarchy'); }); -test('widget factory, merge multiple option arguments', function() { - expect(1); - $.widget("ui.widgetTest", { - _init: function() { - same(this.options, { - disabled: false, - option1: "value1", - option2: "value2", - option3: "value3", - option4: { - option4a: "valuea", - option4b: "valueb" - } - }); - } - }); - $("#main > :first").widgetTest({ - option1: "valuex", - option2: "valuex", - option3: "value3", - option4: { - option4a: "valuex" - } - }, { - option1: "value1", - option2: "value2", - option4: { - option4b: "valueb" - } - }, { - option4: { - option4a: "valuea" - } - }); -}); - })(jQuery); diff --git a/tests/unit/datepicker/datepicker_core.js b/tests/unit/datepicker/datepicker_core.js index f34c9fa06..9867022f7 100644 --- a/tests/unit/datepicker/datepicker_core.js +++ b/tests/unit/datepicker/datepicker_core.js @@ -47,6 +47,11 @@ module("datepicker: core", { } }); +test("widget method", function() { + var actual = $("#inp").datepicker().datepicker("widget")[0]; + same($("body > #ui-datepicker-div:last-child")[0], actual); +}); + test('baseStructure', function() { var inp = init('#inp'); inp.focus(); diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js index 3924c1d7f..cf76045b4 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -147,4 +147,9 @@ test("ARIA", function() { el.remove(); }); +test("widget method", function() { + var dialog = $("<div/>").appendTo("#main").dialog(); + same(dialog.parent()[0], dialog.dialog("widget")[0]); +}); + })(jQuery); diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index f05a2e804..705a7ec34 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,333 +1,333 @@ -/*
- * position_core.js
- */
-(function($) {
-
-test('my, at, of', function() {
- $('#elx').position({
- my: 'left top',
- at: 'left top',
- of: '#parentx',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 40, left: 40 }, 'left top, left top');
-
- $('#elx').position({
- my: 'left top',
- at: 'left bottom',
- of: '#parentx',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 60, left: 40 }, 'left top, left bottom');
-
- $('#elx').position({
- my: 'left',
- at: 'bottom',
- of: '#parentx',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 55, left: 50 }, 'left, bottom');
-
- $('#elx').position({
- my: 'left foo',
- at: 'bar baz',
- of: '#parentx',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 45, left: 50 }, 'left foo, bar baz');
-});
-
-test('multiple elements', function() {
- var elements = $('#el1, #el2');
- var result = elements.position({
- my: 'left top',
- at: 'left bottom',
- of: '#parent',
- collision: 'none'
- });
-
- same(result, elements);
- var expected = {top: 10, left: 4};
- elements.each(function() {
- same($(this).offset(), expected);
- });
-});
-
-test('positions', function() {
- var definitions = [];
- var offsets = {
- left: 0,
- center: 3,
- right: 6,
- top: 0,
- center: 3,
- bottom: 6
- };
- var start = { left: 4, top: 4 };
- $.each([0, 1], function(my) {
- $.each(["top", "center", "bottom"], function(vindex, vertical) {
- $.each(["left", "center", "right"], function(hindex, horizontal) {
- definitions.push({
- my: my ? horizontal + " " + vertical : 'left top',
- at: !my ? horizontal + " " + vertical : 'left top',
- result: {
- top: my ? start.top - offsets[vertical] : start.top + offsets[vertical],
- left: my ? start.left - offsets[horizontal] : start.left + offsets[horizontal]
- }
- });
- });
- });
- });
- var el = $("#el1");
- $.each(definitions, function(index, definition) {
- el.position({
- my: definition.my,
- at: definition.at,
- of: '#parent',
- collision: 'none'
- });
- same(el.offset(), definition.result, "Position via " + jsDump.parse({my:definition.my, at:definition.at}));
- });
-});
-
-test('of', function() {
- $('#elx').position({
- my: 'left top',
- at: 'left top',
- of: '#parentx',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 40, left: 40 }, 'selector');
-
- $('#elx').position({
- my: 'left top',
- at: 'left bottom',
- of: $('#parentx'),
- collision: 'none'
- });
- same($('#elx').offset(), { top: 60, left: 40 }, 'jQuery object');
-
- $('#elx').position({
- my: 'left top',
- at: 'left top',
- of: $('#parentx')[0],
- collision: 'none'
- });
- same($('#elx').offset(), { top: 40, left: 40 }, 'DOM element');
-
- $('#elx').position({
- my: 'right bottom',
- at: 'right bottom',
- of: document,
- collision: 'none'
- });
- same($('#elx').offset(), {
- top: $(document).height() - 10,
- left: $(document).width() - 10
- }, 'document');
-
- $('#elx').position({
- my: 'right bottom',
- at: 'right bottom',
- of: window,
- collision: 'none'
- });
- same($('#elx').offset(), {
- top: $(window).height() - 10,
- left: $(window).width() - 10
- }, 'window');
-
- $(window).scrollTop(500).scrollLeft(200);
- $('#elx').position({
- my: 'right bottom',
- at: 'right bottom',
- of: window,
- collision: 'none'
- });
- same($('#elx').offset(), {
- top: $(window).height() + 500 - 10,
- left: $(window).width() + 200 - 10
- }, 'window, scrolled');
- $(window).scrollTop(0).scrollLeft(0);
-
- var event = $.extend($.Event('someEvent'), { pageX: 200, pageY: 300 });
- $('#elx').position({
- my: 'left top',
- at: 'left top',
- of: event,
- collision: 'none'
- });
- same($('#elx').offset(), {
- top: 300,
- left: 200
- }, 'event - left top, left top');
-
- event = $.extend($.Event('someEvent'), { pageX: 400, pageY: 600 });
- $('#elx').position({
- my: 'left top',
- at: 'right bottom',
- of: event,
- collision: 'none'
- });
- same($('#elx').offset(), {
- top: 600,
- left: 400
- }, 'event - left top, right bottom');
-});
-
-test('offset', function() {
- $('#elx').position({
- my: 'left top',
- at: 'left bottom',
- of: '#parentx',
- offset: '10',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 70, left: 50 }, 'single value');
-
- $('#elx').position({
- my: 'left top',
- at: 'left bottom',
- of: '#parentx',
- offset: '5 -3',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 57, left: 45 }, 'two values');
-
- $('#elx').position({
- my: 'left top',
- at: 'left bottom',
- of: '#parentx',
- offset: '5px -3px',
- collision: 'none'
- });
- same($('#elx').offset(), { top: 57, left: 45 }, 'with units');
-});
-
-test('by', function() {
- expect(6);
-
- var count = 0,
- elems = $('#el1, #el2'),
- expectedPosition = { top: 40, left: 40 },
- originalPosition = elems.position({
- my: 'right bottom',
- at: 'rigt bottom',
- of: '#parentx',
- collision: 'none'
- }).offset();
-
- elems.position({
- my: 'left top',
- at: 'left top',
- of: '#parentx',
- by: function(position) {
- same(this, elems[count], 'correct context for call #' + count);
- same(position, expectedPosition, 'correct position for call #' + count);
- count++;
- }
- });
-
- elems.each(function() {
- same($(this).offset(), originalPosition, 'elements not moved');
- });
-});
-
-function collisionTest(config, result, msg) {
- var elem = $("#elx").position($.extend({
- my: "left top",
- at: "right bottom",
- of: window
- }, config));
- same(elem.offset(), result, msg);
-}
-
-function collisionTest2(config, result, msg) {
- collisionTest($.extend({
- my: "right bottom",
- at: "left top"
- }, config), result, msg);
-}
-
-test("collision: fit, no offset", function() {
- collisionTest({
- collision: "fit"
- }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom");
-
- collisionTest2({
- collision: "fit"
- }, { top: 0, left: 0 }, "left top");
-});
-
-test("collision: fit, with offset", function() {
- collisionTest({
- collision: "fit",
- offset: "2 3"
- }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom");
-
- collisionTest2({
- collision: "fit",
- offset: "2 3"
- }, { top: 0, left: 0 }, "left top, positive offset");
-
- collisionTest2({
- collision: "fit",
- offset: "-2 -3"
- }, { top: 0, left: 0 }, "left top, negative offset");
-});
-
-test("collision: flip, no offset", function() {
- collisionTest({
- collision: "flip"
- }, { top: -10, left: -10 }, "left top");
-
- collisionTest2({
- collision: "flip"
- }, { top: $(window).height(), left: $(window).width() }, "right bottom");
-});
-
-test("collision: flip, with offset", function() {
- collisionTest({
- collision: "flip",
- offset: "2 3"
- }, { top: -13, left: -12 }, "left top, with offset added");
-
- collisionTest2({
- collision: "flip",
- offset: "2 3"
- }, { top: $(window).height() - 3, left: $(window).width() - 2 }, "bottom, positive offset");
-
- collisionTest2({
- collision: "flip",
- offset: "-2 -3"
- }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, negative offset");
-});
-
-test("collision: none, no offset", function() {
- collisionTest({
- collision: "none"
- }, { top: $(window).height(), left: $(window).width() }, "left top");
-
- collisionTest2({
- collision: "none"
- }, { top: -10, left: -10 }, "moved to the right bottom");
-});
-
-test("collision: none, with offset", function() {
- collisionTest({
- collision: "none",
- offset: "2 3"
- }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, with offset added");
-
- collisionTest2({
- collision: "none",
- offset: "2 3"
- }, { top: -7, left: -8 }, "left top, positive offset");
-
- collisionTest2({
- collision: "none",
- offset: "-2 -3"
- }, { top: -13, left: -12 }, "left top, negative offset");
-});
-
-})(jQuery);
+/* + * position_core.js + */ +(function($) { + +test('my, at, of', function() { + $('#elx').position({ + my: 'left top', + at: 'left top', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 40, left: 40 }, 'left top, left top'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 60, left: 40 }, 'left top, left bottom'); + + $('#elx').position({ + my: 'left', + at: 'bottom', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 55, left: 50 }, 'left, bottom'); + + $('#elx').position({ + my: 'left foo', + at: 'bar baz', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 45, left: 50 }, 'left foo, bar baz'); +}); + +test('multiple elements', function() { + var elements = $('#el1, #el2'); + var result = elements.position({ + my: 'left top', + at: 'left bottom', + of: '#parent', + collision: 'none' + }); + + same(result, elements); + var expected = {top: 10, left: 4}; + elements.each(function() { + same($(this).offset(), expected); + }); +}); + +test('positions', function() { + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + center: 3, + bottom: 6 + }; + var start = { left: 4, top: 4 }; + $.each([0, 1], function(my) { + $.each(["top", "center", "bottom"], function(vindex, vertical) { + $.each(["left", "center", "right"], function(hindex, horizontal) { + definitions.push({ + my: my ? horizontal + " " + vertical : 'left top', + at: !my ? horizontal + " " + vertical : 'left top', + result: { + top: my ? start.top - offsets[vertical] : start.top + offsets[vertical], + left: my ? start.left - offsets[horizontal] : start.left + offsets[horizontal] + } + }); + }); + }); + }); + var el = $("#el1"); + $.each(definitions, function(index, definition) { + el.position({ + my: definition.my, + at: definition.at, + of: '#parent', + collision: 'none' + }); + same(el.offset(), definition.result, "Position via " + jsDump.parse({my:definition.my, at:definition.at})); + }); +}); + +test('of', function() { + $('#elx').position({ + my: 'left top', + at: 'left top', + of: '#parentx', + collision: 'none' + }); + same($('#elx').offset(), { top: 40, left: 40 }, 'selector'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: $('#parentx'), + collision: 'none' + }); + same($('#elx').offset(), { top: 60, left: 40 }, 'jQuery object'); + + $('#elx').position({ + my: 'left top', + at: 'left top', + of: $('#parentx')[0], + collision: 'none' + }); + same($('#elx').offset(), { top: 40, left: 40 }, 'DOM element'); + + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: document, + collision: 'none' + }); + same($('#elx').offset(), { + top: $(document).height() - 10, + left: $(document).width() - 10 + }, 'document'); + + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: window, + collision: 'none' + }); + same($('#elx').offset(), { + top: $(window).height() - 10, + left: $(window).width() - 10 + }, 'window'); + + $(window).scrollTop(500).scrollLeft(200); + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: window, + collision: 'none' + }); + same($('#elx').offset(), { + top: $(window).height() + 500 - 10, + left: $(window).width() + 200 - 10 + }, 'window, scrolled'); + $(window).scrollTop(0).scrollLeft(0); + + var event = $.extend($.Event('someEvent'), { pageX: 200, pageY: 300 }); + $('#elx').position({ + my: 'left top', + at: 'left top', + of: event, + collision: 'none' + }); + same($('#elx').offset(), { + top: 300, + left: 200 + }, 'event - left top, left top'); + + event = $.extend($.Event('someEvent'), { pageX: 400, pageY: 600 }); + $('#elx').position({ + my: 'left top', + at: 'right bottom', + of: event, + collision: 'none' + }); + same($('#elx').offset(), { + top: 600, + left: 400 + }, 'event - left top, right bottom'); +}); + +test('offset', function() { + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + offset: '10', + collision: 'none' + }); + same($('#elx').offset(), { top: 70, left: 50 }, 'single value'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + offset: '5 -3', + collision: 'none' + }); + same($('#elx').offset(), { top: 57, left: 45 }, 'two values'); + + $('#elx').position({ + my: 'left top', + at: 'left bottom', + of: '#parentx', + offset: '5px -3px', + collision: 'none' + }); + same($('#elx').offset(), { top: 57, left: 45 }, 'with units'); +}); + +test('using', function() { + expect(6); + + var count = 0, + elems = $('#el1, #el2'), + expectedPosition = { top: 40, left: 40 }, + originalPosition = elems.position({ + my: 'right bottom', + at: 'rigt bottom', + of: '#parentx', + collision: 'none' + }).offset(); + + elems.position({ + my: 'left top', + at: 'left top', + of: '#parentx', + using: function(position) { + same(this, elems[count], 'correct context for call #' + count); + same(position, expectedPosition, 'correct position for call #' + count); + count++; + } + }); + + elems.each(function() { + same($(this).offset(), originalPosition, 'elements not moved'); + }); +}); + +function collisionTest(config, result, msg) { + var elem = $("#elx").position($.extend({ + my: "left top", + at: "right bottom", + of: window + }, config)); + same(elem.offset(), result, msg); +} + +function collisionTest2(config, result, msg) { + collisionTest($.extend({ + my: "right bottom", + at: "left top" + }, config), result, msg); +} + +test("collision: fit, no offset", function() { + collisionTest({ + collision: "fit" + }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit" + }, { top: 0, left: 0 }, "left top"); +}); + +test("collision: fit, with offset", function() { + collisionTest({ + collision: "fit", + offset: "2 3" + }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit", + offset: "2 3" + }, { top: 0, left: 0 }, "left top, positive offset"); + + collisionTest2({ + collision: "fit", + offset: "-2 -3" + }, { top: 0, left: 0 }, "left top, negative offset"); +}); + +test("collision: flip, no offset", function() { + collisionTest({ + collision: "flip" + }, { top: -10, left: -10 }, "left top"); + + collisionTest2({ + collision: "flip" + }, { top: $(window).height(), left: $(window).width() }, "right bottom"); +}); + +test("collision: flip, with offset", function() { + collisionTest({ + collision: "flip", + offset: "2 3" + }, { top: -13, left: -12 }, "left top, with offset added"); + + collisionTest2({ + collision: "flip", + offset: "2 3" + }, { top: $(window).height() - 3, left: $(window).width() - 2 }, "bottom, positive offset"); + + collisionTest2({ + collision: "flip", + offset: "-2 -3" + }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, negative offset"); +}); + +test("collision: none, no offset", function() { + collisionTest({ + collision: "none" + }, { top: $(window).height(), left: $(window).width() }, "left top"); + + collisionTest2({ + collision: "none" + }, { top: -10, left: -10 }, "moved to the right bottom"); +}); + +test("collision: none, with offset", function() { + collisionTest({ + collision: "none", + offset: "2 3" + }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, with offset added"); + + collisionTest2({ + collision: "none", + offset: "2 3" + }, { top: -7, left: -8 }, "left top, positive offset"); + + collisionTest2({ + collision: "none", + offset: "-2 -3" + }, { top: -13, left: -12 }, "left top, negative offset"); +}); + +})(jQuery); diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index 345a5a106..81390d59b 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -3,15 +3,14 @@ var hasDuplicate = false; function testWidgetDefaults(widget, defaults) { var pluginDefaults = $.extend({}, - $.widget.defaults, - $.ui[widget].defaults + $.ui[widget].prototype.options ); - // ensure that all defualts have the correct value + // ensure that all defaults have the correct value test('defined defaults', function() { $.each(defaults, function(key, val) { if ($.isFunction(val)) { - ok(val !== undefined); + ok(val !== undefined, key); return; } same(pluginDefaults[key], val, key); @@ -24,72 +23,21 @@ function testWidgetDefaults(widget, defaults) { ok(key in defaults, key); }); }); - - // defaults after init - test('defaults on init', function() { - var el = $('<div/>')[widget](), - instance = el.data(widget); - - $.each(defaults, function(key, val) { - if ($.isFunction(val)) { - ok(val !== undefined); - return; - } - same(instance.options[key], val, key); - }); - el.remove(); - }); -} - -function testSettingOptions(widget, options) { - test('option values', function() { - var el = $('<div/>')[widget](), - instance = el.data(widget); - - $.each(options, function(i, option) { - $.each({ - 'null': null, - 'false': false, - 'true': true, - zero: 0, - number: 1, - 'empty string': '', - string: 'string', - 'empty array': [], - array: ['array'], - 'empty object': {}, - object: {obj: 'ect'}, - date: new Date(), - regexp: /regexp/, - 'function': function() {} - }, function(type, val) { - el[widget]('option', option, val); - same(instance.options[option], val, option + ': ' + type); - }); - }); - - el.remove(); - }); } function testWidgetOverrides(widget) { test('$.widget overrides', function() { - $.each(['option', '_getData', '_trigger'], function(i, method) { - ok($.widget.prototype[method] == $.ui[widget].prototype[method], + $.each(['_widgetInit', 'option', '_trigger'], function(i, method) { + ok($.Widget.prototype[method] == $.ui[widget].prototype[method], 'should not override ' + method); }); }); } + function commonWidgetTests(widget, settings) { - var options = []; - $.each(settings.defaults, function(option) { - options.push(option); - }); - module(widget + ": common widget"); testWidgetDefaults(widget, settings.defaults); - testSettingOptions(widget, options); testWidgetOverrides(widget); } diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html new file mode 100644 index 000000000..f28f24ca7 --- /dev/null +++ b/tests/unit/widget/widget.html @@ -0,0 +1,24 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Widget Test Suite</title> + + <script type="text/javascript" src="../../../jquery-1.3.2.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + + <link type="text/css" href="../testsuite.css" rel="stylesheet" /> + <script type="text/javascript" src="../../../external/testrunner-r6588.js"></script> + <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> + + <script type="text/javascript" src="widget.js"></script> +</head> +<body> + +<div id="main"> + +</div> + +</body> +</html> diff --git a/tests/unit/widget/widget.js b/tests/unit/widget/widget.js new file mode 100644 index 000000000..3e7d9aaa6 --- /dev/null +++ b/tests/unit/widget/widget.js @@ -0,0 +1,168 @@ +/* + * widget unit tests + */ +(function($) { + +module('widget factory', { + teardown: function() { + delete $.ui.testWidget; + } +}); + +test('widget creation', function() { + var myPrototype = { + _init: function() {}, + creationTest: function() {} + }; + + $.widget('ui.testWidget', myPrototype); + ok($.isFunction($.ui.testWidget), 'constructor was created'); + equals('object', typeof $.ui.testWidget.prototype, 'prototype was created'); + equals($.ui.testWidget.prototype._init, myPrototype._init, 'init function is copied over'); + equals($.ui.testWidget.prototype.creationTest, myPrototype.creationTest, 'random function is copied over'); + equals($.ui.testWidget.prototype.option, $.Widget.prototype.option, 'option method copied over from base widget'); +}); + +test('jQuery usage', function() { + expect(10); + + var shouldInit = false; + + $.widget('ui.testWidget', { + getterSetterVal: 5, + _init: function() { + ok(shouldInit, 'init called on instantiation'); + }, + methodWithParams: function(param1, param2) { + ok(true, 'method called via .pluginName(methodName)'); + equals(param1, 'value1', 'parameter passed via .pluginName(methodName, param)'); + equals(param2, 'value2', 'multiple parameter passed via .pluginName(methodName, param, param)'); + + return this; + }, + getterSetterMethod: function(val) { + if (val) { + this.getterSetterVal = val; + } else { + return this.getterSetterVal; + } + } + }); + + shouldInit = true; + var elem = $('<div></div>').testWidget(); + shouldInit = false; + + var instance = elem.data('testWidget'); + equals(typeof instance, 'object', 'instance stored in .data(pluginName)'); + equals(instance.element[0], elem[0], 'element stored on widget'); + var ret = elem.testWidget('methodWithParams', 'value1', 'value2'); + equals(ret, elem, 'jQuery object returned from method call'); + + ret = elem.testWidget('getterSetterMethod'); + equals(ret, 5, 'getter/setter can act as getter'); + ret = elem.testWidget('getterSetterMethod', 30); + equals(ret, elem, 'getter/setter method can be chainable'); + equals(instance.getterSetterVal, 30, 'getter/setter can act as setter'); +}); + +test('direct usage', function() { + expect(9); + + var shouldInit = false; + + $.widget('ui.testWidget', { + getterSetterVal: 5, + _init: function() { + ok(shouldInit, 'init called on instantiation'); + }, + methodWithParams: function(param1, param2) { + ok(true, 'method called via .pluginName(methodName)'); + equals(param1, 'value1', 'parameter passed via .pluginName(methodName, param)'); + equals(param2, 'value2', 'multiple parameter passed via .pluginName(methodName, param, param)'); + + return this; + }, + getterSetterMethod: function(val) { + if (val) { + this.getterSetterVal = val; + } else { + return this.getterSetterVal; + } + } + }); + + var elem = $('<div></div>')[0]; + + shouldInit = true; + var instance = new $.ui.testWidget({}, elem); + shouldInit = false; + + equals($(elem).data('testWidget'), instance, 'instance stored in .data(pluginName)'); + equals(instance.element[0], elem, 'element stored on widget'); + + var ret = instance.methodWithParams('value1', 'value2'); + equals(ret, instance, 'plugin returned from method call'); + + ret = instance.getterSetterMethod(); + equals(ret, 5, 'getter/setter can act as getter'); + instance.getterSetterMethod(30); + equals(instance.getterSetterVal, 30, 'getter/setter can act as setter'); +}); + +test('merge multiple option arguments', function() { + expect(1); + $.widget("ui.testWidget", { + _init: function() { + same(this.options, { + disabled: false, + option1: "value1", + option2: "value2", + option3: "value3", + option4: { + option4a: "valuea", + option4b: "valueb" + } + }); + } + }); + $("<div></div>").testWidget({ + option1: "valuex", + option2: "valuex", + option3: "value3", + option4: { + option4a: "valuex" + } + }, { + option1: "value1", + option2: "value2", + option4: { + option4b: "valueb" + } + }, { + option4: { + option4a: "valuea" + } + }); +}); + +test(".widget() - base", function() { + $.widget("ui.testWidget", { + _init: function() {} + }); + var div = $("<div></div>").testWidget() + same(div[0], div.testWidget("widget")[0]); +}); + +test(".widget() - overriden", function() { + var wrapper = $("<div></div>"); + $.widget("ui.testWidget", { + _init: function() {}, + widget: function() { + return wrapper; + } + }); + same(wrapper[0], $("<div></div>").testWidget().testWidget("widget")[0]); +}); + +})(jQuery); |