Navigation: Make sure pagecontainer uses the correct transition

jquery-archive · Jun 9, 2014 · 8ff42d3 · 8ff42d3
1 parent 0ef499e
commit 8ff42d3
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/tests/integration/pagecontainer/transition-choice-tests.html b/tests/integration/pagecontainer/transition-choice-tests.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Popup Test Suite</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../js/requirejs.config.js"></script>
+	<script src="../../../js/jquery.tag.inserter.js"></script>
+	<script src="../../jquery.setNameSpace.js"></script>
+	<script src="../../../tests/jquery.testHelper.js"></script>
+
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css"/>
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
+	<link rel="stylesheet" href="../../jqm-tests.css"/>
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[ "init" ],
+			[
+				"transition_choice_core.js"
+			]
+		]);
+	</script>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body>
+	<div id="qunit"></div>
+
+	<div data-nstest-role="page" id="a">
+		<a id="go-to-b" data-nstest-transition="flip" href="#b">Go to b</a>
+	</div>
+
+	<div data-nstest-role="page" id="b">
+		<a id="go-to-c" data-nstest-transition="slide" href="#c">Go to c</a>
+	</div>
+
+	<div data-nstest-role="page" id="c">
+	</div>
+</body>
+</html>
diff --git a/tests/integration/pagecontainer/transition_choice_core.js b/tests/integration/pagecontainer/transition_choice_core.js
@@ -0,0 +1,71 @@
+( function() {
+
+var origChange, callSequence;
+
+module( "Pagecontainer transition choice", {
+	setup: function() {
+		callSequence = [];
+		origChange = $.mobile.pagecontainer.prototype.change;
+		$.mobile.pagecontainer.prototype.change = function( url, options ) {
+			callSequence.push({
+				transition: options.transition,
+				reverse: !!( options.reverse )
+			});
+			return origChange.apply( this, arguments );
+		};
+	},
+	teardown: function() {
+		$.mobile.pagecontainer.prototype.change = origChange;
+	}
+});
+
+asyncTest( "Pagecontainer chooses correct transition", function() {
+	debugger;
+
+	var pageContainer = $( ":mobile-pagecontainer" );
+
+	$.testHelper.pageSequence([
+		function() {
+			$( "#go-to-b" ).click();
+		},
+		function() {
+			$( "#go-to-c" ).click();
+		},
+		function() {
+			pageContainer.pagecontainer( "back" );
+		},
+		function() {
+			pageContainer.pagecontainer( "forward" );
+		},
+		function() {
+			pageContainer.pagecontainer( "back" );
+		},
+		function() {
+			pageContainer.pagecontainer( "back" );
+		},
+		function() {
+			pageContainer.pagecontainer( "forward" );
+		},
+		function() {
+			pageContainer.pagecontainer( "back" );
+		},
+		function() {
+			deepEqual( callSequence,
+				[
+					{ transition: "flip", reverse: false },
+					{ transition: "slide", reverse: false },
+					{ transition: "slide", reverse: true },
+					{ transition: "slide", reverse: false },
+					{ transition: "slide", reverse: true },
+					{ transition: "flip", reverse: true },
+					{ transition: "flip", reverse: false },
+					{ transition: "flip", reverse: true }
+				],
+				"call sequence has resulted in the correct transitions" );
+
+			start();
+		}
+	]);
+});
+
+})();