library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accordion: First pass at splitting out tests for deprecated functionality.

Browse Source
This commit is contained in:
Scott González 2011-01-24 14:38:23 -05:00
parent cc90b44060
commit c96c249780
8 changed files with 476 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
tests/unit/accordion/accordion.html
View File

@ -1,22 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title> <title>jQuery UI Accordion Test Suite</title>
<link type="text/css" href="../../../themes/base/jquery.ui.accordion.css" rel="stylesheet" /> <link rel="stylesheet" href="../../../themes/base/jquery.ui.accordion.css">
<script type="text/javascript" src="../../../jquery-1.4.4.js"></script> <script src="../../../jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> <script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> $.uiBackCompat = false;
<script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script> </script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <link rel="stylesheet" href="../../../external/qunit.css">
<script type="text/javascript" src="../../../external/qunit.js"></script> <script src="../../../external/qunit.js"></script>
<script type="text/javascript" src="../../jquery.simulate.js"></script> <script src="../../jquery.simulate.js"></script>
<script type="text/javascript" src="../testsuite.js"></script> <script src="../testsuite.js"></script>
<script type="text/javascript"> <script>
$.ui.accordion.prototype.options.animated = false; $.ui.accordion.prototype.options.animated = false;
function state(accordion) { function state(accordion) {
@ -39,16 +42,16 @@
same(sizes[0], sizes[2]); same(sizes[0], sizes[2]);
} }
</script> </script>
<script type="text/javascript" src="accordion_core.js"></script> <script src="accordion_core.js"></script>
<script type="text/javascript" src="accordion_defaults.js"></script> <script src="accordion_defaults.js"></script>
<script type="text/javascript" src="accordion_events.js"></script> <script src="accordion_events.js"></script>
<script type="text/javascript" src="accordion_methods.js"></script> <script src="accordion_methods.js"></script>
<script type="text/javascript" src="accordion_options.js"></script> <script src="accordion_options.js"></script>
<script type="text/javascript" src="accordion_tickets.js"></script> <script src="accordion_tickets.js"></script>
<script type="text/javascript" src="../swarminject.js"></script> <script src="../swarminject.js"></script>
<style> <style>
#main { font-size: 10pt; font-family: 'trebuchet ms', verdana, arial; } #main { font-size: 10pt; font-family: "trebuchet ms", verdana, arial; }
#list, #list1 *, #navigation, #navigation * { margin: 0; padding: 0; font-size: 12px; } #list, #list1 *, #navigation, #navigation * { margin: 0; padding: 0; font-size: 12px; }
</style> </style>
</head> </head>

16
tests/unit/accordion/accordion_defaults.js
View File

@ -5,19 +5,15 @@
var accordion_defaults = { var accordion_defaults = {
active: 0, active: 0,
animated: false, animated: false,
autoHeight: true,
clearStyle: false,
collapsible: false, collapsible: false,
disabled: false, disabled: false,
event: "click", event: "click",
fillSpace: false,
header: "> li > :first-child,> :not(li):even", header: "> li > :first-child,> :not(li):even",
heightStyle: null, heightStyle: "auto",
icons: { "header": "ui-icon-triangle-1-e", icons: {
"activeHeader": null, "header": "ui-icon-triangle-1-e",
"headerSelected": "ui-icon-triangle-1-s" }, "activeHeader": "ui-icon-triangle-1-s"
navigation: false, }
navigationFilter: function() {}
}; };
commonWidgetTests('accordion', { defaults: accordion_defaults }); commonWidgetTests( "accordion", { defaults: accordion_defaults } );

25
tests/unit/accordion/accordion_defaults_deprecated.js Normal file
View File

@ -0,0 +1,25 @@
/*
* accordion_defaults.js
*/
var accordion_defaults = {
active: 0,
animated: false,
autoHeight: true,
clearStyle: false,
collapsible: false,
disabled: false,
event: "click",
fillSpace: false,
header: "> li > :first-child,> :not(li):even",
heightStyle: null,
icons: {
"header": "ui-icon-triangle-1-e",
"activeHeader": null,
"headerSelected": "ui-icon-triangle-1-s"
},
navigation: false,
navigationFilter: function() {}
};
commonWidgetTests( "accordion", { defaults: accordion_defaults } );

139
tests/unit/accordion/accordion_deprecated.html Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.accordion.css">
<script src="../../../jquery-1.4.4.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../../../external/qunit.css">
<script src="../../../external/qunit.js"></script>
<script src="../../jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
$.ui.accordion.prototype.options.animated = false;
function state(accordion) {
var args = $.makeArray(arguments).slice(1);
var result = [];
$.each(args, function(i, n) {
result.push( accordion.find(".ui-accordion-content").eq(i).filter(function() {
return $(this).css("display") != "none"
}).length ? 1 : 0 );
});
same(args, result)
}
function equalHeights(accordion, min, max) {
var sizes = [];
accordion.find(".ui-accordion-content").each(function() {
sizes.push($(this).outerHeight());
});
ok( sizes[0] >= min && sizes[0] <= max, "must be within " + min + " and " + max + ", was " + sizes[0] );
same(sizes[0], sizes[1]);
same(sizes[0], sizes[2]);
}
</script>
<script src="accordion_core.js"></script>
<script src="accordion_defaults_deprecated.js"></script>
<script src="accordion_events.js"></script>
<script src="accordion_methods.js"></script>
<script src="accordion_options.js"></script>
<script src="accordion_tickets.js"></script>
<script src="accordion_deprecated.js"></script>
<script src="../swarminject.js"></script>
<style>
#main { font-size: 10pt; font-family: "trebuchet ms", verdana, arial; }
#list, #list1 *, #navigation, #navigation * { margin: 0; padding: 0; font-size: 12px; }
</style>
</head>
<body>
<h1 id="qunit-header">jQuery UI Accordion Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;">
<div>
<div id="list1" class="foo">
<h3 class="bar"><a class="anchor">There is one obvious advantage:</a></h3>
<div class="foo">
<p>
You've seen it coming!
<br/>
Buy now and get nothing for free!
<br/>
Well, at least no free beer. Perhaps a bear, if you can afford it.
</p>
</div>
<h3 class="bar"><a class="anchor">Now that you've got...</a></h3>
<div class="foo">
<p>
your bear, you have to admit it!
<br/>
No, we aren't selling bears.
</p>
<p>
We could talk about renting one.
</p>
</div>
<h3 class="bar"><a class="anchor">Rent one bear, ...</a></h3>
<div class="foo">
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.
</p>
</div>
</div>
</div>
<div id="navigationWrapper">
<ul id="navigation">
<li>
<h2><a href="?p=1.1.1">Guitar</a></h2>
<ul>
<li><a href="?p=1.1.1.1">Electric</a></li>
<li><a href="?p=1.1.1.2">Acoustic</a></li>
<li><a href="?p=1.1.1.3">Amps</a></li>
<li><a href="?p=1.1.1.4">Effects</a></li>
<li><a href="?p=1.1.1.5">Accessories</a></li>
</ul>
</li>
<li>
<h2><a href="?p=1.1.2"><span>Bass</span></a></h2>
<ul>
<li><a href="?p=1.1.2.1">Electric</a></li>
<li><a href="?p=1.1.2.2">Acoustic</a></li>
<li><a href="?p=1.1.2.3">Amps</a></li>
<li><a href="?p=1.1.2.4">Effects</a></li>
<li><a href="?p=1.1.2.5">Accessories</a></li>
<li><a href="?p=1.1.2.5">Accessories</a></li>
<li><a href="?p=1.1.2.5">Accessories</a></li>
</ul>
</li>
<li>
<h2><a href="?p=1.1.3">Drums</a></h2>
<ul>
<li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
<li><a href="?p=1.1.3.3">Electronic Drums</a></li>
<li><a href="?p=1.1.3.6">Accessories</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

154
tests/unit/accordion/accordion_deprecated.js Normal file
View File

@ -0,0 +1,154 @@
/*
* accordion_core.js
*/
(function($) {
module("accordion (deprecated): expanded active option, activate method");
test("activate", function() {
var expected = $('#list1').accordion(),
actual = expected.accordion('activate', 2);
equals(actual, expected, 'activate is chainable');
});
test("activate, numeric", function() {
var ac = $('#list1').accordion({ active: 1 });
state(ac, 0, 1, 0);
ac.accordion("activate", 2);
state(ac, 0, 0, 1);
ac.accordion("activate", 0);
state(ac, 1, 0, 0);
ac.accordion("activate", 1);
state(ac, 0, 1, 0);
ac.accordion("activate", 2);
state(ac, 0, 0, 1);
});
test("activate, boolean and numeric, collapsible:true", function() {
var ac = $('#list1').accordion({collapsible: true}).accordion("activate", 2);
state(ac, 0, 0, 1);
ok("x", "----");
ac.accordion("activate", 0);
state(ac, 1, 0, 0);
ok("x", "----");
ac.accordion("activate", -1);
state(ac, 0, 0, 0);
});
test("activate, boolean, collapsible: false", function() {
var ac = $('#list1').accordion().accordion("activate", 2);
state(ac, 0, 0, 1);
ac.accordion("activate", false);
state(ac, 0, 0, 1);
});
test("activate, string expression", function() {
var ac = $('#list1').accordion({ active: "h3:last" });
state(ac, 0, 0, 1);
ac.accordion("activate", ":first");
state(ac, 1, 0, 0);
ac.accordion("activate", ":eq(1)");
state(ac, 0, 1, 0);
ac.accordion("activate", ":last");
state(ac, 0, 0, 1);
});
test("activate, jQuery or DOM element", function() {
var ac = $('#list1').accordion({ active: $("#list1 h3:last") });
state(ac, 0, 0, 1);
ac.accordion("activate", $("#list1 h3:first"));
state(ac, 1, 0, 0);
ac.accordion("activate", $("#list1 h3")[1]);
state(ac, 0, 1, 0);
});
test("{ active: Selector }", function() {
var ac = $("#list1").accordion({
active: "h3:last"
});
state(ac, 0, 0, 1);
ac.accordion('option', 'active', "h3:eq(1)");
state(ac, 0, 1, 0);
});
test("{ active: Element }", function() {
var ac = $("#list1").accordion({
active: $("#list1 h3:last")[0]
});
state(ac, 0, 0, 1);
ac.accordion('option', 'active', $("#list1 h3:eq(1)")[0]);
state(ac, 0, 1, 0);
});
test("{ active: jQuery Object }", function() {
var ac = $("#list1").accordion({
active: $("#list1 h3:last")
});
state(ac, 0, 0, 1);
ac.accordion('option', 'active', $("#list1 h3:eq(1)"));
state(ac, 0, 1, 0);
});
module("accordion (deprecated) - height options");
test("{ autoHeight: true }, default", function() {
equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130);
});
test("{ autoHeight: false }", function() {
var accordion = $('#navigation').accordion({ autoHeight: false });
var sizes = [];
accordion.find(".ui-accordion-content").each(function() {
sizes.push($(this).height());
});
ok( sizes[0] >= 70 && sizes[0] <= 90, "was " + sizes[0] );
ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] );
ok( sizes[2] >= 42 && sizes[2] <= 54, "was " + sizes[2] );
});
// fillSpace: false == autoHeight: true, covered above
test("{ fillSpace: true }", function() {
$("#navigationWrapper").height(500);
equalHeights($('#navigation').accordion({ fillSpace: true }), 446, 458);
});
test("{ fillSpace: true } with sibling", function() {
$("#navigationWrapper").height(500);
var sibling = $("<p>Lorem Ipsum</p>");
$("#navigationWrapper").prepend( sibling.height(100) );
//sibling.outerHeight(true) == 126
equalHeights($('#navigation').accordion({ fillSpace: true}), 320, 332);
});
test("{ fillSpace: true } with multiple siblings", function() {
$("#navigationWrapper").height(500);
var sibling = $("<p>Lorem Ipsum</p>");
$("#navigationWrapper")
.prepend( sibling.clone().height(100) )
.prepend( sibling.clone().height(100).css( "position", "absolute" ) )
.prepend( sibling.clone().height(50) );
//sibling.outerHeight(true) == 126
equalHeights($('#navigation').accordion({ fillSpace: true}), 244, 256);
});
module("accordion (deprecated) - icons");
test("change headerSelected option after creation", function() {
var list = $("#list1");
list.accordion( { icons: { "activeHeader": "test" } } );
equals( $( "#list1 span.test" ).length, 1);
list.accordion( "option", "icons", { "headerSelected": "deprecated" } );
equals( $( "#list1 span.deprecated" ).length, 1);
});
})(jQuery);

59
tests/unit/accordion/accordion_methods.js
View File

@ -57,66 +57,9 @@ test("disable", function() {
state(expected, 0, 1, 0) state(expected, 0, 1, 0)
}); });
test("activate", function() {
var expected = $('#list1').accordion(),
actual = expected.accordion('activate', 2);
equals(actual, expected, 'activate is chainable');
});
test("activate, numeric", function() {
var ac = $('#list1').accordion({ active: 1 });
state(ac, 0, 1, 0);
ac.accordion("activate", 2);
state(ac, 0, 0, 1);
ac.accordion("activate", 0);
state(ac, 1, 0, 0);
ac.accordion("activate", 1);
state(ac, 0, 1, 0);
ac.accordion("activate", 2);
state(ac, 0, 0, 1);
});
test("activate, boolean and numeric, collapsible:true", function() {
var ac = $('#list1').accordion({collapsible: true}).accordion("activate", 2);
state(ac, 0, 0, 1);
ok("x", "----");
ac.accordion("activate", 0);
state(ac, 1, 0, 0);
ok("x", "----");
ac.accordion("activate", -1);
state(ac, 0, 0, 0);
});
test("activate, boolean, collapsible: false", function() {
var ac = $('#list1').accordion().accordion("activate", 2);
state(ac, 0, 0, 1);
ac.accordion("activate", false);
state(ac, 0, 0, 1);
});
test("activate, string expression", function() {
var ac = $('#list1').accordion({ active: "h3:last" });
state(ac, 0, 0, 1);
ac.accordion("activate", ":first");
state(ac, 1, 0, 0);
ac.accordion("activate", ":eq(1)");
state(ac, 0, 1, 0);
ac.accordion("activate", ":last");
state(ac, 0, 0, 1);
});
test("activate, jQuery or DOM element", function() {
var ac = $('#list1').accordion({ active: $("#list1 h3:last") });
state(ac, 0, 0, 1);
ac.accordion("activate", $("#list1 h3:first"));
state(ac, 1, 0, 0);
ac.accordion("activate", $("#list1 h3")[1]);
state(ac, 0, 1, 0);
});
test("refresh", function() { test("refresh", function() {
var expected = $('#navigation').parent().height(300).end().accordion({ var expected = $('#navigation').parent().height(300).end().accordion({
fillSpace: true heightStyle: "fill"
}); });
equalHeights(expected, 246, 258); equalHeights(expected, 246, 258);

75
tests/unit/accordion/accordion_options.js
View File

@ -11,33 +11,6 @@ test("{ active: first child }, default", function() {
state(ac, 1, 0, 0) state(ac, 1, 0, 0)
}); });
test("{ active: Selector }", function() {
var ac = $("#list1").accordion({
active: "h3:last"
});
state(ac, 0, 0, 1);
ac.accordion('option', 'active', "h3:eq(1)");
state(ac, 0, 1, 0);
});
test("{ active: Element }", function() {
var ac = $("#list1").accordion({
active: $("#list1 h3:last")[0]
});
state(ac, 0, 0, 1);
ac.accordion('option', 'active', $("#list1 h3:eq(1)")[0]);
state(ac, 0, 1, 0);
});
test("{ active: jQuery Object }", function() {
var ac = $("#list1").accordion({
active: $("#list1 h3:last")
});
state(ac, 0, 0, 1);
ac.accordion('option', 'active', $("#list1 h3:eq(1)"));
state(ac, 0, 1, 0);
});
test("{ active: false }", function() { test("{ active: false }", function() {
var ac = $("#list1").accordion({ var ac = $("#list1").accordion({
active: false, active: false,
@ -65,25 +38,10 @@ test("{ active: Number }", function() {
equals( $("#list1").accordion('option', 'active'), 0); equals( $("#list1").accordion('option', 'active'), 0);
}); });
test("{ autoHeight: true }, default", function() {
equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130);
});
test("{ heightStyle: 'auto' }, default", function() { test("{ heightStyle: 'auto' }, default", function() {
equalHeights($('#navigation').accordion({ heightStyle: 'auto' }), 95, 130); equalHeights($('#navigation').accordion({ heightStyle: 'auto' }), 95, 130);
}); });
test("{ autoHeight: false }", function() {
var accordion = $('#navigation').accordion({ autoHeight: false });
var sizes = [];
accordion.find(".ui-accordion-content").each(function() {
sizes.push($(this).height());
});
ok( sizes[0] >= 70 && sizes[0] <= 90, "was " + sizes[0] );
ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] );
ok( sizes[2] >= 42 && sizes[2] <= 54, "was " + sizes[2] );
});
test("{ heightStyle: 'content' }", function() { test("{ heightStyle: 'content' }", function() {
var accordion = $('#navigation').accordion({ heightStyle: 'content' }); var accordion = $('#navigation').accordion({ heightStyle: 'content' });
var sizes = []; var sizes = [];
@ -110,36 +68,11 @@ test("{ collapsible: true }", function() {
state(ac, 0, 0, 0); state(ac, 0, 0, 0);
}); });
// fillSpace: false == autoHeight: true, covered above
test("{ fillSpace: true }", function() {
$("#navigationWrapper").height(500);
equalHeights($('#navigation').accordion({ fillSpace: true }), 446, 458);
});
test("{ heightStyle: 'fill' }", function() { test("{ heightStyle: 'fill' }", function() {
$("#navigationWrapper").height(500); $("#navigationWrapper").height(500);
equalHeights($('#navigation').accordion({ heightStyle: 'fill' }), 446, 458); equalHeights($('#navigation').accordion({ heightStyle: 'fill' }), 446, 458);
}); });
test("{ fillSpace: true } with sibling", function() {
$("#navigationWrapper").height(500);
var sibling = $("<p>Lorem Ipsum</p>");
$("#navigationWrapper").prepend( sibling.height(100) );
//sibling.outerHeight(true) == 126
equalHeights($('#navigation').accordion({ fillSpace: true}), 320, 332);
});
test("{ fillSpace: true } with multiple siblings", function() {
$("#navigationWrapper").height(500);
var sibling = $("<p>Lorem Ipsum</p>");
$("#navigationWrapper")
.prepend( sibling.clone().height(100) )
.prepend( sibling.clone().height(100).css( "position", "absolute" ) )
.prepend( sibling.clone().height(50) );
//sibling.outerHeight(true) == 126
equalHeights($('#navigation').accordion({ fillSpace: true}), 244, 256);
});
test("{ header: '> li > :first-child,> :not(li):even' }, default", function() { test("{ header: '> li > :first-child,> :not(li):even' }, default", function() {
state($("#list1").accordion(), 1, 0, 0); state($("#list1").accordion(), 1, 0, 0);
state($("#navigation").accordion(), 1, 0, 0); state($("#navigation").accordion(), 1, 0, 0);
@ -192,12 +125,4 @@ test("{ navigation: true, navigationFilter: content }", function() {
equals( $("#navigation .ui-accordion-content:eq(2)").size(), 1, "third content active" ); equals( $("#navigation .ui-accordion-content:eq(2)").size(), 1, "third content active" );
}); });
test("change headerSelected option after creation", function() {
var list = $("#list1");
list.accordion( { icons: { "activeHeader": "test" } } );
equals( $( "#list1 span.test" ).length, 1);
list.accordion( "option", "icons", { "headerSelected": "deprecated" } );
equals( $( "#list1 span.deprecated" ).length, 1);
});
})(jQuery); })(jQuery);

15
ui/jquery.ui.accordion.js vendored
View File

@ -20,12 +20,10 @@ $.widget( "ui.accordion", {
collapsible: false, collapsible: false,
event: "click", event: "click",
header: "> li > :first-child,> :not(li):even", header: "> li > :first-child,> :not(li):even",
// TODO: set to "auto" in 2.0 (#5868, #5872) heightStyle: "auto",
heightStyle: null, // "auto"
icons: { icons: {
header: "ui-icon-triangle-1-e", header: "ui-icon-triangle-1-e",
// TODO: set to "ui-icon-triangle-1-s" in 2.0 (#6835) activeHeader: "ui-icon-triangle-1-s"
activeHeader: null // "ui-icon-triangle-1-s"
} }
}, },
@ -599,7 +597,7 @@ $.extend( $.ui.accordion, {
// DEPRECATED // DEPRECATED
if ( $.uiBackCompat !== false ) {
// navigation options // navigation options
(function( $, prototype ) { (function( $, prototype ) {
$.extend( prototype.options, { $.extend( prototype.options, {
@ -635,6 +633,7 @@ $.extend( $.ui.accordion, {
// height options // height options
(function( $, prototype ) { (function( $, prototype ) {
$.extend( prototype.options, { $.extend( prototype.options, {
heightStyle: null, // remove default so we fall back to old values
autoHeight: true, // use heightStyle: "auto" autoHeight: true, // use heightStyle: "auto"
clearStyle: false, // use heightStyle: "content" clearStyle: false, // use heightStyle: "content"
fillSpace: false // use heightStyle: "fill" fillSpace: false // use heightStyle: "fill"
@ -678,7 +677,10 @@ $.extend( $.ui.accordion, {
// icon options // icon options
(function( $, prototype ) { (function( $, prototype ) {
prototype.options.icons.headerSelected = "ui-icon-triangle-1-s"; $.extend( prototype.options.icons, {
activeHeader: null, // remove default so we fall back to old values
headerSelected: "ui-icon-triangle-1-s"
});
var _createIcons = prototype._createIcons; var _createIcons = prototype._createIcons;
prototype._createIcons = function() { prototype._createIcons = function() {
@ -709,5 +711,6 @@ $.extend( $.ui.accordion, {
// resize method // resize method
jQuery.ui.accordion.prototype.resize = jQuery.ui.accordion.prototype.refresh; jQuery.ui.accordion.prototype.resize = jQuery.ui.accordion.prototype.refresh;
}
})( jQuery ); })( jQuery );