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

   1 (function( $ ) {
   2
   3 var disabled = TestHelpers.tabs.disabled,
   4         state = TestHelpers.tabs.state;
   5
   6 module( "tabs: methods" );
   7
   8 test( "destroy", function() {
   9         expect( 2 );
  10         domEqual( "#tabs1", function() {
  11                 $( "#tabs1" ).tabs().tabs( "destroy" );
  12         });
  13         domEqual( "#tabs2", function() {
  14                 $( "#tabs2" ).tabs().tabs( "destroy" );
  15         });
  16 });
  17
  18 test( "enable", function() {
  19         expect( 8 );
  20
  21         var element = $( "#tabs1" ).tabs({ disabled: true });
  22         disabled( element, true );
  23         element.tabs( "enable" );
  24         disabled( element, false );
  25         element.tabs( "destroy" );
  26
  27         element.tabs({ disabled: [ 0, 1 ] });
  28         disabled( element, [ 0, 1 ] );
  29         element.tabs( "enable" );
  30         disabled( element, false );
  31 });
  32
  33 test( "enable( index )", function() {
  34         expect( 10 );
  35
  36         var element = $( "#tabs1" ).tabs({ disabled: true });
  37         disabled( element, true );
  38         // fully disabled -> partially disabled
  39         element.tabs( "enable", 1 );
  40         disabled( element, [ 0, 2 ] );
  41         // partially disabled -> partially disabled
  42         element.tabs( "enable", 2 );
  43         disabled( element, [ 0 ] );
  44         // already enabled tab, no change
  45         element.tabs( "enable", 2 );
  46         disabled( element, [ 0 ] );
  47         // partially disabled -> fully enabled
  48         element.tabs( "enable", 0 );
  49         disabled( element, false );
  50 });
  51
  52 test( "disable", function() {
  53         expect( 8 );
  54
  55         var element = $( "#tabs1" ).tabs({ disabled: false });
  56         disabled( element, false );
  57         element.tabs( "disable" );
  58         disabled( element, true );
  59         element.tabs( "destroy" );
  60
  61         element.tabs({ disabled: [ 0, 1 ] });
  62         disabled( element, [ 0, 1 ] );
  63         element.tabs( "disable" );
  64         disabled( element, true );
  65 });
  66
  67 test( "disable( index )", function() {
  68         expect( 10 );
  69
  70         var element = $( "#tabs1" ).tabs({ disabled: false });
  71         disabled( element, false );
  72         // fully enabled -> partially disabled
  73         element.tabs( "disable", 1 );
  74         disabled( element, [ 1 ] );
  75         // partially disabled -> partially disabled
  76         element.tabs( "disable", 2 );
  77         disabled( element, [ 1, 2 ] );
  78         // already disabled tab, no change
  79         element.tabs( "disable", 2 );
  80         disabled( element, [ 1, 2 ] );
  81         // partially disabled -> fully disabled
  82         element.tabs( "disable", 0 );
  83         disabled( element, true );
  84 });
  85
  86 test( "refresh", function() {
  87         expect( 27 );
  88
  89         var element = $( "#tabs1" ).tabs();
  90         state( element, 1, 0, 0 );
  91         disabled( element, false );
  92
  93         // disable tab via markup
  94         element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" );
  95         element.tabs( "refresh" );
  96         state( element, 1, 0, 0 );
  97         disabled( element, [ 1 ] );
  98
  99         // add remote tab
 100         element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" );
 101         element.tabs( "refresh" );
 102         state( element, 1, 0, 0, 0 );
 103         disabled( element, [ 1 ] );
 104         equal( element.find( "#" + $( "#newTab" ).attr( "aria-controls" ) ).length, 1,
 105                 "panel added for remote tab" );
 106
 107         // remove all tabs
 108         element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove();
 109         element.tabs( "refresh" );
 110         state( element );
 111         equal( element.tabs( "option", "active" ), false, "no active tab" );
 112
 113         // add tabs
 114         element.find( ".ui-tabs-nav" )
 115                 .append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" )
 116                 .append( "<li><a href='#newTab3'>new 3</a></li>" )
 117                 .append( "<li><a href='#newTab4'>new 4</a></li>" )
 118                 .append( "<li><a href='#newTab5'>new 5</a></li>" );
 119         element
 120                 .append( "<div id='newTab2'>new 2</div>" )
 121                 .append( "<div id='newTab3'>new 3</div>" )
 122                 .append( "<div id='newTab4'>new 4</div>" )
 123                 .append( "<div id='newTab5'>new 5</div>" );
 124         element.tabs( "refresh" );
 125         state( element, 0, 0, 0, 0 );
 126         disabled( element, [ 0 ] );
 127
 128         // activate third tab
 129         element.tabs( "option", "active", 2 );
 130         state( element, 0, 0, 1, 0 );
 131         disabled( element, [ 0 ] );
 132
 133         // remove fourth tab, third tab should stay active
 134         element.find( ".ui-tabs-nav li" ).eq( 3 ).remove();
 135         element.find( ".ui-tabs-panel" ).eq( 3 ).remove();
 136         element.tabs( "refresh" );
 137         state( element, 0, 0, 1 );
 138         disabled( element, [ 0 ] );
 139
 140         // remove third (active) tab, second tab should become active
 141         element.find( ".ui-tabs-nav li" ).eq( 2 ).remove();
 142         element.find( ".ui-tabs-panel" ).eq( 2 ).remove();
 143         element.tabs( "refresh" );
 144         state( element, 0, 1 );
 145         disabled( element, [ 0 ] );
 146
 147         // remove first tab, previously active tab (now first) should stay active
 148         element.find( ".ui-tabs-nav li" ).eq( 0 ).remove();
 149         element.find( ".ui-tabs-panel" ).eq( 0 ).remove();
 150         element.tabs( "refresh" );
 151         state( element, 1 );
 152         disabled( element, false );
 153 });
 154
 155 test( "refresh - looping", function() {
 156         expect( 6 );
 157
 158         var element = $( "#tabs1" ).tabs({
 159                 disabled: [ 0 ],
 160                 active: 1
 161         });
 162         state( element, 0, 1, 0 );
 163         disabled( element, [ 0 ] );
 164
 165         // remove active, jump to previous
 166         // previous is disabled, just back one more
 167         // reached first tab, move to end
 168         // activate last tab
 169         element.find( ".ui-tabs-nav li" ).eq( 2 ).remove();
 170         element.tabs( "refresh" );
 171         state( element, 0, 1 );
 172         disabled( element, [ 0 ] );
 173 });
 174
 175 asyncTest( "load", function() {
 176         expect( 30 );
 177
 178         var element = $( "#tabs2" ).tabs();
 179
 180         // load content of inactive tab
 181         // useful for preloading content with custom caching
 182         element.one( "tabsbeforeload", function( event, ui ) {
 183                 var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 184                         panelId = tab.attr( "aria-controls" ),
 185                         panel = $( "#" + panelId );
 186
 187                 ok( !( "originalEvent" in event ), "originalEvent" );
 188                 equal( ui.tab.length, 1, "tab length" );
 189                 strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 190                 equal( ui.panel.length, 1, "panel length" );
 191                 strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 192                 state( element, 1, 0, 0, 0, 0 );
 193         });
 194         element.one( "tabsload", function( event, ui ) {
 195                 // TODO: remove wrapping in 2.0
 196                 var uiTab = $( ui.tab ),
 197                         uiPanel = $( ui.panel ),
 198                         tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 199                         panelId = tab.attr( "aria-controls" ),
 200                         panel = $( "#" + panelId );
 201
 202                 ok( !( "originalEvent" in event ), "originalEvent" );
 203                 equal( uiTab.length, 1, "tab length" );
 204                 strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" );
 205                 equal( uiPanel.length, 1, "panel length" );
 206                 strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" );
 207                 equal( uiPanel.find( "p" ).length, 1, "panel html" );
 208                 state( element, 1, 0, 0, 0, 0 );
 209                 setTimeout( tabsload1, 100 );
 210         });
 211         element.tabs( "load", 3 );
 212         state( element, 1, 0, 0, 0, 0 );
 213
 214         function tabsload1() {
 215                 // no need to test details of event (tested in events tests)
 216                 element.one( "tabsbeforeload", function() {
 217                         ok( true, "tabsbeforeload invoked" );
 218                 });
 219                 element.one( "tabsload", function() {
 220                         ok( true, "tabsload invoked" );
 221                         setTimeout( tabsload2, 100 );
 222                 });
 223                 element.tabs( "option", "active", 3 );
 224                 state( element, 0, 0, 0, 1, 0 );
 225         }
 226
 227         function tabsload2() {
 228                 // reload content of active tab
 229                 element.one( "tabsbeforeload", function( event, ui ) {
 230                         var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 231                                 panelId = tab.attr( "aria-controls" ),
 232                                 panel = $( "#" + panelId );
 233
 234                         ok( !( "originalEvent" in event ), "originalEvent" );
 235                         equal( ui.tab.length, 1, "tab length" );
 236                         strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 237                         equal( ui.panel.length, 1, "panel length" );
 238                         strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 239                         state( element, 0, 0, 0, 1, 0 );
 240                 });
 241                 element.one( "tabsload", function( event, ui ) {
 242                         // TODO: remove wrapping in 2.0
 243                         var uiTab = $( ui.tab ),
 244                                 uiPanel = $( ui.panel ),
 245                                 tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 246                                 panelId = tab.attr( "aria-controls" ),
 247                                 panel = $( "#" + panelId );
 248
 249                         ok( !( "originalEvent" in event ), "originalEvent" );
 250                         equal( uiTab.length, 1, "tab length" );
 251                         strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" );
 252                         equal( uiPanel.length, 1, "panel length" );
 253                         strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" );
 254                         state( element, 0, 0, 0, 1, 0 );
 255                         start();
 256                 });
 257                 element.tabs( "load", 3 );
 258                 state( element, 0, 0, 0, 1, 0 );
 259         }
 260 });
 261
 262 test( "widget", function() {
 263         expect( 2 );
 264         var element = $( "#tabs1" ).tabs(),
 265                 widgetElement = element.tabs( "widget" );
 266         equal( widgetElement.length, 1, "one element" );
 267         strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
 268 });
 269
 270 }( jQuery ) );