From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Wed, 19 Apr 2017 18:50:24 +0000 (+0200)
Subject: Added tests for keyboard events for Tabs.
X-Git-Tag: v6.4.0-rc1~50^2~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f8cfde05c33afdf63f43a3db49d4c42a0d7e280c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Added tests for keyboard events for Tabs.

Currently only implemented events for changing tabs with arrow keys.
---

diff --git a/test/javascript/components/tabs.js b/test/javascript/components/tabs.js
index 3aeaef986..fe7d71369 100644
--- a/test/javascript/components/tabs.js
+++ b/test/javascript/components/tabs.js
@@ -138,4 +138,46 @@ describe('Tabs', function() {
     });
   });
 
+  describe('keyboard events', function() {
+    it('switches to next tab on ARROW_RIGHT', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
+
+      $html.find('[href="#panel1"]').focus()
+        .trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
+
+      $html.find('#panel2').should.be.visible;
+      $html.find('#panel2').should.have.class('is-active');
+    });
+    it('switches to next tab on ARROW_DOWN', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
+
+      $html.find('[href="#panel1"]').focus()
+        .trigger(window.mockKeyboardEvent('ARROW_DOWN'));
+
+      $html.find('#panel2').should.be.visible;
+      $html.find('#panel2').should.have.class('is-active');
+    });
+    it('switches to previous tab on ARROW_LEFT', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
+
+      $html.find('[href="#panel2"]').focus()
+        .trigger(window.mockKeyboardEvent('ARROW_LEFT'));
+
+      $html.find('#panel1').should.be.visible;
+      $html.find('#panel1').should.have.class('is-active');
+    });
+    it('switches to previous tab on ARROW_UP', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
+
+      $html.find('[href="#panel2"]').focus()
+        .trigger(window.mockKeyboardEvent('ARROW_UP'));
+
+      $html.find('#panel1').should.be.visible;
+      $html.find('#panel1').should.have.class('is-active');
+    });
+  });
 });