Merge commit 'd21ea7816e' as 'jquery-ui'

This commit is contained in:
Mark Schouten 2016-08-05 13:20:20 +02:00
commit e904a80717
629 changed files with 341074 additions and 0 deletions

View file

@ -0,0 +1,156 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "accordion" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/accordion.js"
]
});
</script>
<script src="accordion_test_helpers.js"></script>
<script src="accordion_common.js"></script>
<script src="accordion_core.js"></script>
<script src="accordion_events.js"></script>
<script src="accordion_methods.js"></script>
<script src="accordion_options.js"></script>
<script src="../swarminject.js"></script>
<style>
#list, #list1 *, #navigation, #navigation *, #collapsible, #collapsible * {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 15px;
}
/* avoid IE7 oscillating between overflow visible and scroll values */
#list1 > div {
overflow: visible;
}
#collapsibleWrapper {
width: 300px;
float: left;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div id="list1" class="foo">
<h3 class="bar">There is one obvious advantage:</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">Now that you've got...</h3>
<div class="foo">
<p>
your bear, you have to admit it!
<br>
No, we aren't <a href="#">selling bears</a>.
</p>
<p>
We could talk about renting one.
</p>
</div>
<h3 class="bar">Rent one bear, ...</h3>
<div class="foo">
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.
</p>
</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</a></li>
<li><a href="?p=1.1.3.3">Electronic</a></li>
<li><a href="?p=1.1.3.6">Accessories</a></li>
</ul>
</li>
</ul>
</div>
<dl id="accordion-dl">
<dt>
Accordion Header 1
</dt>
<dd>
Accordion Content 1
</dd>
<dt>
Accordion Header 2
</dt>
<dd>
Accordion Content 2
</dd>
<dt>
Accordion Header 3
</dt>
<dd>
Accordion Content 3
</dd>
</dl>
<div id="collapsibleWrapper">
<div id="collapsible">
<h3>Header</h3>
<div>
<p>
The calculated height of this accordion should be the same
regardless of whether the accordion was collapsed or not
when the height was calculated.
</p>
</div>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,20 @@
TestHelpers.commonWidgetTests( "accordion", {
defaults: {
active: 0,
animate: {},
collapsible: false,
disabled: false,
event: "click",
header: "> li > :first-child,> :not(li):even",
heightStyle: "auto",
icons: {
"activeHeader": "ui-icon-triangle-1-s",
"header": "ui-icon-triangle-1-e"
},
// callbacks
activate: null,
beforeActivate: null,
create: null
}
});

View file

@ -0,0 +1,190 @@
(function( $ ) {
var setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: core", setupTeardown() );
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
test( "markup structure: " + type, function() {
expect( 4 );
var element = $( selector ).accordion();
ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
equal( element.find( ".ui-accordion-header" ).length, 3,
".ui-accordion-header elements exist, correct number" );
equal( element.find( ".ui-accordion-content" ).length, 3,
".ui-accordion-content elements exist, correct number" );
deepEqual( element.find( ".ui-accordion-header" ).next().get(),
element.find( ".ui-accordion-content" ).get(),
"content panels come immediately after headers" );
});
});
test( "handle click on header-descendant", function() {
expect( 1 );
var element = $( "#navigation" ).accordion();
$( "#navigation h2:eq(1) a" ).click();
state( element, 0, 1, 0 );
});
test( "accessibility", function () {
expect( 61 );
var element = $( "#list1" ).accordion({
active: 1,
collapsible: true
}),
headers = element.find( ".ui-accordion-header" );
equal( element.attr( "role" ), "tablist", "element role" );
headers.each(function( i ) {
var header = headers.eq( i ),
panel = header.next();
equal( header.attr( "role" ), "tab", "header " + i + " role" );
equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" );
equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" );
equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" );
});
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", 0 );
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header (0) has tabindex=0" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab (0) has aria-selected=true" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "active tab (0) has aria-expanded=true" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel (0) has aria-hidden=false" );
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", false );
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "previously active header (0) has tabindex=0" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
element.accordion( "option", "active", 1 );
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
});
asyncTest( "keyboard support", function() {
expect( 13 );
var element = $( "#list1" ).accordion(),
headers = element.find( ".ui-accordion-header" ),
anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ),
keyCode = $.ui.keyCode;
equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" );
headers.eq( 0 ).simulate( "focus" );
setTimeout( step1 );
function step1() {
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "first header has focus" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
setTimeout( step2 );
}
// Support: IE 11 with jQuery 1.7 - 1.8 only
// All of the setTimeouts() from keydowns aren't necessary with newer jQuery.
// Only the explicit focus simulations require them.
function step2() {
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next header" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
setTimeout( step3 );
}
function step3() {
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
setTimeout( step4 );
}
function step4() {
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first header" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
setTimeout( step5 );
}
function step5() {
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
setTimeout( step6 );
}
function step6() {
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous header" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
setTimeout( step7 );
}
function step7() {
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first header" );
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
setTimeout( step8 );
}
function step8() {
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last header" );
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
setTimeout( step9 );
}
function step9() {
equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
setTimeout( step10 );
}
function step10() {
equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" );
anchor.simulate( "focus" );
setTimeout( step11 );
}
function step11() {
ok( !headers.eq( 1 ).is( ".ui-state-focus" ), "header loses focus when focusing inside the panel" );
anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
setTimeout( step12 );
}
function step12() {
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "CTRL+UP moves focus to header" );
start();
}
});
}( jQuery ) );

View file

@ -0,0 +1,164 @@
(function( $ ) {
var setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: events", setupTeardown() );
test( "create", function() {
expect( 10 );
var element = $( "#list1" ),
headers = element.children( "h3" ),
contents = headers.next();
element.accordion({
create: function( event, ui ) {
equal( ui.header.length, 1, "header length" );
strictEqual( ui.header[ 0 ], headers[ 0 ], "header" );
equal( ui.panel.length, 1, "panel length" );
strictEqual( ui.panel[ 0 ], contents[ 0 ], "panel" );
}
});
element.accordion( "destroy" );
element.accordion({
active: 2,
create: function( event, ui ) {
equal( ui.header.length, 1, "header length" );
strictEqual( ui.header[ 0 ], headers[ 2 ], "header" );
equal( ui.panel.length, 1, "panel length" );
strictEqual( ui.panel[ 0 ], contents[ 2 ], "panel" );
}
});
element.accordion( "destroy" );
element.accordion({
active: false,
collapsible: true,
create: function( event, ui ) {
equal( ui.header.length, 0, "header length" );
equal( ui.panel.length, 0, "panel length" );
}
});
element.accordion( "destroy" );
});
test( "beforeActivate", function() {
expect( 38 );
var element = $( "#list1" ).accordion({
active: false,
collapsible: true
}),
headers = element.find( ".ui-accordion-header" ),
content = element.find( ".ui-accordion-content" );
element.one( "accordionbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ) );
equal( ui.oldHeader.length, 0 );
equal( ui.oldPanel.length, 0 );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
state( element, 0, 0, 0 );
});
element.accordion( "option", "active", 0 );
state( element, 1, 0, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
equal( event.originalEvent.type, "click" );
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 0 ] );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
state( element, 1, 0, 0 );
});
headers.eq( 1 ).click();
state( element, 0, 1, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ) );
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
equal( ui.newHeader.length, 0 );
equal( ui.newPanel.length, 0 );
state( element, 0, 1, 0 );
});
element.accordion( "option", "active", false );
state( element, 0, 0, 0 );
element.one( "accordionbeforeactivate", function( event, ui ) {
ok( !( "originalEvent" in event ) );
equal( ui.oldHeader.length, 0 );
equal( ui.oldPanel.length, 0 );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 2 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 2 ] );
event.preventDefault();
state( element, 0, 0, 0 );
});
element.accordion( "option", "active", 2 );
state( element, 0, 0, 0 );
});
test( "activate", function() {
expect( 21 );
var element = $( "#list1" ).accordion({
active: false,
collapsible: true
}),
headers = element.find( ".ui-accordion-header" ),
content = element.find( ".ui-accordion-content" );
element.one( "accordionactivate", function( event, ui ) {
equal( ui.oldHeader.length, 0 );
equal( ui.oldPanel.length, 0 );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
});
element.accordion( "option", "active", 0 );
element.one( "accordionactivate", function( event, ui ) {
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 0 ] );
equal( ui.newHeader.length, 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
});
headers.eq( 1 ).click();
element.one( "accordionactivate", function( event, ui ) {
equal( ui.oldHeader.length, 1 );
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
equal( ui.oldPanel.length, 1 );
strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
equal( ui.newHeader.length, 0 );
equal( ui.newPanel.length, 0 );
});
element.accordion( "option", "active", false );
// prevent activation
element.one( "accordionbeforeactivate", function( event ) {
ok( true );
event.preventDefault();
});
element.one( "accordionactivate", function() {
ok( false );
});
element.accordion( "option", "active", 1 );
});
}( jQuery ) );

View file

@ -0,0 +1,131 @@
(function( $ ) {
var equalHeight = TestHelpers.accordion.equalHeight,
setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: methods", setupTeardown() );
test( "destroy", function() {
expect( 1 );
domEqual( "#list1", function() {
$( "#list1" ).accordion().accordion( "destroy" );
});
});
test( "enable/disable", function() {
expect( 7 );
var element = $( "#list1" ).accordion();
state( element, 1, 0, 0 );
element.accordion( "disable" );
ok( element.hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" );
ok( element.hasClass( "ui-accordion-disabled" ), "element gets ui-accordion-disabled" );
// event does nothing
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
state( element, 1, 0, 0 );
// option still works
element.accordion( "option", "active", 1 );
state( element, 0, 1, 0 );
element.accordion( "enable" );
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1 );
});
test( "refresh", function() {
expect( 19 );
var element = $( "#navigation" )
.parent()
.height( 300 )
.end()
.accordion({
heightStyle: "fill"
});
equalHeight( element, 255 );
element.parent().height( 500 );
element.accordion( "refresh" );
equalHeight( element, 455 );
element = $( "#list1" );
element.accordion();
state( element, 1, 0, 0 );
// disable panel via markup
element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" );
element.accordion( "refresh" );
state( element, 1, 0, 0 );
// don't add multiple icons
element.accordion( "refresh" );
equal( element.find( ".ui-accordion-header-icon" ).length, 3 );
// add a panel
element
.append("<h3 class='bar' id='new_1'>new 1</h3>")
.append("<div class='foo' id='new_1_panel'>new 1</div>");
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );
// remove all tabs
element.find( "h3.bar, div.foo" ).remove();
element.accordion( "refresh" );
state( element );
equal( element.accordion( "option", "active" ), false, "no active accordion panel" );
// add panels
element
.append("<h3 class='bar' id='new_2'>new 2</h3>")
.append("<div class='foo' id='new_2_panel'>new 2</div>")
.append("<h3 class='bar' id='new_3'>new 3</h3>")
.append("<div class='foo' id='new_3_panel'>new 3</div>")
.append("<h3 class='bar' id='new_4'>new 4</h3>")
.append("<div class='foo' id='new_4_panel'>new 4</div>")
.append("<h3 class='bar' id='new_5'>new 5</h3>")
.append("<div class='foo' id='new_5_panel'>new 5</div>");
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );
// activate third tab
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1, 0 );
// remove fourth panel, third panel should stay active
element.find( "h3.bar" ).eq( 3 ).remove();
element.find( "div.foo" ).eq( 3 ).remove();
element.accordion( "refresh" );
state( element, 0, 0, 1 );
// remove third (active) panel, second panel should become active
element.find( "h3.bar" ).eq( 2 ).remove();
element.find( "div.foo" ).eq( 2 ).remove();
element.accordion( "refresh" );
state( element, 0, 1 );
// remove first panel, previously active panel (now first) should stay active
element.find( "h3.bar" ).eq( 0 ).remove();
element.find( "div.foo" ).eq( 0 ).remove();
element.accordion( "refresh" );
state( element, 1 );
// collapse all panels
element.accordion( "option", {
collapsible: true,
active: false
});
state( element, 0 );
element.accordion( "refresh" );
state( element, 0 );
});
test( "widget", function() {
expect( 2 );
var element = $( "#list1" ).accordion(),
widgetElement = element.accordion( "widget" );
equal( widgetElement.length, 1, "one element" );
strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
});
}( jQuery ) );

View file

@ -0,0 +1,479 @@
(function( $ ) {
var equalHeight = TestHelpers.accordion.equalHeight,
setupTeardown = TestHelpers.accordion.setupTeardown,
state = TestHelpers.accordion.state;
module( "accordion: options", setupTeardown() );
test( "{ active: default }", function() {
expect( 2 );
var element = $( "#list1" ).accordion();
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
});
test( "{ active: null }", function() {
expect( 2 );
var element = $( "#list1" ).accordion({
active: null
});
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
});
test( "{ active: false }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
active: false,
collapsible: true
});
state( element, 0, 0, 0 );
equal( element.find( ".ui-accordion-header.ui-state-active" ).length, 0, "no headers selected" );
equal( element.accordion( "option", "active" ), false );
element.accordion( "option", "collapsible", false );
state( element, 1, 0, 0 );
equal( element.accordion( "option", "active" ), 0 );
element.accordion( "destroy" );
element.accordion({
active: false
});
state( element, 1, 0, 0 );
strictEqual( element.accordion( "option", "active" ), 0 );
});
// http://bugs.jqueryui.com/ticket/11938
test( "{ active: false, collapsible: true }", function() {
expect( 1 );
var element = $( "#collapsible" ).accordion(),
height = element.outerHeight();
element
.accordion( "destroy" )
.accordion( {
active: false,
collapsible: true
} )
.accordion( "option", "active", 0 );
equal( element.outerHeight(), height );
} );
test( "{ active: Number }", function() {
expect( 8 );
var element = $( "#list1" ).accordion({
active: 2
});
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.accordion( "option", "active", 0 );
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).click();
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.accordion( "option", "active", 10 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ active: -Number }", function() {
expect( 8 );
var element = $( "#list1" ).accordion({
active: -1
});
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.accordion( "option", "active", -2 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.accordion( "option", "active", -10 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.accordion( "option", "active", -3 );
equal( element.accordion( "option", "active" ), 0 );
state( element, 1, 0, 0 );
});
test( "{ animate: false }", function() {
expect( 3 );
var element = $( "#list1" ).accordion({
animate: false
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
$.fn.animate = function() {
ok( false, ".animate() called" );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
});
asyncTest( "{ animate: Number }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: 100
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, undefined, "default easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: String }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: "linear"
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, undefined, "default duration" );
equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: {} }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: {}
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, undefined, "default duration" );
equal( options.easing, undefined, "default easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: { duration, easing } }", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
animate: { duration: 100, easing: "linear" }
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 1 );
panels.promise().done(function() {
ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: { duration, easing } }, animate down", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
active: 1,
animate: { duration: 100, easing: "linear" }
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "linear", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 0 );
panels.promise().done(function() {
ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
asyncTest( "{ animate: { duration, easing, down } }, animate down", function() {
expect( 7 );
var element = $( "#list1" ).accordion({
active: 1,
animate: {
duration: 100,
easing: "linear",
down: {
easing: "swing"
}
}
}),
panels = element.find( ".ui-accordion-content" ),
animate = $.fn.animate;
// called twice (both panels)
$.fn.animate = function( props, options ) {
equal( options.duration, 100, "correct duration" );
equal( options.easing, "swing", "correct easing" );
animate.apply( this, arguments );
};
ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
element.accordion( "option", "active", 0 );
panels.promise().done(function() {
ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
$.fn.animate = animate;
start();
});
});
test( "{ collapsible: false }", function() {
expect( 4 );
var element = $( "#list1" ).accordion({
active: 1
});
element.accordion( "option", "active", false );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).click();
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ collapsible: true }", function() {
expect( 6 );
var element = $( "#list1" ).accordion({
active: 1,
collapsible: true
});
element.accordion( "option", "active", false );
equal( element.accordion( "option", "active" ), false );
state( element, 0, 0, 0 );
element.accordion( "option", "active", 1 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).click();
equal( element.accordion( "option", "active" ), false );
state( element, 0, 0, 0 );
});
test( "{ event: null }", function() {
expect( 5 );
var element = $( "#list1" ).accordion({
event: null
});
state( element, 1, 0, 0 );
element.accordion( "option", "active", 1 );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
// ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).click();
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ event: custom }", function() {
expect( 11 );
var element = $( "#list1" ).accordion({
event: "custom1 custom2"
});
state( element, 1, 0, 0 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
// ensure default click handler isn't bound
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.accordion( "option", "event", "custom3" );
// ensure old event handlers are unbound
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom2" );
equal( element.accordion( "option", "active" ), 2 );
state( element, 0, 0, 1 );
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
equal( element.accordion( "option", "active" ), 1 );
state( element, 0, 1, 0 );
});
test( "{ header: default }", function() {
expect( 2 );
// default: > li > :first-child,> :not(li):even
// > :not(li):even
state( $( "#list1" ).accordion(), 1, 0, 0);
// > li > :first-child
state( $( "#navigation" ).accordion(), 1, 0, 0);
});
test( "{ header: custom }", function() {
expect( 6 );
var element = $( "#navigationWrapper" ).accordion({
header: "h2"
});
element.find( "h2" ).each(function() {
ok( $( this ).hasClass( "ui-accordion-header" ) );
});
equal( element.find( ".ui-accordion-header" ).length, 3 );
state( element, 1, 0, 0 );
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1 );
});
test( "{ heightStyle: 'auto' }", function() {
expect( 3 );
var element = $( "#navigation" ).accordion({ heightStyle: "auto" });
equalHeight( element, 105 );
});
test( "{ heightStyle: 'content' }", function() {
expect( 3 );
var element = $( "#navigation" ).accordion({ heightStyle: "content" }),
sizes = element.find( ".ui-accordion-content" ).map(function() {
return $( this ).height();
}).get();
equal( sizes[ 0 ], 75 );
equal( sizes[ 1 ], 105 );
equal( sizes[ 2 ], 45 );
});
test( "{ heightStyle: 'fill' }", function() {
expect( 3 );
$( "#navigationWrapper" ).height( 500 );
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
equalHeight( element, 455 );
});
test( "{ heightStyle: 'fill' } with sibling", function() {
expect( 3 );
$( "#navigationWrapper" ).height( 500 );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 50,
marginTop: 20,
marginBottom: 30
})
.prependTo( "#navigationWrapper" );
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
equalHeight( element , 355 );
});
test( "{ heightStyle: 'fill' } with multiple siblings", function() {
expect( 3 );
$( "#navigationWrapper" ).height( 500 );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 50,
marginTop: 20,
marginBottom: 30
})
.prependTo( "#navigationWrapper" );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 50,
marginTop: 20,
marginBottom: 30,
position: "absolute"
})
.prependTo( "#navigationWrapper" );
$( "<p>Lorem Ipsum</p>" )
.css({
height: 25,
marginTop: 10,
marginBottom: 15
})
.prependTo( "#navigationWrapper" );
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
equalHeight( element, 305 );
});
test( "{ icons: false }", function() {
expect( 8 );
var element = $( "#list1" );
function icons( on ) {
deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 );
deepEqual( element.find( ".ui-accordion-header.ui-accordion-icons" ).length, on ? 3 : 0 );
}
element.accordion();
icons( true );
element.accordion( "destroy" ).accordion({
icons: false
});
icons( false );
element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } );
icons( true );
element.accordion( "option", "icons", false );
icons( false );
});
test( "{ icons: hash }", function() {
expect( 3 );
var element = $( "#list1" ).accordion({
icons: { activeHeader: "a1", header: "h1" }
});
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );
});
}( jQuery ) );

View file

@ -0,0 +1,27 @@
TestHelpers.accordion = {
equalHeight: function( accordion, height ) {
accordion.find( ".ui-accordion-content" ).each(function() {
equal( $( this ).outerHeight(), height );
});
},
setupTeardown: function() {
var animate = $.ui.accordion.prototype.options.animate;
return {
setup: function() {
$.ui.accordion.prototype.options.animate = false;
},
teardown: function() {
$.ui.accordion.prototype.options.animate = animate;
}
};
},
state: function( accordion ) {
var expected = $.makeArray( arguments ).slice( 1 ),
actual = accordion.find( ".ui-accordion-content" ).map(function() {
return $( this ).css( "display" ) === "none" ? 0 : 1;
}).get();
QUnit.push( QUnit.equiv(actual, expected), actual, expected );
}
};

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "accordion" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>