third-party/jquery-ui-1.10.2/tests/unit/tabs/tabs_options.js

   1 (function( $ ) {
   2
   3 var disabled = TestHelpers.tabs.disabled,
   4         equalHeight = TestHelpers.tabs.equalHeight,
   5         state = TestHelpers.tabs.state;
   6
   7 module( "tabs: options" );
   8
   9 test( "{ active: default }", function() {
  10         expect( 6 );
  11
  12         var element = $( "#tabs1" ).tabs();
  13         equal( element.tabs( "option", "active" ), 0, "should be 0 by default" );
  14         state( element, 1, 0, 0 );
  15         element.tabs( "destroy" );
  16
  17         location.hash = "#fragment-3";
  18         element = $( "#tabs1" ).tabs();
  19         equal( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
  20         state( element, 0, 0, 1 );
  21         element.tabs( "destroy" );
  22
  23         location.hash = "#custom-id";
  24         element = $( "#tabs2" ).tabs();
  25         equal( element.tabs( "option", "active" ), 3, "should be 3 based on URL" );
  26         state( element, 0, 0, 0, 1, 0 );
  27         element.tabs( "destroy" );
  28         location.hash = "#";
  29 });
  30
  31 test( "{ active: false }", function() {
  32         expect( 7 );
  33
  34         var element = $( "#tabs1" ).tabs({
  35                 active: false,
  36                 collapsible: true
  37         });
  38         state( element, 0, 0, 0 );
  39         equal( element.find( ".ui-tabs-nav .ui-state-active" ).length, 0, "no tabs selected" );
  40         strictEqual( element.tabs( "option", "active" ), false );
  41
  42         element.tabs( "option", "collapsible", false );
  43         state( element, 1, 0, 0 );
  44         equal( element.tabs( "option", "active" ), 0 );
  45
  46         element.tabs( "destroy" );
  47         element.tabs({
  48                 active: false
  49         });
  50         state( element, 1, 0, 0 );
  51         strictEqual( element.tabs( "option", "active" ), 0 );
  52 });
  53
  54 test( "{ active: Number }", function() {
  55         expect( 8 );
  56
  57         var element = $( "#tabs1" ).tabs({
  58                 active: 2
  59         });
  60         equal( element.tabs( "option", "active" ), 2 );
  61         state( element, 0, 0, 1 );
  62
  63         element.tabs( "option", "active", 0 );
  64         equal( element.tabs( "option", "active" ), 0 );
  65         state( element, 1, 0, 0 );
  66
  67         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click();
  68         equal( element.tabs( "option", "active" ), 1 );
  69         state( element, 0, 1, 0 );
  70
  71         element.tabs( "option", "active", 10 );
  72         equal( element.tabs( "option", "active" ), 1 );
  73         state( element, 0, 1, 0 );
  74 });
  75
  76 test( "{ active: -Number }", function() {
  77         expect( 8 );
  78
  79         var element = $( "#tabs1" ).tabs({
  80                 active: -1
  81         });
  82         equal( element.tabs( "option", "active" ), 2 );
  83         state( element, 0, 0, 1 );
  84
  85         element.tabs( "option", "active", -2 );
  86         equal( element.tabs( "option", "active" ), 1 );
  87         state( element, 0, 1, 0 );
  88
  89         element.tabs( "option", "active", -10 );
  90         equal( element.tabs( "option", "active" ), 1 );
  91         state( element, 0, 1, 0 );
  92
  93         element.tabs( "option", "active", -3 );
  94         equal( element.tabs( "option", "active" ), 0 );
  95         state( element, 1, 0, 0 );
  96 });
  97
  98 test( "active - mismatched tab/panel order", function() {
  99         expect( 3 );
 100
 101         location.hash = "#tabs7-2";
 102         var element = $( "#tabs7" ).tabs();
 103         equal( element.tabs( "option", "active" ), 1, "should be 1 based on URL" );
 104         state( element, 0, 1 );
 105         element.tabs( "option", "active", 0 );
 106         state( element, 1, 0 );
 107         location.hash = "#";
 108 });
 109
 110 test( "{ collapsible: false }", function() {
 111         expect( 4 );
 112
 113         var element = $( "#tabs1" ).tabs({
 114                 active: 1
 115         });
 116         element.tabs( "option", "active", false );
 117         equal( element.tabs( "option", "active" ), 1 );
 118         state( element, 0, 1, 0 );
 119
 120         element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click();
 121         equal( element.tabs( "option", "active" ), 1 );
 122         state( element, 0, 1, 0 );
 123 });
 124
 125 test( "{ collapsible: true }", function() {
 126         expect( 6 );
 127
 128         var element = $( "#tabs1" ).tabs({
 129                 active: 1,
 130                 collapsible: true
 131         });
 132
 133         element.tabs( "option", "active", false );
 134         equal( element.tabs( "option", "active" ), false );
 135         state( element, 0, 0, 0 );
 136
 137         element.tabs( "option", "active", 1 );
 138         equal( element.tabs( "option", "active" ), 1 );
 139         state( element, 0, 1, 0 );
 140
 141         element.find( ".ui-state-active .ui-tabs-anchor" ).click();
 142         equal( element.tabs( "option", "active" ), false );
 143         state( element, 0, 0, 0 );
 144 });
 145
 146 test( "disabled", function() {
 147         expect( 10 );
 148
 149         // fully enabled by default
 150         var element = $( "#tabs1" ).tabs();
 151         disabled( element, false );
 152
 153         // disable single tab
 154         element.tabs( "option", "disabled", [ 1 ] );
 155         disabled( element, [ 1 ] );
 156
 157         // disabled active tab
 158         element.tabs( "option", "disabled", [ 0, 1 ] );
 159         disabled( element, [ 0, 1 ] );
 160
 161         // disable all tabs
 162         element.tabs( "option", "disabled", [ 0, 1, 2 ] );
 163         disabled( element, true );
 164
 165         // enable all tabs
 166         element.tabs( "option", "disabled", [] );
 167         disabled( element, false );
 168 });
 169
 170 test( "{ event: null }", function() {
 171         expect( 5 );
 172
 173         var element = $( "#tabs1" ).tabs({
 174                 event: null
 175         });
 176         state( element, 1, 0, 0 );
 177
 178         element.tabs( "option", "active", 1 );
 179         equal( element.tabs( "option", "active" ), 1 );
 180         state( element, 0, 1, 0 );
 181
 182         // ensure default click handler isn't bound
 183         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).click();
 184         equal( element.tabs( "option", "active" ), 1 );
 185         state( element, 0, 1, 0 );
 186 });
 187
 188 test( "{ event: custom }", function() {
 189         expect( 11 );
 190
 191         var element = $( "#tabs1" ).tabs({
 192                 event: "custom1 custom2"
 193         });
 194         state( element, 1, 0, 0 );
 195
 196         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
 197         equal( element.tabs( "option", "active" ), 1 );
 198         state( element, 0, 1, 0 );
 199
 200         // ensure default click handler isn't bound
 201         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" );
 202         equal( element.tabs( "option", "active" ), 1 );
 203         state( element, 0, 1, 0 );
 204
 205         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "custom2" );
 206         equal( element.tabs( "option", "active" ), 2 );
 207         state( element, 0, 0, 1 );
 208
 209         element.tabs( "option", "event", "custom3" );
 210
 211         // ensure old event handlers are unbound
 212         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
 213         equal( element.tabs( "option", "active" ), 2 );
 214         state( element, 0, 0, 1 );
 215
 216         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" );
 217         equal( element.tabs( "option", "active" ), 1 );
 218         state( element, 0, 1, 0 );
 219 });
 220
 221 test( "{ heightStyle: 'auto' }", function() {
 222         expect( 2 );
 223         var element = $( "#tabs8" ).tabs({ heightStyle: "auto" });
 224         equalHeight( element, 45 );
 225 });
 226
 227 test( "{ heightStyle: 'content' }", function() {
 228         expect( 2 );
 229         var element = $( "#tabs8" ).tabs({ heightStyle: "content" }),
 230                 sizes = element.find( ".ui-tabs-panel" ).map(function() {
 231                         return $( this ).height();
 232                 }).get();
 233         equal( sizes[ 0 ], 45 );
 234         equal( sizes[ 1 ], 15 );
 235 });
 236
 237 test( "{ heightStyle: 'fill' }", function() {
 238         expect( 4 );
 239         $( "#tabs8Wrapper" ).height( 500 );
 240         var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
 241         equalHeight( element, 485 );
 242         element.tabs( "destroy" );
 243
 244         element = $( "#tabs8" ).css({
 245                 "border": "1px solid black",
 246                 "padding": "1px 0"
 247         });
 248         element.tabs({ heightStyle: "fill" });
 249         equalHeight( element, 481 );
 250 });
 251
 252 test( "{ heightStyle: 'fill' } with sibling", function() {
 253         expect( 2 );
 254         $( "#tabs8Wrapper" ).height( 500 );
 255         $( "<p>Lorem Ipsum</p>" )
 256                 .css({
 257                         height: 50,
 258                         marginTop: 20,
 259                         marginBottom: 30
 260                 })
 261                 .prependTo( "#tabs8Wrapper" );
 262         var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
 263         equalHeight( element, 385 );
 264 });
 265
 266 test( "{ heightStyle: 'fill' } with multiple siblings", function() {
 267         expect( 2 );
 268         $( "#tabs8Wrapper" ).height( 500 );
 269         $( "<p>Lorem Ipsum</p>" )
 270                 .css({
 271                         height: 50,
 272                         marginTop: 20,
 273                         marginBottom: 30
 274                 })
 275                 .prependTo( "#tabs8Wrapper" );
 276         $( "<p>Lorem Ipsum</p>" )
 277                 .css({
 278                         height: 50,
 279                         marginTop: 20,
 280                         marginBottom: 30,
 281                         position: "absolute"
 282                 })
 283                 .prependTo( "#tabs8Wrapper" );
 284         $( "<p>Lorem Ipsum</p>" )
 285                 .css({
 286                         height: 25,
 287                         marginTop: 10,
 288                         marginBottom: 15
 289                 })
 290                 .prependTo( "#tabs8Wrapper" );
 291         var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
 292         equalHeight( element, 335 );
 293 });
 294
 295 test( "hide and show: false", function() {
 296         expect( 3 );
 297         var element = $( "#tabs1" ).tabs({
 298                         show: false,
 299                         hide: false
 300                 }),
 301                 widget = element.data( "ui-tabs" ),
 302                 panels = element.find( ".ui-tabs-panel" );
 303         widget._show = function() {
 304                 ok( false, "_show() called" );
 305         };
 306         widget._hide = function() {
 307                 ok( false, "_hide() called" );
 308         };
 309
 310         ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
 311         element.tabs( "option", "active", 1 );
 312         ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
 313         ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
 314 });
 315
 316 asyncTest( "hide and show - animation", function() {
 317         expect( 5 );
 318         var element = $( "#tabs1" ).tabs({
 319                         show: "drop",
 320                         hide: 2000
 321                 }),
 322                 widget = element.data( "ui-tabs" ),
 323                 panels = element.find( ".ui-tabs-panel" );
 324         widget._show = function( element, options, callback ) {
 325                 strictEqual( element[ 0 ], panels[ 1 ], "correct element in _show()" );
 326                 equal( options, "drop", "correct options in _show()" );
 327                 setTimeout(function() {
 328                         callback();
 329                 }, 1 );
 330         };
 331         widget._hide = function( element, options, callback ) {
 332                 strictEqual( element[ 0 ], panels[ 0 ], "correct element in _hide()" );
 333                 equal( options, 2000, "correct options in _hide()" );
 334                 setTimeout(function() {
 335                         callback();
 336                         start();
 337                 }, 1 );
 338         };
 339
 340         ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
 341         element.tabs( "option", "active", 1 );
 342 });
 343
 344
 345 }( jQuery ) );