Added unit tests for Orbit.

diff --git a/test/javascript/components/orbit.js b/test/javascript/components/orbit.js
index 84d0b403aa17326038455f6a0e78512185f3832b..1a008441c8f8d011183d066576d0289d7e77e9af 100644 (file)
--- a/test/javascript/components/orbit.js
+++ b/test/javascript/components/orbit.js
@@ -1,20 +1,197 @@
 describe('Orbit', function() {
-       var plugin;
-       var $html;
+  var plugin;
+  var $html;
+  var template = `<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+    <ul class="orbit-container">
+      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
+      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
+      <li class="is-active orbit-slide">
+        Slide #1 content.
+      </li>
+      <li class="orbit-slide">
+        Slide #2 content.
+      </li>
+      <li class="orbit-slide">
+        Slide #3 content.
+      </li>
+      <li class="orbit-slide">
+        Slide #4 content.
+      </li>
+    </ul>
+    <nav class="orbit-bullets">
+      <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+      <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+      <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+      <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+    </nav>
+  </div>`;
+  Foundation.Orbit.defaults.useMUI = false;
 
-       // afterEach(function() {
-       //      plugin.destroy();
-       //      $html.remove();
-       // });
+  afterEach(function() {
+    plugin.destroy();
+    $html.remove();
+  });
 
-       describe('constructor()', function() {
-               // it('', function() {
-               //      $html = $('').appendTo('body');
-               //      plugin = new Foundation.Orbit($html, {});
+  describe('constructor()', function() {
+    it('stores the element and plugin options', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
 
-               //      plugin.$element.should.be.an('object');
-               //      plugin.options.should.be.an('object');
-               // });
-       });
+      plugin.$element.should.be.an('object');
+      plugin.$wrapper.should.be.an('object');
+      plugin.$slides.should.be.an('object');
+      plugin.options.should.be.an('object');
+    });
+  });
 
+  describe('init()', function() {
+    it('shows the first slide', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.find('.orbit-slide').eq(0).should.be.visible;
+    });
+    it('hides all slides except the first one', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.find('.orbit-slide').each(function(index) {
+        if (index === 0) {return;} // Not for the first one as this is visible
+        $(this).should.be.hidden;
+      });
+    });
+    it('makes slide with is-active class active initially', function() {
+      $html = $(template).appendTo('body');
+      $html.find('.orbit-slide.is-active').removeClass('is-active');
+      $html.find('.orbit-slide').eq(2).addClass('is-active');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.find('.orbit-slide').eq(2).should.be.visible;
+    });
+  });
+
+  describe('loadBullets()', function() {
+    it('stores the bullets', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      plugin.$bullets.should.be.an('object');
+    });
+  });
+
+  describe('changeSlide()', function() {
+    it('changes slides to the next one for ltr is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      plugin.changeSlide(true);
+
+      $html.find('.orbit-slide').eq(0).should.be.hidden;
+      $html.find('.orbit-slide').eq(1).should.be.visible;
+    });
+    it('changes slides to the last one for ltr is false', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      plugin.changeSlide(false);
+
+      $html.find('.orbit-slide').eq(0).should.not.have.class('is-active');
+      $html.find('.orbit-slide').eq(-1).should.have.class('is-active');
+    });
+    it('changes slides to the chosen one', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      plugin.changeSlide(true, $html.find('.orbit-slide').eq(2), 2);
+
+      $html.find('.orbit-slide').eq(0).should.be.hidden;
+      $html.find('.orbit-slide').eq(2).should.be.visible;
+    });
+    it('toggles ARIA attributes', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      plugin.changeSlide(true);
+
+      $html.find('.orbit-slide').eq(0).should.not.have.attr('aria-live');
+      $html.find('.orbit-slide').eq(1).should.have.attr('aria-live', 'polite');
+    });
+    it('fires beforeslidechange.zf.orbit event', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.on('beforeslidechange.zf.orbit', function() {
+        // Old slide should still be active
+        $html.find('.orbit-slide').eq(0).should.be.visible;
+        done();
+      });
+      plugin.changeSlide(true);
+    });
+    it('fires slidechange.zf.orbit event', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.on('slidechange.zf.orbit', function() {
+        // New slide is already active
+        $html.find('.orbit-slide').eq(1).should.be.visible;
+        done();
+      });
+      plugin.changeSlide(true);
+    });
+  });
+
+  describe('updateBullets()', function() {
+    it('updates the bullets', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      plugin.changeSlide(true);
+
+      $html.find('.orbit-bullets [data-slide]').eq(0).should.not.have.class('is-active');
+      $html.find('.orbit-bullets [data-slide]').eq(1).should.have.class('is-active');
+    });
+  });
+
+  describe('events()', function() {
+    it('changes slides on bullet click', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.find('.orbit-bullets [data-slide]').eq(2).trigger('click');
+
+      $html.find('.orbit-slide').eq(0).should.be.hidden;
+      $html.find('.orbit-slide').eq(2).should.be.visible;
+    });
+    it('changes slides to the previous one', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.find('.orbit-previous').trigger('click');
+
+      $html.find('.orbit-slide').eq(0).should.be.hidden;
+      $html.find('.orbit-slide').eq(-1).should.be.visible;
+    });
+    it('changes slides to the next one', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {});
+
+      $html.find('.orbit-next').trigger('click');
+
+      $html.find('.orbit-slide').eq(0).should.be.hidden;
+      $html.find('.orbit-slide').eq(1).should.be.visible;
+    });
+  });
+
+  describe('geoSync()', function() {
+    it('changes slides automatically based on timerDelay option', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Orbit($html, {timerDelay: 200});
+
+      setTimeout(function() {
+        $html.find('.orbit-slide').eq(0).should.be.hidden;
+        $html.find('.orbit-slide').eq(1).should.be.visible;
+        done();
+      }, 201);
+    });
+  });
 });
\ No newline at end of file