]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Added unit tests for Accordion.
authorMarius Olbertz <marius.olbertz@gmail.com>
Wed, 28 Sep 2016 18:02:11 +0000 (20:02 +0200)
committerMarius Olbertz <marius.olbertz@gmail.com>
Wed, 28 Sep 2016 18:02:11 +0000 (20:02 +0200)
test/javascript/components/accordion.js

index 302031bfb742621ea207f3400458ce41af124fcd..e7edbefec16ece9bf40568f6f45ac56e26bdbe15 100644 (file)
 describe('Accordion', function() {
-       var plugin;
-       var $html;
+  var plugin;
+  var $html;
+  var template = `<ul class="accordion" data-accordion>
+  <li class="accordion-item is-active" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 1</a>
+    <div class="accordion-content" data-tab-content >
+      <p>Panel 1. Lorem ipsum dolor</p>
+      <a href="#">Nowhere to Go</a>
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 2</a>
+    <div class="accordion-content" data-tab-content>
+      <textarea></textarea>
+      <button class="button">I do nothing!</button>
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 3</a>
+    <div class="accordion-content" data-tab-content>
+      Pick a date!
+      <input type="date"></input>
+    </div>
+  </li>
+</ul>`;
 
-       // afterEach(function() {
-       //      plugin.destroy();
-       //      $html.remove();
-       // });
+  afterEach(function() {
+    plugin.destroy();
+    $html.remove();
+  });
 
-       describe('constructor()', function() {
-               // it('', function() {
-               //      $html = $('').appendTo('body');
-               //      plugin = new Foundation.Accordion($html, {});
+  describe('constructor()', function() {
+    it('stores the element and plugin options', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {});
 
-               //      plugin.$element.should.be.an('object');
-               //      plugin.options.should.be.an('object');
-               // });
-       });
+      plugin.$element.should.be.an('object');
+      plugin.options.should.be.an('object');
+    });
+  });
 
+  describe('up()', function() {
+    it('closes the targeted container if allowAllClosed is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {allowAllClosed: true});
+
+      plugin.up($html.find('.accordion-content').eq(0));
+      $html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
+      $html.on('up.zf.accordion', function() {
+        $html.find('.accordion-content').eq(0).should.be.hidden;
+        done();
+      });
+    });
+
+    it('toggles attributes of title of the targeted container', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {});
+
+      plugin.up($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-title').eq(1).should.have.attr('aria-expanded', 'false');
+      $html.find('.accordion-title').eq(1).should.have.attr('aria-selected', 'false');
+    });
+
+    it('not closes the open container if allowAllClosed is false', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {allowAllClosed: false});
+
+      plugin.up($html.find('.accordion-content').eq(0));
+      $html.find('.accordion-content').eq(0).should.be.visible;
+      // Element has aria-hidden="false" not set if it has not been actively toggled so far
+      // Therefor check if it has not aria-hidden="true"
+      $html.find('.accordion-content').eq(0).should.not.have.attr('aria-hidden', 'true');
+    });
+  });
+
+  describe('down()', function() {
+    it('opens the targeted container', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {});
+
+      plugin.down($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-content').eq(1).should.be.visible;
+      $html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
+    });
+
+    it('toggles attributes of title of the targeted container', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {});
+
+      plugin.down($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-title').eq(1).should.have.attr('aria-expanded', 'true');
+      $html.find('.accordion-title').eq(1).should.have.attr('aria-selected', 'true');
+    });
+
+    it('closes open container if multiExpand is false', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {multiExpand: false});
+
+      plugin.down($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
+      $html.on('up.zf.accordion', function() {
+        $html.find('.accordion-content').eq(0).should.be.hidden;
+        done();
+      });
+    });
+
+    it('not closes open container if multiExpand is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {multiExpand: true});
+
+      plugin.down($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-content').eq(0).should.be.visible;
+      // Element has aria-hidden="false" not set if it has not been actively toggled so far
+      // Therefor check if it has not aria-hidden="true"
+      $html.find('.accordion-content').eq(0).should.not.have.attr('aria-hidden', 'true');
+    });
+  });
+
+  describe('toggle()', function() {
+    it('closes the open container if allowAllClosed is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {allowAllClosed: true});
+
+      plugin.toggle($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
+      $html.on('up.zf.accordion', function() {
+        $html.find('.accordion-content').eq(0).should.be.hidden;
+        done();
+      });
+    });
+
+    it('not closes the open container if allowAllClosed is false', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Accordion($html, {allowAllClosed: false});
+
+      plugin.toggle($html.find('.accordion-content').eq(1));
+      $html.find('.accordion-content').eq(1).should.be.visible;
+      $html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
+    });
+  });
 });
\ No newline at end of file