2 files changed, 80 insertions, 0 deletions
diff --git a/tests/unit/tabs/core.js b/tests/unit/tabs/core.js
index f7515f585..1eac3c268 100644
--- a/tests/unit/tabs/core.js
+++ b/tests/unit/tabs/core.js
@@ -773,4 +773,55 @@ QUnit.test( "URL-based auth with local tabs (gh-2213)", function( assert ) {
 	}
 } );
 
+( function() {
+	function getVerifyTab( assert, element ) {
+		return function verifyTab( index ) {
+			assert.strictEqual(
+				element.tabs( "option", "active" ),
+				index,
+				"should set the active option to " + index );
+			assert.strictEqual(
+				element.find( "[role='tabpanel']:visible" ).text().trim(),
+				"Tab " + ( index + 1 ),
+				"should set the panel to 'Tab " + ( index + 1 ) + "'" );
+		};
+	}
+
+	QUnit.test( "href encoding/decoding (gh-2344)", function( assert ) {
+		assert.expect( 12 );
+
+		location.hash = "#tabs-2";
+
+		var i,
+			element = $( "#tabs10" ).tabs(),
+			tabLinks = element.find( "> ul a" ),
+			verifyTab = getVerifyTab( assert, element );
+
+		for ( i = 0; i < tabLinks.length; i++ ) {
+			tabLinks.eq( i ).trigger( "click" );
+			verifyTab( i );
+		}
+
+		location.hash = "";
+	} );
+
+	QUnit.test( "href encoding/decoding on init (gh-2344)", function( assert ) {
+		assert.expect( 12 );
+
+		var i,
+			element = $( "#tabs10" ),
+			tabLinks = element.find( "> ul a" ),
+			verifyTab = getVerifyTab( assert, element );
+
+		for ( i = 0; i < tabLinks.length; i++ ) {
+			location.hash = tabLinks.eq( i ).attr( "href" );
+			element.tabs();
+			verifyTab( i );
+			element.tabs( "destroy" );
+		}
+
+		location.hash = "";
+	} );
+} )();
+
 } );
diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html
index cb4e5389f..3f18fa015 100644
--- a/tests/unit/tabs/tabs.html
+++ b/tests/unit/tabs/tabs.html
@@ -125,6 +125,35 @@
 	<div id="tabs9-1"></div>
 </div>
 
+<div id="tabs10">
+	<ul>
+		<li><a href="#tabs-1">1</a></li>
+		<li><a href="#tabs-2">2</a></li>
+		<li><a href="#%EF%B8%8F">3</a></li>
+		<li><a href="#🤗">4</a></li>
+		<li><a href="#😅">5</a></li>
+		<li><a href="#%25F0%259F%25A4%25AD">6</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Tab 1</p>
+	</div>
+	<div id="tabs-2">
+		<p>Tab 2</p>
+	</div>
+	<div id="%EF%B8%8F">
+		<p>Tab 3</p>
+	</div>
+	<div id="🤗">
+		<p>Tab 4</p>
+	</div>
+	<div id="%F0%9F%98%85">
+		<p>Tab 5</p>
+	</div>
+	<div id="%F0%9F%A4%AD">
+		<p>Tab 6</p>
+	</div>
+</div>
+
 </div>
 </body>
 </html>