2 * mobile navigation unit tests
5 var perspective = "viewport-flip",
6 transitioning = "ui-mobile-viewport-transitioning",
7 animationCompleteFn = $.fn.animationComplete,
9 //TODO centralize class names?
10 transitionTypes = "in out fade slide flip reverse pop",
12 isTransitioning = function(page){
13 return $.grep(transitionTypes.split(" "), function(className, i){
14 return page.hasClass(className);
18 isTransitioningIn = function(page){
19 return page.hasClass("in") && isTransitioning(page);
22 //animationComplete callback queue
25 finishPageTransition = function(){
26 callbackQueue.pop()();
29 clearPageTransitionStack = function(){
31 var checkTransitionStack = function(){
32 if(callbackQueue.length>0) {
33 setTimeout(function(){
34 finishPageTransition();
35 checkTransitionStack();
42 checkTransitionStack();
46 clearUrlHistory = function(){
47 $.mobile.urlHistory.stack = [];
48 $.mobile.urlHistory.activeIndex = 0;
52 module('jquery.mobile.navigation.js', {
54 //stub to prevent class removal
55 $.fn.animationComplete = function(callback){
56 callbackQueue.unshift(callback);
59 clearPageTransitionStack();
64 // unmock animation complete
65 $.fn.animationComplete = animationCompleteFn;
69 test( "changePage applys perspective class to mobile viewport for flip", function(){
70 $("#foo > a").click();
72 ok($("body").hasClass(perspective), "has perspective class");
75 test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
76 $("#bar > a").click();
78 ok(!$("body").hasClass(perspective), "doesn't have perspective class");
81 test( "changePage applys transition class to mobile viewport for default transition", function(){
82 $("#baz > a").click();
84 ok($("body").hasClass(transitioning), "has transitioning class");
87 test( "explicit transition preferred for page navigation reversal (ie back)", function(){
88 $("#fade-trans > a").click();
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");
104 test( "default transition is slide", function(){
105 $("#default-trans > a").click();
107 setTimeout(function(){
108 ok($("#no-trans").hasClass("slide"), "has slide class");
113 test( "changePage queues requests", function(){
114 var firstPage = $("#foo"),
115 secondPage = $("#bar");
117 $.mobile.changePage(firstPage);
118 $.mobile.changePage(secondPage);
121 setTimeout(function(){
122 ok(isTransitioningIn(firstPage), "first page begins transition");
123 ok(!isTransitioningIn(secondPage), "second page doesn't transition yet");
125 finishPageTransition();
127 setTimeout(function(){
128 ok(!isTransitioningIn(firstPage), "first page transition should be complete");
129 ok(isTransitioningIn(secondPage), "second page should begin transitioning");
135 test( "default transition is pop for a dialog", function(){
138 setTimeout(function(){
139 $("#default-trans-dialog > a").click();
141 ok($("#no-trans-dialog").hasClass("pop"), "expected the pop class to be present but instead was " + $("#no-trans-dialog").attr('class'));
147 test( "animationComplete return value", function(){
148 $.fn.animationComplete = animationCompleteFn;
149 equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]);