jquery-ui/tests/unit/accordion/options.js

468 lines
13 KiB
JavaScript

define( [
"jquery",
"./helper",
"ui/accordion"
], function( $, testHelper ) {
var equalHeight = testHelper.equalHeight,
setupTeardown = testHelper.setupTeardown,
state = testHelper.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 );
});
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 ).trigger( "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 ).trigger( "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 ).trigger( "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 ).trigger( "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( assert ) {
expect( 6 );
var element = $( "#navigationWrapper" ).accordion({
header: "h2"
});
element.find( "h2" ).each(function() {
assert.hasClasses( this, "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( assert ) {
expect( 3 );
var element = $( "#list1" ).accordion({
icons: { activeHeader: "a1", header: "h1" }
});
assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1" );
element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
assert.lacksClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a1");
assert.hasClasses( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ), "a2" );
});
} );