libs/js/jquery-mobile-1.1.0/tests/unit/fixedToolbar/fixedToolbar.js

   1 /*
   2  * mobile Fixed Toolbar unit tests
   3  */
   4 (function($){
   5         module('jquery.mobile.fixedToolbar.js');
   6
   7         $( "html" ).height( screen.height * 3 );
   8
   9         function scrollDown(){
  10                 window.scrollTo(0,screen.height );
  11         }
  12
  13         function scrollUp(){
  14                 window.scrollTo(0,0);
  15         }
  16
  17         module("jquery.mobile.fixedToolbar.js", {setup: function() {
  18                 var startTimeout;
  19
  20                 // swallow the inital page change
  21                 stop();
  22                 $(document).one("pagechange", function() {
  23                         clearTimeout(startTimeout);
  24                 });
  25
  26                 startTimeout = setTimeout(start, 1000);
  27         }});
  28
  29
  30         test( "Fixed Header Structural Classes are applied correctly", function(){
  31
  32                 //footer
  33                 ok( !$('#classes-test-a').hasClass('ui-header-fixed'), 'An ordinary header should not have fixed classes');
  34                 ok( $('#classes-test-b').hasClass('ui-header-fixed'), 'An header with data-position=fixed should have ui-header-fixed class');
  35                 ok( $('#classes-test-c').hasClass('ui-header-fullscreen'), 'An header with data-position=fixed and data-fullscreen should have ui-header-fullscreen class');
  36
  37                 //footer
  38                 ok( !$('#classes-test-d').hasClass('ui-footer-fixed'), 'An ordinary footer should not have fixed classes');
  39                 ok( $('#classes-test-e').hasClass('ui-footer-fixed'), 'A footer with data-position=fixed should have ui-footer-fixed class"');
  40                 ok( $('#classes-test-f').hasClass('ui-footer-fullscreen'), 'A footer with data-position=fixed and data-fullscreen should have ui-footer-fullscreen class');
  41
  42                 //parent
  43                 ok( $('#classes-test-b').closest( ".ui-page" ).hasClass( "ui-page-header-fixed" ), "Parent page of a fixed header has class ui-page-header-fixed" );
  44                 ok( $('#classes-test-e').closest( ".ui-page" ).hasClass( "ui-page-footer-fixed" ), "Parent page of a fixed footer has class ui-page-header-fixed" );
  45                 ok( $('#classes-test-c').closest( ".ui-page" ).hasClass( "ui-page-header-fullscreen" ), "Parent page of a fullscreen header has class ui-page-header-fullscreen" );
  46                 ok( $('#classes-test-f').closest( ".ui-page" ).hasClass( "ui-page-footer-fullscreen" ), "Parent page of a fullscreen footer has class ui-page-header-fullscreen" );
  47
  48
  49         });
  50
  51         asyncTest( "Fixed header and footer transition classes are applied correctly", function(){
  52
  53                 expect( 6 );
  54
  55                 $.testHelper.sequence([
  56                         function(){
  57                                 $( '#classes-test-b, #classes-test-g, #classes-test-e,#classes-test-h,#classes-test-i,#classes-test-j, #classes-test-k' ).fixedtoolbar( "hide" );
  58                                 scrollDown();
  59                         },
  60
  61                         function(){
  62                                 //show first
  63                                 $( '#classes-test-b, #classes-test-g, #classes-test-e,#classes-test-h,#classes-test-i,#classes-test-j, #classes-test-k' ).fixedtoolbar( "show" );
  64                         },
  65
  66                         function() {
  67
  68                                 ok( $( '#classes-test-g' ).hasClass('slidedown'), 'The slidedown class should be applied by default');
  69                                 ok( $( '#classes-test-k' ).hasClass('in'), 'The "in" class should be applied for fade transitions');
  70                                 ok( !$( '#classes-test-h' ).hasClass('slidedown'), 'The slidedown class should not be applied when the header has a data-transition of "none"');
  71
  72                                 ok( !$( '#classes-test-h' ).hasClass('in'), 'The "in" class should not be applied when the header has a data-transition of "none"');
  73                                 ok( $( '#classes-test-i' ).hasClass('slidedown'), 'The "slidedown" class should  be applied when the header has a data-transition of "slide"');
  74                                 ok( $( '#classes-test-j' ).hasClass('slideup'), 'The "slideup" class should  be applied when the footer has a data-transition of "slide"');
  75
  76                         },
  77
  78                         function(){
  79                                 scrollUp();
  80                                 start();
  81                                 }
  82                 ], 1000);
  83
  84         });
  85
  86         test( "User zooming is disabled when the header is visible and disablePageZoom is true", function(){
  87                 $.mobile.zoom.enable();
  88                 var defaultZoom = $.mobile.fixedtoolbar.prototype.options.disablePageZoom;
  89                 $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", true );
  90
  91                 $( ".ui-page-active" ).trigger( "pagebeforeshow" );
  92                 ok( !$.mobile.zoom.enabled, "Viewport scaling is disabled before page show." );
  93                 $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", defaultZoom );
  94                 $.mobile.zoom.enable();
  95         });
  96
  97         test( "Meta viewport content is restored to previous state, and zooming renabled, after pagebeforehide", function(){
  98                 $.mobile.zoom.enable( true );
  99                 var defaultZoom = $.mobile.fixedtoolbar.prototype.options.disablePageZoom;
 100                 $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", true );
 101
 102                 $( ".ui-page-active" ).trigger( "pagebeforeshow" );
 103                 ok( !$.mobile.zoom.enabled, "Viewport scaling is disabled before page show." );
 104                 $( ".ui-page-active" ).trigger( "pagebeforehide" );
 105                 ok( $.mobile.zoom.enabled, "Viewport scaling is enabled." );
 106                 $( ".ui-page-active .ui-header-fixed" ).fixedtoolbar("option", "disablePageZoom", defaultZoom );
 107                 $.mobile.zoom.enable( true );
 108         });
 109
 110         test( "User zooming is not disabled when the header is visible and disablePageZoom is false", function(){
 111                 $.mobile.zoom.enable( true );
 112                 var defaultZoom = $.mobile.fixedtoolbar.prototype.options.disablePageZoom;
 113                 $( ".ui-page :jqmData(position='fixed')" ).fixedtoolbar( "option", "disablePageZoom", false );
 114
 115                 $( ".ui-page-active" ).trigger( "pagebeforeshow" );
 116
 117                 ok( $.mobile.zoom.enabled, "Viewport scaling is not disabled before page show." );
 118
 119                 $( ".ui-page :jqmData(position='fixed')" ).fixedtoolbar( "option", "disablePageZoom", defaultZoom );
 120
 121                 $.mobile.zoom.enable( true );
 122         });
 123
 124
 125         asyncTest( "The hide method is working properly", function() {
 126
 127                 expect( 2 );
 128
 129                 $.testHelper.sequence([
 130                         function(){
 131                                 $( '#classes-test-g' ).fixedtoolbar( "show" );
 132                                 scrollDown();
 133                         },
 134
 135                         function() {
 136                                 $( '#classes-test-g' ).fixedtoolbar( "hide" );
 137
 138                                 ok( $( '#classes-test-g' ).hasClass('out'), 'The out class should be applied when hide is called');
 139                         },
 140
 141                         function() {
 142                                 ok( $( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar has the ui-fixed-hidden class applied after hide');
 143                                 $( '#classes-test-g' ).fixedtoolbar( "show" );
 144
 145                         },
 146
 147                         function(){
 148                                 scrollUp();
 149                                 start();
 150                         }
 151
 152                 ], 500);
 153         });
 154
 155
 156
 157         asyncTest( "The show method is working properly", function() {
 158
 159                 expect( 2 );
 160
 161                 $.testHelper.sequence([
 162                         function(){
 163                                 scrollDown();
 164                         },
 165
 166                         function() {
 167                                 $( '#classes-test-g' ).fixedtoolbar( "hide" );
 168                         },
 169
 170                         function() {
 171                                 $( '#classes-test-g' ).fixedtoolbar( "show" );
 172
 173                                 ok( $( '#classes-test-g' ).hasClass('in'), 'The in class should be applied when show is called');
 174                         },
 175
 176                         function() {
 177                                 ok( !$( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does not have the ui-fixed-hidden class applied after show');
 178
 179                         },
 180
 181                         function(){
 182                                 scrollUp();
 183                                 start();
 184                         }
 185                 ], 500);
 186         });
 187
 188
 189         asyncTest( "The toggle method is working properly", function() {
 190
 191                 expect( 3 );
 192
 193                 $.testHelper.sequence([
 194                         function(){
 195                                 scrollDown();
 196                         },
 197
 198                         function(){
 199                                 $( '#classes-test-g' ).fixedtoolbar( "show" );
 200                         },
 201
 202                         function() {
 203                                 ok( !$( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does not have the ui-fixed-hidden class');
 204                                 $( '#classes-test-g' ).fixedtoolbar( "toggle" );
 205                         },
 206
 207                         function() {
 208                                 ok( $( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does have the ui-fixed-hidden class');
 209                                 $( '#classes-test-g' ).fixedtoolbar( "toggle" );
 210                         },
 211
 212                         function() {
 213                                 ok( !$( '#classes-test-g' ).hasClass('ui-fixed-hidden'), 'The toolbar does not have the ui-fixed-hidden class');
 214
 215                         },
 216
 217                         function(){
 218                                 scrollUp();
 219                                 start();
 220                         }
 221
 222                 ], 500);
 223         });
 224
 225
 226         asyncTest( "The persistent headers and footers are working properly", function() {
 227
 228                 expect( 3 );
 229
 230                 $( "#persist-test-b, #persist-test-a" ).page();
 231
 232                 var nextpageheader =  $( "#persist-test-b .ui-header-fixed" ),
 233                         nextpagefooter =  $( "#persist-test-b .ui-footer-fixed" );
 234
 235
 236                 $.testHelper.pageSequence([
 237                         function(){
 238                                 ok( nextpageheader.length && nextpagefooter.length, "next page has fixed header and fixed footer" );
 239                                 $.mobile.changePage( "#persist-test-a" );
 240                         },
 241
 242                         function(){
 243                                 $( "#persist-test-b" )
 244                                         .one( "pagebeforeshow", function(){
 245                                                 ok( nextpageheader.parent( ".ui-mobile-viewport" ).length, "fixed header and footer are now a child of page container" );
 246                                         });
 247
 248                                 $.mobile.changePage( "#persist-test-b" );
 249                         },
 250
 251                         function() {
 252                                 ok( nextpageheader.parent( ".ui-page" ).length, "fixed header and footer are now a child of page again" );
 253                                 $.mobile.changePage( "#default" );
 254                         },
 255
 256                         start
 257                 ]);
 258         });
 259
 260         asyncTest( "The persistent headers should work without a footer", function() {
 261
 262                 expect( 3 );
 263
 264                 $( "#persist-test-c, #persist-test-d" ).page();
 265
 266                 var nextpageheader =  $( "#persist-test-d .ui-header-fixed" );
 267
 268                 $.testHelper.pageSequence([
 269                         function(){
 270                                 ok( nextpageheader.length, "next page has fixed header and fixed footer" );
 271                                 $.mobile.changePage( "#persist-test-c" );
 272                         },
 273
 274                         function(){
 275                                 $( "#persist-test-d" )
 276                                         .one( "pagebeforeshow", function(){
 277                                                 same( nextpageheader.parent()[0], $.mobile.pageContainer[0], "fixed header is now a child of page container" );
 278                                         });
 279
 280                                 $.mobile.changePage( "#persist-test-d" );
 281                         },
 282
 283                         function() {
 284                                 same( nextpageheader.parent()[0], $.mobile.activePage[0], "fixed header is now a child of page again" );
 285                                 $.mobile.changePage( "#default" );
 286                         },
 287
 288                         start
 289                 ]);
 290         });
 291
 292         asyncTest( "The persistent footers should work without a header", function() {
 293
 294                 expect( 3 );
 295
 296                 $( "#persist-test-e, #persist-test-f" ).page();
 297
 298                 var nextpagefooter =  $( "#persist-test-f .ui-footer-fixed" );
 299
 300                 $.testHelper.pageSequence([
 301                         function(){
 302                                 ok( nextpagefooter.length, "next page has fixed footer and fixed footer" );
 303                                 $.mobile.changePage( "#persist-test-e" );
 304                         },
 305
 306                         function(){
 307                                 $( "#persist-test-f" )
 308                                         .one( "pagebeforeshow", function(){
 309                                                 same( nextpagefooter.parent()[0], $.mobile.pageContainer[0], "fixed footer is now a child of page container" );
 310                                         });
 311
 312                                 $.mobile.changePage( "#persist-test-f" );
 313                         },
 314
 315                         function() {
 316                                 same( nextpagefooter.parent()[0], $.mobile.activePage[0], "fixed footer is now a child of page again" );
 317                                 $.mobile.changePage( "#default" );
 318                         },
 319
 320                         start
 321                 ]);
 322         });
 323
 324
 325         var asyncTestFooterAndHeader = function( pageSelector, areHidden ) {
 326                 $.testHelper.pageSequence([
 327                         function() {
 328                                 $.mobile.changePage( pageSelector );
 329                         },
 330
 331                         function() {
 332                                 var $footer = $.mobile.activePage.find( ".ui-footer" ),
 333                                         $header = $.mobile.activePage.find( ".ui-header" ),
 334                                         hidden = areHidden ? "hidden" : "visible";
 335
 336                                 equal( $footer.length, 1, "there should be one footer" );
 337                                 equal( $header.length, 1, "there should be one header" );
 338
 339                                 equal( $footer.hasClass( "ui-fixed-hidden" ), areHidden, "the footer should be " + hiddenStr );
 340                                 equal( $header.hasClass( "ui-fixed-hidden" ), areHidden, "the header should be " + hiddenStr );
 341
 342                                 $.mobile.changePage( "#default" );
 343                         },
 344
 345                         start
 346                 ]);
 347         };
 348
 349         asyncTest( "data-visible-on-page-show hides toolbars when false", function() {
 350                 asyncTestFooterAndHeader( "#page-show-visible-false", false );
 351         });
 352
 353         asyncTest( "data-visible-on-page-show shows toolbars when explicitly true", function() {
 354                 asyncTestFooterAndHeader( "#page-show-visible-true", true );
 355         });
 356
 357         asyncTest( "data-visible-on-page-show shows toolbars when undefined", function() {
 358                 asyncTestFooterAndHeader( "#page-show-visible-undefined", true );
 359         });
 360 })(jQuery);