test(keyboard-controls): Handle all simple cases

Also refactor the tests architecture to have real tests interacting from outside the directive.

src/rzslider.js

@@ -78,7 +78,7 @@
     return factory;
   })
 
-  .value('rzThrottle',
+  .factory('rzThrottle', function($timeout) {
     /**
      * rzThrottle
      *
@@ -89,7 +89,7 @@
      * @param {ThrottleOptions} options
      * @returns {Function}
      */
-    function throttle(func, wait, options) {
+    return function(func, wait, options) {
       'use strict';
       var getTime = (Date.now || function() {
         return new Date().getTime();
@@ -113,16 +113,17 @@
         context = this;
         args = arguments;
         if (remaining <= 0) {
-          clearTimeout(timeout);
+          $timeout.cancel(timeout);
           timeout = null;
           previous = now;
           result = func.apply(context, args);
           context = args = null;
         } else if (!timeout && options.trailing !== false) {
-          timeout = setTimeout(later, remaining);
+          timeout = $timeout(later, remaining);
         }
         return result;
       };
+    }
   })
 
   .factory('RzSlider', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
@@ -348,7 +349,7 @@
         }, true);
 
         this.scope.$watch('rzSliderModel', function(newValue, oldValue) {
-          if(self.internalChange)
+          if (self.internalChange)
             return;
           if (newValue === oldValue)
             return;
@@ -356,7 +357,7 @@
         });
 
         this.scope.$watch('rzSliderHigh', function(newValue, oldValue) {
-          if(self.internalChange)
+          if (self.internalChange)
             return;
           if (newValue === oldValue)
             return;
@@ -1574,7 +1575,7 @@
       },
 
       link: function(scope, elem) {
-        scope.service = new RzSlider(scope, elem); //attach on scope so we can test it
+        scope.slider = new RzSlider(scope, elem); //attach on scope so we can test it
       }
     };
   });

tests/spec/rz-slider-service-test.js

@@ -5,86 +5,162 @@ describe('rzslider - ', function() {
     $rootScope,
     scope,
     $compile,
+    $timeout,
     element,
-    service;
+    slider;
   beforeEach(module('rzModule'));
   beforeEach(module('appTemplates'));
 
-  beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_) {
+  beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_, _$timeout_) {
     RzSlider = _RzSlider_;
     $rootScope = _$rootScope_;
     $compile = _$compile_;
+    $timeout = _$timeout_;
   }));
 
-  describe('initialisation', function() {
+  describe('single slider initialisation', function() {
     beforeEach(function() {
-      var slider = {
+      var sliderConf = {
         value: 10,
         options: {
           floor: 0,
-          ceil: 1000,
-          step: 100
+          ceil: 100,
+          step: 10
         }
       };
-      createSlider(slider);
+      createSlider(sliderConf);
     });
+
     it('should exist compiled', function() {
       expect(element.find('span')).to.have.length(11);
     });
+
+    it('should round the model value to the step', function() {
+      scope.slider.value = 54;
+      scope.$digest();
+      expect(scope.slider.value).to.equal(50);
+
+      scope.slider.value = 55;
+      scope.$digest();
+      $timeout.flush(); //to flush the throttle function
+      expect(scope.slider.value).to.equal(60);
+    });
   });
 
   describe('keyboard controls', function() {
+
+    describe('simple cases', function() {
       beforeEach(function() {
-      var slider = {
-        value: 10,
+        var sliderConf = {
+          value: 100,
           options: {
             floor: 0,
-          ceil: 1000,
-          step: 100
+            ceil: 200
           }
         };
-      createSlider(slider);
+        createSlider(sliderConf);
+      });
+
+      it('should increment by 1 when RIGHT is pressed', function() {
+        slider.minH.triggerHandler('focus');
+        pressKeydown(slider.minH, 'RIGHT');
+        expect(scope.slider.value).to.equal(101);
+      });
+
+      it('should decrement by 1 when LEFT is pressed', function() {
+        slider.minH.triggerHandler('focus');
+        pressKeydown(slider.minH, 'LEFT');
+        expect(scope.slider.value).to.equal(99);
+      });
+
+      it('should increment by 10% when PAGEUP is pressed', function() {
+        slider.minH.triggerHandler('focus');
+        pressKeydown(slider.minH, 'PAGEUP');
+        expect(scope.slider.value).to.equal(120);
+      });
+
+      it('should decrement by 10% when PAGEDOWN is pressed', function() {
+        slider.minH.triggerHandler('focus');
+        pressKeydown(slider.minH, 'PAGEDOWN');
+        expect(scope.slider.value).to.equal(80);
+      });
+
+      it('should set value to min when HOME is pressed', function() {
+        slider.minH.triggerHandler('focus');
+        pressKeydown(slider.minH, 'HOME');
+        expect(scope.slider.value).to.equal(0);
+      });
+
+      it('set value to max when END is pressed', function() {
+        slider.minH.triggerHandler('focus');
+        pressKeydown(slider.minH, 'END');
+        expect(scope.slider.value).to.equal(200);
+      });
     });
 
-    it('should trigger a left arrow respecting step values and not go below 0', function() {
-      var event = pressLeftArrow();
-      service.onPointerFocus(element, 'rzSliderModel', event);
-      service.onKeyboardEvent(event);
+    it('should not go below 0', function() {
+      var sliderConf = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 1000,
+          step: 10
+        }
+      };
+      createSlider(sliderConf);
+      slider.minH.triggerHandler('focus');
+      pressKeydown(slider.minH, 'PAGEDOWN');
       expect(scope.slider.value).to.equal(0);
     });
 
-    function pressLeftArrow() {
-      var evt = document.createEvent('CustomEvent'); // MUST be 'CustomEvent'
-      evt.initCustomEvent('keydown', false, false, null);
-      evt.which = 37;
-      return evt;
+    function pressKeydown(element, key, oldAPI) {
+      key = key.toUpperCase();
+      var event = {
+        type: 'keydown'
+      };
+      var keys = {
+        'UP': 38,
+        'DOWN': 40,
+        'LEFT': 37,
+        'RIGHT': 39,
+        'PAGEUP': 33,
+        'PAGEDOWN': 34,
+        'HOME': 36,
+        'END': 35
+      };
+      var keyCode = keys[key];
+      if (oldAPI)
+        eent.which = keyCode;
+      else event.keyCode = keyCode;
+      element.triggerHandler(event);
     }
   });
 
   function createSlider(sliderObj) {
-    scope = $rootScope.$new();
-    scope.slider = sliderObj;
     var template = '';
     if (sliderObj.options)
       template = '<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>';
     else
       template = '<rzslider rz-slider-model="slider.value"></rzslider>';
-    element = $compile(template)(scope);
-    scope.$apply();
-    service = element.isolateScope().service;
+    initSlider(sliderObj, template);
   }
 
   function createRangeSlider(sliderObj) {
-    scope = $rootScope.$new();
-    scope.slider = sliderObj;
     var template = '';
     if (sliderObj.options)
       template = '<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max"' +
       'rz-slider-options="slider.options"></rzslider>';
     else
       template = '<rzslider rz-slider-model="slider.value" rz-slider-high="slider.max"></rzslider>';
+    initSlider(sliderObj, template);
+  }
+
+  function initSlider(sliderObj, template) {
+    scope = $rootScope.$new();
+    scope.slider = sliderObj;
     element = $compile(template)(scope);
     scope.$apply();
-    service = element.isolateScope().service;
+    slider = element.isolateScope().slider;
+    $timeout.flush();
   }
 });