third-party/jquery-ui-1.10.2/tests/unit/accordion/accordion_options.js

   1 (function( $ ) {
   2
   3 var equalHeight = TestHelpers.accordion.equalHeight,
   4         setupTeardown = TestHelpers.accordion.setupTeardown,
   5         state = TestHelpers.accordion.state;
   6
   7 module( "accordion: options", setupTeardown() );
   8
   9 test( "{ active: default }", function() {
  10         expect( 2 );
  11         var element = $( "#list1" ).accordion();
  12         equal( element.accordion( "option", "active" ), 0 );
  13         state( element, 1, 0, 0 );
  14 });
  15
  16 test( "{ active: null }", function() {
  17         expect( 2 );
  18         var element = $( "#list1" ).accordion({
  19                 active: null
  20         });
  21         equal( element.accordion( "option", "active" ), 0 );
  22         state( element, 1, 0, 0 );
  23 });
  24
  25 test( "{ active: false }", function() {
  26         expect( 7 );
  27         var element = $( "#list1" ).accordion({
  28                 active: false,
  29                 collapsible: true
  30         });
  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 );
  34
  35         element.accordion( "option", "collapsible", false );
  36         state( element, 1, 0, 0 );
  37         equal( element.accordion( "option", "active" ), 0 );
  38
  39         element.accordion( "destroy" );
  40         element.accordion({
  41                 active: false
  42         });
  43         state( element, 1, 0, 0 );
  44         strictEqual( element.accordion( "option", "active" ), 0 );
  45 });
  46
  47 test( "{ active: Number }", function() {
  48         expect( 8 );
  49         var element = $( "#list1" ).accordion({
  50                 active: 2
  51         });
  52         equal( element.accordion( "option", "active" ), 2 );
  53         state( element, 0, 0, 1 );
  54
  55         element.accordion( "option", "active", 0 );
  56         equal( element.accordion( "option", "active" ), 0 );
  57         state( element, 1, 0, 0 );
  58
  59         element.find( ".ui-accordion-header" ).eq( 1 ).click();
  60         equal( element.accordion( "option", "active" ), 1 );
  61         state( element, 0, 1, 0 );
  62
  63         element.accordion( "option", "active", 10 );
  64         equal( element.accordion( "option", "active" ), 1 );
  65         state( element, 0, 1, 0 );
  66 });
  67
  68 test( "{ active: -Number }", function() {
  69         expect( 8 );
  70         var element = $( "#list1" ).accordion({
  71                 active: -1
  72         });
  73         equal( element.accordion( "option", "active" ), 2 );
  74         state( element, 0, 0, 1 );
  75
  76         element.accordion( "option", "active", -2 );
  77         equal( element.accordion( "option", "active" ), 1 );
  78         state( element, 0, 1, 0 );
  79
  80         element.accordion( "option", "active", -10 );
  81         equal( element.accordion( "option", "active" ), 1 );
  82         state( element, 0, 1, 0 );
  83
  84         element.accordion( "option", "active", -3 );
  85         equal( element.accordion( "option", "active" ), 0 );
  86         state( element, 1, 0, 0 );
  87 });
  88
  89 test( "{ animate: false }", function() {
  90         expect( 3 );
  91         var element = $( "#list1" ).accordion({
  92                         animate: false
  93                 }),
  94                 panels = element.find( ".ui-accordion-content" ),
  95                 animate = $.fn.animate;
  96         $.fn.animate = function() {
  97                 ok( false, ".animate() called" );
  98         };
  99
 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;
 105 });
 106
 107 asyncTest( "{ animate: Number }", function() {
 108         expect( 7 );
 109         var element = $( "#list1" ).accordion({
 110                         animate: 100
 111                 }),
 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 );
 119         };
 120
 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;
 127                 start();
 128         });
 129 });
 130
 131 asyncTest( "{ animate: String }", function() {
 132         expect( 7 );
 133         var element = $( "#list1" ).accordion({
 134                         animate: "linear"
 135                 }),
 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 );
 143         };
 144
 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;
 151                 start();
 152         });
 153 });
 154
 155 asyncTest( "{ animate: {} }", function() {
 156         expect( 7 );
 157         var element = $( "#list1" ).accordion({
 158                         animate: {}
 159                 }),
 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 );
 167         };
 168
 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;
 175                 start();
 176         });
 177 });
 178
 179 asyncTest( "{ animate: { duration, easing } }", function() {
 180         expect( 7 );
 181         var element = $( "#list1" ).accordion({
 182                         animate: { duration: 100, easing: "linear" }
 183                 }),
 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 );
 191         };
 192
 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;
 199                 start();
 200         });
 201 });
 202
 203 asyncTest( "{ animate: { duration, easing } }, animate down", function() {
 204         expect( 7 );
 205         var element = $( "#list1" ).accordion({
 206                         active: 1,
 207                         animate: { duration: 100, easing: "linear" }
 208                 }),
 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 );
 216         };
 217
 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;
 224                 start();
 225         });
 226 });
 227
 228 asyncTest( "{ animate: { duration, easing, down } }, animate down", function() {
 229         expect( 7 );
 230         var element = $( "#list1" ).accordion({
 231                         active: 1,
 232                         animate: {
 233                                 duration: 100,
 234                                 easing: "linear",
 235                                 down: {
 236                                         easing: "swing"
 237                                 }
 238                         }
 239                 }),
 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 );
 247         };
 248
 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;
 255                 start();
 256         });
 257 });
 258
 259 test( "{ collapsible: false }", function() {
 260         expect( 4 );
 261         var element = $( "#list1" ).accordion({
 262                 active: 1
 263         });
 264         element.accordion( "option", "active", false );
 265         equal( element.accordion( "option", "active" ), 1 );
 266         state( element, 0, 1, 0 );
 267
 268         element.find( ".ui-accordion-header" ).eq( 1 ).click();
 269         equal( element.accordion( "option", "active" ), 1 );
 270         state( element, 0, 1, 0 );
 271 });
 272
 273 test( "{ collapsible: true }", function() {
 274         expect( 6 );
 275         var element = $( "#list1" ).accordion({
 276                 active: 1,
 277                 collapsible: true
 278         });
 279
 280         element.accordion( "option", "active", false );
 281         equal( element.accordion( "option", "active" ), false );
 282         state( element, 0, 0, 0 );
 283
 284         element.accordion( "option", "active", 1 );
 285         equal( element.accordion( "option", "active" ), 1 );
 286         state( element, 0, 1, 0 );
 287
 288         element.find( ".ui-accordion-header" ).eq( 1 ).click();
 289         equal( element.accordion( "option", "active" ), false );
 290         state( element, 0, 0, 0 );
 291 });
 292
 293 test( "{ event: null }", function() {
 294         expect( 5 );
 295         var element = $( "#list1" ).accordion({
 296                 event: null
 297         });
 298         state( element, 1, 0, 0 );
 299
 300         element.accordion( "option", "active", 1 );
 301         equal( element.accordion( "option", "active" ), 1 );
 302         state( element, 0, 1, 0 );
 303
 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 );
 308 });
 309
 310 test( "{ event: custom }", function() {
 311         expect( 11 );
 312         var element = $( "#list1" ).accordion({
 313                 event: "custom1 custom2"
 314         });
 315         state( element, 1, 0, 0 );
 316
 317         element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
 318         equal( element.accordion( "option", "active" ), 1 );
 319         state( element, 0, 1, 0 );
 320
 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 );
 325
 326         element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
 327         equal( element.accordion( "option", "active" ), 2 );
 328         state( element, 0, 0, 1 );
 329
 330         element.accordion( "option", "event", "custom3" );
 331
 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 );
 337
 338         element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
 339         equal( element.accordion( "option", "active" ), 1 );
 340         state( element, 0, 1, 0 );
 341 });
 342
 343 test( "{ header: default }", function() {
 344         expect( 2 );
 345         // default: > li > :first-child,> :not(li):even
 346         // > :not(li):even
 347         state( $( "#list1" ).accordion(), 1, 0, 0);
 348         // > li > :first-child
 349         state( $( "#navigation" ).accordion(), 1, 0, 0);
 350 });
 351
 352 test( "{ header: custom }", function() {
 353         expect( 6 );
 354         var element = $( "#navigationWrapper" ).accordion({
 355                 header: "h2"
 356         });
 357         element.find( "h2" ).each(function() {
 358                 ok( $( this ).hasClass( "ui-accordion-header" ) );
 359         });
 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 );
 364 });
 365
 366 test( "{ heightStyle: 'auto' }", function() {
 367         expect( 3 );
 368         var element = $( "#navigation" ).accordion({ heightStyle: "auto" });
 369         equalHeight( element, 105 );
 370 });
 371
 372 test( "{ heightStyle: 'content' }", function() {
 373         expect( 3 );
 374         var element = $( "#navigation" ).accordion({ heightStyle: "content" }),
 375                 sizes = element.find( ".ui-accordion-content" ).map(function() {
 376                         return $( this ).height();
 377                 }).get();
 378         equal( sizes[ 0 ], 75 );
 379         equal( sizes[ 1 ], 105 );
 380         equal( sizes[ 2 ], 45 );
 381 });
 382
 383 test( "{ heightStyle: 'fill' }", function() {
 384         expect( 3 );
 385         $( "#navigationWrapper" ).height( 500 );
 386         var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
 387         equalHeight( element, 455 );
 388 });
 389
 390 test( "{ heightStyle: 'fill' } with sibling", function() {
 391         expect( 3 );
 392         $( "#navigationWrapper" ).height( 500 );
 393         $( "<p>Lorem Ipsum</p>" )
 394                 .css({
 395                         height: 50,
 396                         marginTop: 20,
 397                         marginBottom: 30
 398                 })
 399                 .prependTo( "#navigationWrapper" );
 400         var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
 401         equalHeight( element , 355 );
 402 });
 403
 404 test( "{ heightStyle: 'fill' } with multiple siblings", function() {
 405         expect( 3 );
 406         $( "#navigationWrapper" ).height( 500 );
 407         $( "<p>Lorem Ipsum</p>" )
 408                 .css({
 409                         height: 50,
 410                         marginTop: 20,
 411                         marginBottom: 30
 412                 })
 413                 .prependTo( "#navigationWrapper" );
 414         $( "<p>Lorem Ipsum</p>" )
 415                 .css({
 416                         height: 50,
 417                         marginTop: 20,
 418                         marginBottom: 30,
 419                         position: "absolute"
 420                 })
 421                 .prependTo( "#navigationWrapper" );
 422         $( "<p>Lorem Ipsum</p>" )
 423                 .css({
 424                         height: 25,
 425                         marginTop: 10,
 426                         marginBottom: 15
 427                 })
 428                 .prependTo( "#navigationWrapper" );
 429         var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
 430         equalHeight( element, 305 );
 431 });
 432
 433 test( "{ icons: false }", function() {
 434         expect( 8 );
 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 );
 439         }
 440         element.accordion();
 441         icons( true );
 442         element.accordion( "destroy" ).accordion({
 443                 icons: false
 444         });
 445         icons( false );
 446         element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } );
 447         icons( true );
 448         element.accordion( "option", "icons", false );
 449         icons( false );
 450 });
 451
 452 test( "{ icons: hash }", function() {
 453         expect( 3 );
 454         var element = $( "#list1" ).accordion({
 455                 icons: { activeHeader: "a1", header: "h1" }
 456         });
 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" ) );
 461 });
 462
 463 }( jQuery ) );