mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-04-20 03:02:41 -04:00
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).
This commit is contained in:
Scott González
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
56
tests/unit/button/button.html
Normal file
56
tests/unit/button/button.html
Normal file
@@ -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>
|
||||
70
tests/unit/button/button_core.js
Normal file
70
tests/unit/button/button_core.js
Normal file
@@ -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);
|
||||
15
tests/unit/button/button_defaults.js
Normal file
15
tests/unit/button/button_defaults.js
Normal file
@@ -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 });
|
||||
17
tests/unit/button/button_events.js
Normal file
17
tests/unit/button/button_events.js
Normal file
@@ -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);
|
||||
15
tests/unit/button/button_methods.js
Normal file
15
tests/unit/button/button_methods.js
Normal file
@@ -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);
|
||||
69
tests/unit/button/button_options.js
Normal file
69
tests/unit/button/button_options.js
Normal file
@@ -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);
|
||||
10
tests/unit/button/button_tickets.js
Normal file
10
tests/unit/button/button_tickets.js
Normal file
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
* button_tickets.js
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
module("button: tickets");
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
||||
@@ -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);
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
24
tests/unit/widget/widget.html
Normal file
24
tests/unit/widget/widget.html
Normal file
@@ -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>
|
||||
168
tests/unit/widget/widget.js
Normal file
168
tests/unit/widget/widget.js
Normal file
@@ -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);
|
||||
Reference in New Issue
Block a user