libs/js/jquery-mobile-1.2.0/tests/unit/navigation/navigation_transitions.js

   1 /*
   2  * mobile navigation unit tests
   3  */
   4 (function($){
   5         var perspective,
   6                         transitioning = "ui-mobile-viewport-transitioning",
   7                         animationCompleteFn = $.fn.animationComplete,
   8                         defaultMaxTrans = $.mobile.maxTransitionWidth,
   9
  10                         //TODO centralize class names?
  11                         transitionTypes = "in out fade slide flip reverse pop",
  12
  13                         isTransitioning = function(page){
  14                                 return $.grep(transitionTypes.split(" "), function(className, i){
  15                                         return page.hasClass(className);
  16                                 }).length > 0;
  17                         },
  18
  19                         isTransitioningIn = function(page){
  20                                 return page.hasClass("in") && isTransitioning(page);
  21                         },
  22
  23                         disableMaxTransWidth = function(){
  24                                 $.mobile.maxTransitionWidth = false;
  25                         },
  26
  27                         enableMaxTransWidth = function(){
  28                                 $.mobile.maxTransitionWidth = defaultMaxTrans;
  29                         },
  30
  31                         //animationComplete callback queue
  32                         fromQueue = [],
  33                         toQueue = [],
  34
  35                         resetQueues = function(){
  36                                 fromQueue = [];
  37                                 toQueue = [];
  38                         },
  39
  40                         onFromComplete = function( f ){
  41                                 fromQueue.push( f );
  42                         },
  43
  44                         onToComplete = function( f ){
  45                                 toQueue.push( f );
  46                         },
  47
  48
  49                         //wipe all urls
  50                         clearUrlHistory = function(){
  51                                 $.mobile.urlHistory.stack = [];
  52                                 $.mobile.urlHistory.activeIndex = 0;
  53                         };
  54
  55
  56         if( !$.support.cssTransform3d  ) {
  57                 perspective = "viewport-fade";
  58   } else {
  59     perspective = "viewport-flip";
  60   }
  61
  62         module('jquery.mobile.navigation.js', {
  63                 setup: function(){
  64
  65
  66                         // disable this option so we can test transitions regardless of window width
  67                         disableMaxTransWidth();
  68
  69                         //stub to allow callback before function is returned to transition handler
  70                         $.fn.animationComplete = function( callback ){
  71                                 animationCompleteFn.call( this, function(){
  72                                         var queue = $(this).is(".out") ? fromQueue : toQueue;
  73                                         for( var i = 0, il = queue.length; i < il; i++ ){
  74                                                 queue.pop()( this );
  75                                         }
  76                                         callback();
  77                                 });
  78
  79                                 return this;
  80                         };
  81
  82                         resetQueues();
  83                         clearUrlHistory();
  84
  85       if ( location.hash !== "#harmless-default-page" ) {
  86                                 stop();
  87
  88                                 $(document).one("pagechange", function() {
  89                                         start();
  90                                 } );
  91
  92                                 location.hash = "#harmless-default-page";
  93                         }
  94                 },
  95
  96                 teardown: function(){
  97                         // unmock animation complete
  98                         $.fn.animationComplete = animationCompleteFn;
  99                         enableMaxTransWidth();
 100                 }
 101         });
 102
 103         /*
 104         NOTES:
 105         Our default transition handler now has either one or two animationComplete calls - two if there are two pages in play (from and to)
 106         To is required, so each async function must call start() onToComplete, not onFromComplete.
 107         */
 108         asyncTest( "changePage applies perspective class to mobile viewport for flip", function(){
 109                 expect(1);
 110
 111                 $.testHelper.pageSequence([
 112                         function() {
 113                                 $.mobile.changePage("#foo");
 114                         },
 115
 116                         function() {
 117                                 onToComplete( function( el ) {
 118                                         ok($("body").hasClass(perspective), "has viewport-flip or viewport-fade based on 3d transform");
 119                                         start();
 120                                 });
 121
 122                                 $("#foo > a").first().click();
 123                         }
 124                 ]);
 125         });
 126
 127         asyncTest( "changePage applies transition class to mobile viewport for default transition", function(){
 128                 expect(1);
 129                 $.testHelper.pageSequence([
 130                         function() {
 131                                 $.mobile.changePage("#baz");
 132                         },
 133
 134                         function() {
 135                                 onToComplete( function( el ){
 136                                         ok($("body").hasClass(transitioning), "has transitioning class");
 137                                         start();
 138                                 });
 139
 140                                 $("#baz > a").click();
 141                         }
 142                 ]);
 143         });
 144
 145         asyncTest( "explicit transition preferred for page navigation reversal (ie back)", function(){
 146                 expect( 1 );
 147
 148                 onToComplete(function(){
 149                         $("#flip-trans > a").click();
 150                         onToComplete(function(){
 151                                 $("#fade-trans > a").click();
 152                                 onToComplete(function(){
 153                                         ok($("#flip-trans").hasClass("fade"), "has fade class");
 154                                         start();
 155                                 });
 156                         });
 157                 });
 158
 159                 $("#fade-trans > a").click();
 160         });
 161
 162         asyncTest( "default transition is fade", function(){
 163                 onToComplete(function(){
 164                         ok($("#no-trans").hasClass("fade"), "has fade class");
 165                         start();
 166                 })
 167
 168                 $("#default-trans > a").click();
 169         });
 170
 171         asyncTest( "changePage queues requests", function(){
 172                 expect(4)
 173                 var firstPage = $("#foo"),
 174                         secondPage = $("#bar");
 175
 176                 $.mobile.changePage(firstPage);
 177                 $.mobile.changePage(secondPage);
 178
 179                 onToComplete(function(){
 180                         ok(isTransitioningIn(firstPage), "first page begins transition");
 181                         ok(!isTransitioningIn(secondPage), "second page doesn't transition yet");
 182                         onToComplete(function(){
 183                                 ok(!isTransitioningIn(firstPage), "first page transition should be complete");
 184                                 ok(isTransitioningIn(secondPage), "second page should begin transitioning");
 185                                 start();
 186
 187                         });
 188                 });
 189         });
 190
 191         asyncTest( "default transition is pop for a dialog", function(){
 192                 var defaultTransition = "pop";
 193
 194                 if( !$.support.cssTransform3d ){
 195                         defaultTransition = "fade";
 196                 }
 197
 198                 expect( 1 );
 199                 onToComplete(function(){
 200                         ok( $("#no-trans-dialog").hasClass(defaultTransition), "has pop class" );
 201                         start();
 202                 });
 203
 204                 $("#default-trans-dialog > a").click();
 205         });
 206
 207         test( "animationComplete return value", function(){
 208                 $.fn.animationComplete = animationCompleteFn;
 209                 equal($("#foo").animationComplete(function(){})[0], $("#foo")[0]);
 210         });
 211
 212
 213         // reusable function for a few tests below
 214         function testTransitionMaxWidth( val, expected ){
 215                 expect( 1 );
 216
 217                 $.mobile.maxTransitionWidth = val;
 218
 219                 var transitionOccurred = false;
 220
 221                 onToComplete(function(){
 222                         transitionOccurred = true;
 223                 });
 224
 225
 226                 return setTimeout(function(){
 227                         ok( transitionOccurred === expected, (expected ? "" : "no ") + "transition occurred" );
 228                         start();
 229                 }, 5000);
 230
 231                 $.mobile.changePage( $(".ui-page:not(.ui-page-active)").first() );
 232
 233         }
 234
 235         asyncTest( "maxTransitionWidth property disables transitions when value is less than browser width", function(){
 236                 testTransitionMaxWidth( $( window ).width() - 1, false );
 237         });
 238
 239         asyncTest( "maxTransitionWidth property disables transitions when value is false", function(){
 240                 testTransitionMaxWidth( false, false );
 241         });
 242 })(jQuery);