libs/js/jquery-mobile-1.0.1pre/tests/unit/navigation/navigation_transitions.js

   1 /*
   2  * mobile navigation unit tests
   3  */
   4 (function($){
   5         var perspective = "viewport-flip",
   6                         transitioning = "ui-mobile-viewport-transitioning",
   7                         animationCompleteFn = $.fn.animationComplete,
   8
   9                         //TODO centralize class names?
  10                         transitionTypes = "in out fade slide flip reverse pop",
  11
  12                         isTransitioning = function(page){
  13                                 return $.grep(transitionTypes.split(" "), function(className, i){
  14                                         return page.hasClass(className);
  15                                 }).length > 0;
  16                         },
  17
  18                         isTransitioningIn = function(page){
  19                                 return page.hasClass("in") && isTransitioning(page);
  20                         },
  21
  22                         //animationComplete callback queue
  23                         callbackQueue = [],
  24
  25                         finishPageTransition = function(){
  26                                 callbackQueue.pop()();
  27                         },
  28
  29                         clearPageTransitionStack = function(){
  30                                 stop();
  31                                 var checkTransitionStack = function(){
  32                                         if(callbackQueue.length>0) {
  33                                                 setTimeout(function(){
  34                                                         finishPageTransition();
  35                                                         checkTransitionStack();
  36                                                 },0);
  37                                         }
  38                                         else {
  39                                                 start();
  40                                         }
  41                                 };
  42                                 checkTransitionStack();
  43                         },
  44
  45                         //wipe all urls
  46                         clearUrlHistory = function(){
  47                                 $.mobile.urlHistory.stack = [];
  48                                 $.mobile.urlHistory.activeIndex = 0;
  49                         };
  50
  51
  52         module('jquery.mobile.navigation.js', {
  53                 setup: function(){
  54                         //stub to prevent class removal
  55                         $.fn.animationComplete = function(callback){
  56                                 callbackQueue.unshift(callback);
  57                         };
  58
  59                         clearPageTransitionStack();
  60                         clearUrlHistory();
  61                 },
  62
  63                 teardown: function(){
  64                         // unmock animation complete
  65                         $.fn.animationComplete = animationCompleteFn;
  66                 }
  67         });
  68
  69         test( "changePage applys perspective class to mobile viewport for flip", function(){
  70                 $("#foo > a").click();
  71
  72                 ok($("body").hasClass(perspective), "has perspective class");
  73         });
  74
  75         test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
  76                 $("#bar > a").click();
  77
  78                 ok(!$("body").hasClass(perspective), "doesn't have perspective class");
  79         });
  80
  81         test( "changePage applys transition class to mobile viewport for default transition", function(){
  82                 $("#baz > a").click();
  83
  84                 ok($("body").hasClass(transitioning), "has transitioning class");
  85         });
  86
  87         test( "explicit transition preferred for page navigation reversal (ie back)", function(){
  88                 $("#fade-trans > a").click();
  89                 stop();
  90                 setTimeout(function(){
  91                         finishPageTransition();
  92                         $("#flip-trans > a").click();
  93                         setTimeout(function(){
  94                                 finishPageTransition();
  95                                 $("#fade-trans > a").click();
  96                                 setTimeout(function(){
  97                                         ok($("#flip-trans").hasClass("fade"), "has fade class");
  98                                         start();
  99                                 },0);
 100                         },0);
 101                 },0);
 102         });
 103
 104         test( "default transition is slide", function(){
 105                 $("#default-trans > a").click();
 106                 stop();
 107                 setTimeout(function(){
 108                         ok($("#no-trans").hasClass("slide"), "has slide class");
 109                         start();
 110                 },0);
 111         });
 112
 113         test( "changePage queues requests", function(){
 114                 var firstPage = $("#foo"),
 115                         secondPage = $("#bar");
 116
 117                 $.mobile.changePage(firstPage);
 118                 $.mobile.changePage(secondPage);
 119
 120                 stop();
 121                 setTimeout(function(){
 122                         ok(isTransitioningIn(firstPage), "first page begins transition");
 123                         ok(!isTransitioningIn(secondPage), "second page doesn't transition yet");
 124
 125                         finishPageTransition();
 126
 127                         setTimeout(function(){
 128                                 ok(!isTransitioningIn(firstPage), "first page transition should be complete");
 129                                 ok(isTransitioningIn(secondPage), "second page should begin transitioning");
 130                                 start();
 131                         },0);
 132                 },0);
 133         });
 134
 135         test( "default transition is pop for a dialog", function(){
 136                 expect( 1 );
 137                 stop();
 138                 setTimeout(function(){
 139                         $("#default-trans-dialog > a").click();
 140
 141                         ok($("#no-trans-dialog").hasClass("pop"), "expected the pop class to be present but instead was " + $("#no-trans-dialog").attr('class'));
 142
 143                         start();
 144                 }, 900);
 145         });
 146
 147         test( "animationComplete return value", function(){
 148                 $.fn.animationComplete = animationCompleteFn;
 149                 equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]);
 150         });
 151 })(jQuery);