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

   1 (function( $ ) {
   2
   3 var state = TestHelpers.tabs.state;
   4
   5 module( "tabs: events" );
   6
   7 test( "create", function() {
   8         expect( 10 );
   9
  10         var element = $( "#tabs1" ),
  11                 tabs = element.find( "ul li" ),
  12                 panels = element.children( "div" );
  13
  14         element.tabs({
  15                 create: function( event, ui ) {
  16                         equal( ui.tab.length, 1, "tab length" );
  17                         strictEqual( ui.tab[ 0 ], tabs[ 0 ], "tab" );
  18                         equal( ui.panel.length, 1, "panel length" );
  19                         strictEqual( ui.panel[ 0 ], panels[ 0 ], "panel" );
  20                 }
  21         });
  22         element.tabs( "destroy" );
  23
  24         element.tabs({
  25                 active: 2,
  26                 create: function( event, ui ) {
  27                         equal( ui.tab.length, 1, "tab length" );
  28                         strictEqual( ui.tab[ 0 ], tabs[ 2 ], "tab" );
  29                         equal( ui.panel.length, 1, "panel length" );
  30                         strictEqual( ui.panel[ 0 ], panels[ 2 ], "panel" );
  31                 }
  32         });
  33         element.tabs( "destroy" );
  34
  35         element.tabs({
  36                 active: false,
  37                 collapsible: true,
  38                 create: function( event, ui ) {
  39                         equal( ui.tab.length, 0, "tab length" );
  40                         equal( ui.panel.length, 0, "panel length" );
  41                 }
  42         });
  43         element.tabs( "destroy" );
  44 });
  45
  46 test( "beforeActivate", function() {
  47         expect( 38 );
  48
  49         var element = $( "#tabs1" ).tabs({
  50                         active: false,
  51                         collapsible: true
  52                 }),
  53                 tabs = element.find( ".ui-tabs-nav li" ),
  54                 anchors = tabs.find( ".ui-tabs-anchor" ),
  55                 panels = element.find( ".ui-tabs-panel" );
  56
  57         // from collapsed
  58         element.one( "tabsbeforeactivate", function( event, ui ) {
  59                 ok( !( "originalEvent" in event ), "originalEvent" );
  60                 equal( ui.oldTab.length, 0, "oldTab length" );
  61                 equal( ui.oldPanel.length, 0, "oldPanel length" );
  62                 equal( ui.newTab.length, 1, "newTab length" );
  63                 strictEqual( ui.newTab[ 0 ], tabs[ 0 ], "newTab" );
  64                 equal( ui.newPanel.length, 1, "newPanel length" );
  65                 strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" );
  66                 state( element, 0, 0, 0 );
  67         });
  68         element.tabs( "option", "active", 0 );
  69         state( element, 1, 0, 0 );
  70
  71         // switching tabs
  72         element.one( "tabsbeforeactivate", function( event, ui ) {
  73                 equal( event.originalEvent.type, "click", "originalEvent" );
  74                 equal( ui.oldTab.length, 1, "oldTab length" );
  75                 strictEqual( ui.oldTab[ 0 ], tabs[ 0 ], "oldTab" );
  76                 equal( ui.oldPanel.length, 1, "oldPanel length" );
  77                 strictEqual( ui.oldPanel[ 0 ], panels[ 0 ], "oldPanel" );
  78                 equal( ui.newTab.length, 1, "newTab length" );
  79                 strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" );
  80                 equal( ui.newPanel.length, 1, "newPanel length" );
  81                 strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
  82                 state( element, 1, 0, 0 );
  83         });
  84         anchors.eq( 1 ).click();
  85         state( element, 0, 1, 0 );
  86
  87         // collapsing
  88         element.one( "tabsbeforeactivate", function( event, ui ) {
  89                 ok( !( "originalEvent" in event ), "originalEvent" );
  90                 equal( ui.oldTab.length, 1, "oldTab length" );
  91                 strictEqual( ui.oldTab[ 0 ], tabs[ 1 ], "oldTab" );
  92                 equal( ui.oldPanel.length, 1, "oldPanel length" );
  93                 strictEqual( ui.oldPanel[ 0 ], panels[ 1 ], "oldPanel" );
  94                 equal( ui.newTab.length, 0, "newTab length" );
  95                 equal( ui.newPanel.length, 0, "newPanel length" );
  96                 state( element, 0, 1, 0 );
  97         });
  98         element.tabs( "option", "active", false );
  99         state( element, 0, 0, 0 );
 100
 101         // prevent activation
 102         element.one( "tabsbeforeactivate", function( event, ui ) {
 103                 ok( !( "originalEvent" in event ), "originalEvent" );
 104                 equal( ui.oldTab.length, 0, "oldTab length" );
 105                 equal( ui.oldPanel.length, 0, "oldTab" );
 106                 equal( ui.newTab.length, 1, "newTab length" );
 107                 strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" );
 108                 equal( ui.newPanel.length, 1, "newPanel length" );
 109                 strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
 110                 event.preventDefault();
 111                 state( element, 0, 0, 0 );
 112         });
 113         element.tabs( "option", "active", 1 );
 114         state( element, 0, 0, 0 );
 115 });
 116
 117 test( "activate", function() {
 118         expect( 30 );
 119
 120         var element = $( "#tabs1" ).tabs({
 121                         active: false,
 122                         collapsible: true
 123                 }),
 124                 tabs = element.find( ".ui-tabs-nav li" ),
 125                 anchors = element.find( ".ui-tabs-anchor" ),
 126                 panels = element.find( ".ui-tabs-panel" );
 127
 128         // from collapsed
 129         element.one( "tabsactivate", function( event, ui ) {
 130                 ok( !( "originalEvent" in event ), "originalEvent" );
 131                 equal( ui.oldTab.length, 0, "oldTab length" );
 132                 equal( ui.oldPanel.length, 0, "oldPanel length" );
 133                 equal( ui.newTab.length, 1, "newTab length" );
 134                 strictEqual( ui.newTab[ 0 ], tabs[ 0 ], "newTab" );
 135                 equal( ui.newPanel.length, 1, "newPanel length" );
 136                 strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" );
 137                 state( element, 1, 0, 0 );
 138         });
 139         element.tabs( "option", "active", 0 );
 140         state( element, 1, 0, 0 );
 141
 142         // switching tabs
 143         element.one( "tabsactivate", function( event, ui ) {
 144                 equal( event.originalEvent.type, "click", "originalEvent" );
 145                 equal( ui.oldTab.length, 1, "oldTab length" );
 146                 strictEqual( ui.oldTab[ 0 ], tabs[ 0 ], "oldTab" );
 147                 equal( ui.oldPanel.length, 1, "oldPanel length" );
 148                 strictEqual( ui.oldPanel[ 0 ], panels[ 0 ], "oldPanel" );
 149                 equal( ui.newTab.length, 1, "newTab length" );
 150                 strictEqual( ui.newTab[ 0 ], tabs[ 1 ], "newTab" );
 151                 equal( ui.newPanel.length, 1, "newPanel length" );
 152                 strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
 153                 state( element, 0, 1, 0 );
 154         });
 155         anchors.eq( 1 ).click();
 156         state( element, 0, 1, 0 );
 157
 158         // collapsing
 159         element.one( "tabsactivate", function( event, ui ) {
 160                 ok( !( "originalEvent" in event ), "originalEvent" );
 161                 equal( ui.oldTab.length, 1, "oldTab length" );
 162                 strictEqual( ui.oldTab[ 0 ], tabs[ 1 ], "oldTab" );
 163                 equal( ui.oldPanel.length, 1, "oldPanel length" );
 164                 strictEqual( ui.oldPanel[ 0 ], panels[ 1 ], "oldPanel" );
 165                 equal( ui.newTab.length, 0, "newTab length" );
 166                 equal( ui.newPanel.length, 0, "newPanel length" );
 167                 state( element, 0, 0, 0 );
 168         });
 169         element.tabs( "option", "active", false );
 170         state( element, 0, 0, 0 );
 171
 172         // prevent activation
 173         element.one( "tabsbeforeactivate", function( event ) {
 174                 ok( true, "tabsbeforeactivate" );
 175                 event.preventDefault();
 176         });
 177         element.one( "tabsactivate", function() {
 178                 ok( false, "tabsactivate" );
 179         });
 180         element.tabs( "option", "active", 1 );
 181 });
 182
 183 test( "beforeLoad", function() {
 184         expect( 32 );
 185
 186         var tab, panelId, panel,
 187                 element = $( "#tabs2" );
 188
 189         // init
 190         element.one( "tabsbeforeload", function( event, ui ) {
 191                 tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
 192                 panelId = tab.attr( "aria-controls" );
 193                 panel = $( "#" + panelId );
 194
 195                 ok( !( "originalEvent" in event ), "originalEvent" );
 196                 ok( "abort" in ui.jqXHR, "jqXHR" );
 197                 ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
 198                 equal( ui.tab.length, 1, "tab length" );
 199                 strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 200                 equal( ui.panel.length, 1, "panel length" );
 201                 strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 202                 equal( ui.panel.html(), "", "panel html" );
 203                 event.preventDefault();
 204                 state( element, 0, 0, 1, 0, 0 );
 205         });
 206         element.tabs({ active: 2 });
 207         state( element, 0, 0, 1, 0, 0 );
 208         equal( panel.html(), "", "panel html after" );
 209         element.tabs( "destroy" );
 210
 211         // .option()
 212         element.one( "tabsbeforeload", function( event, ui ) {
 213                 tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
 214                 panelId = tab.attr( "aria-controls" );
 215                 panel = $( "#" + panelId );
 216
 217                 ok( !( "originalEvent" in event ), "originalEvent" );
 218                 ok( "abort" in ui.jqXHR, "jqXHR" );
 219                 ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
 220                 equal( ui.tab.length, 1, "tab length" );
 221                 strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 222                 equal( ui.panel.length, 1, "panel length" );
 223                 strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 224                 equal( ui.panel.html(), "", "panel html" );
 225                 event.preventDefault();
 226                 state( element, 1, 0, 0, 0, 0 );
 227         });
 228         element.tabs();
 229         element.tabs( "option", "active", 2 );
 230         state( element, 0, 0, 1, 0, 0 );
 231         equal( panel.html(), "", "panel html after" );
 232
 233         // click, change panel content
 234         element.one( "tabsbeforeload", function( event, ui ) {
 235                 tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
 236                 panelId = tab.attr( "aria-controls" );
 237                 panel = $( "#" + panelId );
 238
 239                 equal( event.originalEvent.type, "click", "originalEvent" );
 240                 ok( "abort" in ui.jqXHR, "jqXHR" );
 241                 ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
 242                 equal( ui.tab.length, 1, "tab length" );
 243                 strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 244                 equal( ui.panel.length, 1, "panel length" );
 245                 strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 246                 ui.panel.html( "<p>testing</p>" );
 247                 event.preventDefault();
 248                 state( element, 0, 0, 1, 0, 0 );
 249         });
 250         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).click();
 251         state( element, 0, 0, 0, 1, 0 );
 252         // .toLowerCase() is needed to convert <P> to <p> in old IEs
 253         equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" );
 254 });
 255
 256 asyncTest( "load", function() {
 257         expect( 21 );
 258
 259         var tab, panelId, panel,
 260                 element = $( "#tabs2" );
 261
 262         // init
 263         element.one( "tabsload", function( event, ui ) {
 264                 tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
 265                 panelId = tab.attr( "aria-controls" );
 266                 panel = $( "#" + panelId );
 267
 268                 ok( !( "originalEvent" in event ), "originalEvent" );
 269                 equal( ui.tab.length, 1, "tab length" );
 270                 strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 271                 equal( ui.panel.length, 1, "panel length" );
 272                 strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 273                 equal( ui.panel.find( "p" ).length, 1, "panel html" );
 274                 state( element, 0, 0, 1, 0, 0 );
 275                 tabsload1();
 276         });
 277         element.tabs({ active: 2 });
 278
 279         function tabsload1() {
 280                 // .option()
 281                 element.one( "tabsload", function( event, ui ) {
 282                         tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
 283                         panelId = tab.attr( "aria-controls" );
 284                         panel = $( "#" + panelId );
 285
 286                         ok( !( "originalEvent" in event ), "originalEvent" );
 287                         equal( ui.tab.length, 1, "tab length" );
 288                         strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 289                         equal( ui.panel.length, 1, "panel length" );
 290                         strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 291                         equal( ui.panel.find( "p" ).length, 1, "panel html" );
 292                         state( element, 0, 0, 0, 1, 0 );
 293                         tabsload2();
 294                 });
 295                 element.tabs( "option", "active", 3 );
 296         }
 297
 298         function tabsload2() {
 299                 // click, change panel content
 300                 element.one( "tabsload", function( event, ui ) {
 301                         tab = element.find( ".ui-tabs-nav li" ).eq( 4 );
 302                         panelId = tab.attr( "aria-controls" );
 303                         panel = $( "#" + panelId );
 304
 305                         equal( event.originalEvent.type, "click", "originalEvent" );
 306                         equal( ui.tab.length, 1, "tab length" );
 307                         strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
 308                         equal( ui.panel.length, 1, "panel length" );
 309                         strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
 310                         equal( ui.panel.find( "p" ).length, 1, "panel html" );
 311                         state( element, 0, 0, 0, 0, 1 );
 312                         start();
 313                 });
 314                 element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click();
 315         }
 316 });
 317
 318 }( jQuery ) );