Added unit tests for Slider.

diff --git a/test/javascript/components/slider.js b/test/javascript/components/slider.js
index 4198733159444d92f29ff9da327fcc43f8bb957c..22c900357183e3a9eadcffdfd252f3c4e9188901 100644 (file)
--- a/test/javascript/components/slider.js
+++ b/test/javascript/components/slider.js
@@ -1,20 +1,156 @@
 describe('Slider', function() {
-       var plugin;
-       var $html;
-
-       // afterEach(function() {
-       //      plugin.destroy();
-       //      $html.remove();
-       // });
-
-       describe('constructor()', function() {
-               // it('', function() {
-               //      $html = $('').appendTo('body');
-               //      plugin = new Foundation.Slider($html, {});
-
-               //      plugin.$element.should.be.an('object');
-               //      plugin.options.should.be.an('object');
-               // });
-       });
+  var plugin;
+  var $html;
+  var template = `<div class="slider" data-slider>
+      <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
+      <span class="slider-fill" data-slider-fill></span>
+      <input type="hidden">
+    </div>`;
+
+  Foundation.Slider.defaults.moveTime = 0;
+  Foundation.Slider.defaults.changedDelay = 0;
+
+  afterEach(function(done) {
+    // Timeout needed because even with changeDelay = 0 the changed.zf.slider event may be fired after this hook
+    plugin.destroy();
+    $html.remove();
+    done();
+  });
+
+  describe('constructor()', function() {
+    it('stores the element and plugin options', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      plugin.$element.should.be.an('object');
+      plugin.options.should.be.an('object');
+    });
+  });
+
+  describe('init()', function() {
+    it('stores handle, inout and fill elements', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      plugin.$handle.should.be.an('object');
+      plugin.$input.should.be.an('object');
+      plugin.$fill.should.be.an('object');
+    });
+    it('stores two handle and input elements for two sided slider', function() {
+      $html = $(template).append('<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span><input type="hidden">')
+          .appendTo('body');
+      plugin = new Foundation.Slider($html, {doubleSided: true});
+
+      plugin.$handle2.should.be.an('object');
+      plugin.$input2.should.be.an('object');
+    });
+    it('is disabled when disable option is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {disabled: true});
+
+      $html.should.have.class('disabled');
+    });
+  });
+
+  describe('setHandlePos()', function() {
+    it('positions the handle', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      plugin._setHandlePos(plugin.$handle, 10, true);
+
+      plugin.$handle[0].style.left.should.not.be.equal('');
+    });
+    it('does nothing if disabled option is true', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {disabled: true});
+
+      plugin._setHandlePos(plugin.$handle, 10, true);
+
+      plugin.$handle[0].style.left.should.be.equal('');
+    });
+    it('fires changed.zf.slider event', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {changedDelay: 50});
+
+      $html.on('changed.zf.slider', function(e, $handle) {
+        $handle[0].should.be.equal(plugin.$handle[0]);
+        done();
+      });
+
+      // Rapidly change to see if event fires only once
+      for (let i = 0; i < 5; i++) {
+        setTimeout(function() {
+          plugin._setHandlePos(plugin.$handle, i * 10, true);
+        }, i * 20);
+      }
+    });
+    it('fires moved.zf.slider event', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      let timesCallbackCalled = 0;
+      $html.on('moved.zf.slider', function(e, $handle) {
+        if (++timesCallbackCalled === 5) {
+          $handle[0].should.be.equal(plugin.$handle[0]);
+          done();
+        }
+      });
+
+      // Rapidly change to see if event fires multiple times
+      for (let i = 0; i < 5; i++) {
+        setTimeout(function() {
+          plugin._setHandlePos(plugin.$handle, i * 10, true);
+        }, i * 20);
+      }
+    });
+  });
+
+  describe('setValues()', function() {
+    it('updates ARIA attributes', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      plugin._setValues(plugin.$handle, 10);
+
+      plugin.$handle.should.have.attr('aria-valuenow', '10');
+    });
+    it('updates input value', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      plugin._setValues(plugin.$handle, 10);
+
+      plugin.$input.val().should.have.be.equal('10');
+    });
+  });
+
+  describe('setInitAttr()', function() {
+    it('adds ARIA attributes to handle', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {
+        initialStart: 50,
+        end: 70,
+        start: 20,
+        vertical: true
+      });
+
+      plugin.$handle.should.have.attr('role', 'slider');
+      plugin.$handle.should.have.attr('aria-controls', plugin.$handle.attr('id'));
+      plugin.$handle.should.have.attr('aria-valuemax', '70');
+      plugin.$handle.should.have.attr('aria-valuemin', '20');
+      plugin.$handle.should.have.attr('aria-valuenow', '50');
+      plugin.$handle.should.have.attr('aria-orientation', 'vertical');
+      plugin.$handle.should.have.attr('tabindex', '0');
+    });
+    it('adds attributes to input', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Slider($html, {});
+
+      plugin.$input.should.have.attr('max', '100');
+      plugin.$input.should.have.attr('min', '0');
+      plugin.$input.should.have.attr('step', '1');
+    });
+  });
 
 });
\ No newline at end of file