Toolbar: Test addition of back button to external toolbar

jquery-archive · Feb 27, 2014 · bc3660f · bc3660f
1 parent 81a020d
commit bc3660f
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 0 deletions.
diff --git a/tests/integration/toolbar/external-toolbar-tests.html b/tests/integration/toolbar/external-toolbar-tests.html
@@ -0,0 +1,55 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery Mobile Toolbar 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>
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[
+				"widgets/toolbar",
+				"jquery.mobile.buttonMarkup"
+			],
+			[ "jquery.mobile.init" ],
+			[ "external_toolbar_core.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="../../swarminject.js"></script>
+</head>
+<body>
+
+	<div id="qunit"></div>
+
+	<div id="header" data-nstest-role="header" data-nstest-add-back-btn="true">
+		<h1>Header</h1>
+	</div>
+	<div data-nstest-role="page">
+		<div class="ui-content" role="main">
+			<a href="#page2" id="go-to-page-2">Go to page 2</a>
+		</div>
+	</div>
+	<div data-nstest-role="page" id="page2">
+		<div data-nstest-role="content">
+			<a href="#page3" id="go-to-page-3">Go to page 3</a>
+			<p>Content</p>
+		</div>
+	</div>
+	<div data-nstest-role="page" id="page3">
+		<div data-nstest-role="content">
+			<p>Content</p>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/tests/integration/toolbar/external_toolbar_core.js b/tests/integration/toolbar/external_toolbar_core.js
@@ -0,0 +1,43 @@
+asyncTest( "Back button added to external toolbar", function() {
+	$( "#header" ).toolbar();
+	$.testHelper.pageSequence([
+		function() {
+			$( "#go-to-page-2" ).click();
+		},
+		function() {
+			deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1,
+				"After navigating to page 2 exactly one back button " +
+					"appears on the external toolbar" );
+			$.mobile.back();
+		},
+		function() {
+			deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 0,
+				"After going back from page 2 no back button appears on the external toolbar" );
+			$( "#go-to-page-2" ).click();
+		},
+		function() {
+			deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1,
+				"After navigating to page 2 again exactly one back button " +
+					"appears on the external toolbar" );
+			$( "#go-to-page-3" ).click();
+		},
+		function() {
+			deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1,
+				"After navigating to page 3 exactly one back button " +
+					"appears on the external toolbar" );
+			$.mobile.back();
+		},
+		function() {
+			deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 1,
+				"After navigating back to page 2 exactly one back button " +
+					"appears on the external toolbar" );
+			$.mobile.back();
+		},
+		function() {
+			deepEqual( $( "#header" ).find( ".ui-toolbar-back-btn" ).length, 0,
+				"After navigating back from page 2 no back button " +
+					"appears on the external toolbar" );
+			start();
+		},
+	]);
+});