3 var equalHeight = TestHelpers.accordion.equalHeight,
4 setupTeardown = TestHelpers.accordion.setupTeardown,
5 state = TestHelpers.accordion.state;
7 module( "accordion: options", setupTeardown() );
9 test( "{ active: default }", function() {
11 var element = $( "#list1" ).accordion();
12 equal( element.accordion( "option", "active" ), 0 );
13 state( element, 1, 0, 0 );
16 test( "{ active: null }", function() {
18 var element = $( "#list1" ).accordion({
21 equal( element.accordion( "option", "active" ), 0 );
22 state( element, 1, 0, 0 );
25 test( "{ active: false }", function() {
27 var element = $( "#list1" ).accordion({
31 state( element, 0, 0, 0 );
32 equal( element.find( ".ui-accordion-header.ui-state-active" ).length, 0, "no headers selected" );
33 equal( element.accordion( "option", "active" ), false );
35 element.accordion( "option", "collapsible", false );
36 state( element, 1, 0, 0 );
37 equal( element.accordion( "option", "active" ), 0 );
39 element.accordion( "destroy" );
43 state( element, 1, 0, 0 );
44 strictEqual( element.accordion( "option", "active" ), 0 );
47 test( "{ active: Number }", function() {
49 var element = $( "#list1" ).accordion({
52 equal( element.accordion( "option", "active" ), 2 );
53 state( element, 0, 0, 1 );
55 element.accordion( "option", "active", 0 );
56 equal( element.accordion( "option", "active" ), 0 );
57 state( element, 1, 0, 0 );
59 element.find( ".ui-accordion-header" ).eq( 1 ).click();
60 equal( element.accordion( "option", "active" ), 1 );
61 state( element, 0, 1, 0 );
63 element.accordion( "option", "active", 10 );
64 equal( element.accordion( "option", "active" ), 1 );
65 state( element, 0, 1, 0 );
68 test( "{ active: -Number }", function() {
70 var element = $( "#list1" ).accordion({
73 equal( element.accordion( "option", "active" ), 2 );
74 state( element, 0, 0, 1 );
76 element.accordion( "option", "active", -2 );
77 equal( element.accordion( "option", "active" ), 1 );
78 state( element, 0, 1, 0 );
80 element.accordion( "option", "active", -10 );
81 equal( element.accordion( "option", "active" ), 1 );
82 state( element, 0, 1, 0 );
84 element.accordion( "option", "active", -3 );
85 equal( element.accordion( "option", "active" ), 0 );
86 state( element, 1, 0, 0 );
89 test( "{ animate: false }", function() {
91 var element = $( "#list1" ).accordion({
94 panels = element.find( ".ui-accordion-content" ),
95 animate = $.fn.animate;
96 $.fn.animate = function() {
97 ok( false, ".animate() called" );
100 ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
101 element.accordion( "option", "active", 1 );
102 ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
103 ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
104 $.fn.animate = animate;
107 asyncTest( "{ animate: Number }", function() {
109 var element = $( "#list1" ).accordion({
112 panels = element.find( ".ui-accordion-content" ),
113 animate = $.fn.animate;
114 // called twice (both panels)
115 $.fn.animate = function( props, options ) {
116 equal( options.duration, 100, "correct duration" );
117 equal( options.easing, undefined, "default easing" );
118 animate.apply( this, arguments );
121 ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
122 element.accordion( "option", "active", 1 );
123 panels.promise().done(function() {
124 ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
125 ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
126 $.fn.animate = animate;
131 asyncTest( "{ animate: String }", function() {
133 var element = $( "#list1" ).accordion({
136 panels = element.find( ".ui-accordion-content" ),
137 animate = $.fn.animate;
138 // called twice (both panels)
139 $.fn.animate = function( props, options ) {
140 equal( options.duration, undefined, "default duration" );
141 equal( options.easing, "linear", "correct easing" );
142 animate.apply( this, arguments );
145 ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
146 element.accordion( "option", "active", 1 );
147 panels.promise().done(function() {
148 ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
149 ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
150 $.fn.animate = animate;
155 asyncTest( "{ animate: {} }", function() {
157 var element = $( "#list1" ).accordion({
160 panels = element.find( ".ui-accordion-content" ),
161 animate = $.fn.animate;
162 // called twice (both panels)
163 $.fn.animate = function( props, options ) {
164 equal( options.duration, undefined, "default duration" );
165 equal( options.easing, undefined, "default easing" );
166 animate.apply( this, arguments );
169 ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
170 element.accordion( "option", "active", 1 );
171 panels.promise().done(function() {
172 ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
173 ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
174 $.fn.animate = animate;
179 asyncTest( "{ animate: { duration, easing } }", function() {
181 var element = $( "#list1" ).accordion({
182 animate: { duration: 100, easing: "linear" }
184 panels = element.find( ".ui-accordion-content" ),
185 animate = $.fn.animate;
186 // called twice (both panels)
187 $.fn.animate = function( props, options ) {
188 equal( options.duration, 100, "correct duration" );
189 equal( options.easing, "linear", "correct easing" );
190 animate.apply( this, arguments );
193 ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
194 element.accordion( "option", "active", 1 );
195 panels.promise().done(function() {
196 ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
197 ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
198 $.fn.animate = animate;
203 asyncTest( "{ animate: { duration, easing } }, animate down", function() {
205 var element = $( "#list1" ).accordion({
207 animate: { duration: 100, easing: "linear" }
209 panels = element.find( ".ui-accordion-content" ),
210 animate = $.fn.animate;
211 // called twice (both panels)
212 $.fn.animate = function( props, options ) {
213 equal( options.duration, 100, "correct duration" );
214 equal( options.easing, "linear", "correct easing" );
215 animate.apply( this, arguments );
218 ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
219 element.accordion( "option", "active", 0 );
220 panels.promise().done(function() {
221 ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
222 ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
223 $.fn.animate = animate;
228 asyncTest( "{ animate: { duration, easing, down } }, animate down", function() {
230 var element = $( "#list1" ).accordion({
240 panels = element.find( ".ui-accordion-content" ),
241 animate = $.fn.animate;
242 // called twice (both panels)
243 $.fn.animate = function( props, options ) {
244 equal( options.duration, 100, "correct duration" );
245 equal( options.easing, "swing", "correct easing" );
246 animate.apply( this, arguments );
249 ok( panels.eq( 1 ).is( ":visible" ), "first panel visible" );
250 element.accordion( "option", "active", 0 );
251 panels.promise().done(function() {
252 ok( panels.eq( 1 ).is( ":hidden" ), "first panel hidden" );
253 ok( panels.eq( 0 ).is( ":visible" ), "second panel visible" );
254 $.fn.animate = animate;
259 test( "{ collapsible: false }", function() {
261 var element = $( "#list1" ).accordion({
264 element.accordion( "option", "active", false );
265 equal( element.accordion( "option", "active" ), 1 );
266 state( element, 0, 1, 0 );
268 element.find( ".ui-accordion-header" ).eq( 1 ).click();
269 equal( element.accordion( "option", "active" ), 1 );
270 state( element, 0, 1, 0 );
273 test( "{ collapsible: true }", function() {
275 var element = $( "#list1" ).accordion({
280 element.accordion( "option", "active", false );
281 equal( element.accordion( "option", "active" ), false );
282 state( element, 0, 0, 0 );
284 element.accordion( "option", "active", 1 );
285 equal( element.accordion( "option", "active" ), 1 );
286 state( element, 0, 1, 0 );
288 element.find( ".ui-accordion-header" ).eq( 1 ).click();
289 equal( element.accordion( "option", "active" ), false );
290 state( element, 0, 0, 0 );
293 test( "{ event: null }", function() {
295 var element = $( "#list1" ).accordion({
298 state( element, 1, 0, 0 );
300 element.accordion( "option", "active", 1 );
301 equal( element.accordion( "option", "active" ), 1 );
302 state( element, 0, 1, 0 );
304 // ensure default click handler isn't bound
305 element.find( ".ui-accordion-header" ).eq( 2 ).click();
306 equal( element.accordion( "option", "active" ), 1 );
307 state( element, 0, 1, 0 );
310 test( "{ event: custom }", function() {
312 var element = $( "#list1" ).accordion({
313 event: "custom1 custom2"
315 state( element, 1, 0, 0 );
317 element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
318 equal( element.accordion( "option", "active" ), 1 );
319 state( element, 0, 1, 0 );
321 // ensure default click handler isn't bound
322 element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
323 equal( element.accordion( "option", "active" ), 1 );
324 state( element, 0, 1, 0 );
326 element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
327 equal( element.accordion( "option", "active" ), 2 );
328 state( element, 0, 0, 1 );
330 element.accordion( "option", "event", "custom3" );
332 // ensure old event handlers are unbound
333 element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
334 element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom2" );
335 equal( element.accordion( "option", "active" ), 2 );
336 state( element, 0, 0, 1 );
338 element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
339 equal( element.accordion( "option", "active" ), 1 );
340 state( element, 0, 1, 0 );
343 test( "{ header: default }", function() {
345 // default: > li > :first-child,> :not(li):even
347 state( $( "#list1" ).accordion(), 1, 0, 0);
348 // > li > :first-child
349 state( $( "#navigation" ).accordion(), 1, 0, 0);
352 test( "{ header: custom }", function() {
354 var element = $( "#navigationWrapper" ).accordion({
357 element.find( "h2" ).each(function() {
358 ok( $( this ).hasClass( "ui-accordion-header" ) );
360 equal( element.find( ".ui-accordion-header" ).length, 3 );
361 state( element, 1, 0, 0 );
362 element.accordion( "option", "active", 2 );
363 state( element, 0, 0, 1 );
366 test( "{ heightStyle: 'auto' }", function() {
368 var element = $( "#navigation" ).accordion({ heightStyle: "auto" });
369 equalHeight( element, 105 );
372 test( "{ heightStyle: 'content' }", function() {
374 var element = $( "#navigation" ).accordion({ heightStyle: "content" }),
375 sizes = element.find( ".ui-accordion-content" ).map(function() {
376 return $( this ).height();
378 equal( sizes[ 0 ], 75 );
379 equal( sizes[ 1 ], 105 );
380 equal( sizes[ 2 ], 45 );
383 test( "{ heightStyle: 'fill' }", function() {
385 $( "#navigationWrapper" ).height( 500 );
386 var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
387 equalHeight( element, 455 );
390 test( "{ heightStyle: 'fill' } with sibling", function() {
392 $( "#navigationWrapper" ).height( 500 );
393 $( "<p>Lorem Ipsum</p>" )
399 .prependTo( "#navigationWrapper" );
400 var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
401 equalHeight( element , 355 );
404 test( "{ heightStyle: 'fill' } with multiple siblings", function() {
406 $( "#navigationWrapper" ).height( 500 );
407 $( "<p>Lorem Ipsum</p>" )
413 .prependTo( "#navigationWrapper" );
414 $( "<p>Lorem Ipsum</p>" )
421 .prependTo( "#navigationWrapper" );
422 $( "<p>Lorem Ipsum</p>" )
428 .prependTo( "#navigationWrapper" );
429 var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
430 equalHeight( element, 305 );
433 test( "{ icons: false }", function() {
435 var element = $( "#list1" );
436 function icons( on ) {
437 deepEqual( element.find( "span.ui-icon").length, on ? 3 : 0 );
438 deepEqual( element.find( ".ui-accordion-header.ui-accordion-icons" ).length, on ? 3 : 0 );
442 element.accordion( "destroy" ).accordion({
446 element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } );
448 element.accordion( "option", "icons", false );
452 test( "{ icons: hash }", function() {
454 var element = $( "#list1" ).accordion({
455 icons: { activeHeader: "a1", header: "h1" }
457 ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
458 element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
459 ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
460 ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );