Panel: Invalidate _openedPage upon pageshow before recomputing wrapper

Fixes jquery-archivegh-7711
agcolom · Nov 26, 2014 · a030dae · a030dae
1 parent 75f92e7
commit a030dae
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 1 deletion.
diff --git a/js/widgets/panel.js b/js/widgets/panel.js
@@ -269,7 +269,10 @@ $.widget( "mobile.panel", {
 			});
 		if ( !this._parentPage && this.options.display !== "overlay" ) {
 			this._on( this.document, {
-				"pageshow": "_getWrapper"
+				"pageshow": function() {
+					this._openedPage = null;
+					this._getWrapper();
+				}
 			});
 		}
 		// Clean up open panels after page hide

diff --git a/tests/integration/panel/external-panel-wrapper-update-tests.html b/tests/integration/panel/external-panel-wrapper-update-tests.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Panel 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([
+			[ "widgets/page" ],
+			[ "widgets/panel" ],
+			[ "init" ],
+			[ "external_panel_wrapper_update_core.js" ]
+		]);
+	</script>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body>
+	<div id="qunit"></div>
+
+	<div data-nstest-role="panel" id="wrapper-test-panel" data-nstest-display="reveal">
+		<p>The panel</p>
+		<a href="#other-page" id="go-to-other-page" data-nstest-transition="none">Go to other page</a>
+	</div>
+
+	<div data-nstest-role="page">
+		<div class="ui-content">
+			<p>Start page</p>
+		</div>
+	</div>
+
+	<div data-nstest-role="page" id="other-page">
+		<div class="ui-content">
+			<p>Other page</p>
+		</div>
+	</div>
+</body>
diff --git a/tests/integration/panel/external_panel_wrapper_update_core.js b/tests/integration/panel/external_panel_wrapper_update_core.js
@@ -0,0 +1,46 @@
+var panel = $( "#wrapper-test-panel" ).panel();
+
+asyncTest( "External panel updates wrapper correctly", function() {
+	var otherPageChildren,
+		otherPage = $( "#other-page" ),
+		otherPageLink = $( "#go-to-other-page" );
+
+	expect( 5 );
+
+	$.testHelper.detailedEventCascade([
+		function() {
+			panel.panel( "open" );
+		},
+		{
+			panelopen: { src: panel, event: "panelopen.externalPanelUpdatesWrapperCorrectly1" }
+		},
+		function( result ) {
+			deepEqual( result.panelopen.timedOut, false, "Panel did open" );
+			otherPageLink.click();
+		},
+		{
+			panelclose: { src: panel, event: "panelclose.externalPanelUpdatesWrapperCorrectly2" },
+			pagecontainerchange: {
+				src: $( window ),
+				event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2"
+			}
+		},
+		function( result ) {
+			otherPageChildren = otherPage.children();
+			deepEqual( result.panelclose.timedOut, false, "Panel did close upon link click" );
+			deepEqual( result.pagecontainerchange.timedOut, false,
+				"pagecontainerchange event received" );
+			deepEqual( otherPageChildren.length, 1, "Other page has exactly one child" );
+			deepEqual( otherPageChildren.hasClass( "ui-panel-wrapper" ), true,
+				"Other page child has class 'ui-panel-wrapper'" );
+			$.mobile.back();
+		},
+		{
+			pagecontainerchange: {
+				src: $( window ),
+				event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2"
+			}
+		},
+		start
+	]);
+});