From: Matt Scheurich <matt@lvl99.com>
Date: Tue, 5 Sep 2017 12:19:38 +0000 (+0200)
Subject: added external href test for tabs
X-Git-Tag: v6.6.0~3^2~332^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c138ca1503a5018ba9a79450d652b43b75bbd78b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

added external href test for tabs
---

diff --git a/test/javascript/components/tabs.js b/test/javascript/components/tabs.js
index 1d4157ea4..f0a06c4fd 100644
--- a/test/javascript/components/tabs.js
+++ b/test/javascript/components/tabs.js
@@ -78,6 +78,7 @@ describe('Tabs', function() {
       plugin.selectTab('#panel2');
       $html.find('#panel2').should.be.visible;
     });
+
     it('opens the selected tab with data-tabs-target attribute', function() {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
@@ -85,6 +86,36 @@ describe('Tabs', function() {
       plugin.selectTab('#/panel3');
       $html.find('#panel3').should.be.visible;
     });
+
+    it('opens the selected tab with data-tabs-target attribute and external href', function () {
+      $html = $(`
+      <div>
+        <ul class="tabs" data-tabs id="example-tabs">
+          <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
+          <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
+          <li class="tabs-title"><a data-tabs-target="panel3" href="http://example.com">Tab 3</a></li>
+        </ul>
+  
+        <div class="tabs-content" data-tabs-content="example-tabs">
+          <div class="tabs-panel is-active" id="panel1">
+            <p>one</p>
+            <p>Check me out! I'm a super cool Tab panel with text content!</p>
+          </div>
+          <div class="tabs-panel" id="panel2">
+            <p>two</p>
+            <p>Check me out! I'm a super cool Tab panel with text content!</p>
+          </div>
+          <div class="tabs-panel" id="panel3">
+            <p>three</p>
+            <p>Check me out! I'm a super cool Tab panel with text content!</p>
+          </div>
+        </div>
+      </div>`).appendTo('body');
+      plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
+
+      plugin.selectTab('#panel3');
+      $html.find('#panel3').should.be.visible;
+    })
   });
 
   describe('_handleTabChange()', function() {