test: Add more tests for slider init, RzSliderOptions handling, and start to test ticks

karma.conf.js

@@ -6,7 +6,7 @@ module.exports = function (config) {
     basePath: '',
 
     // testing framework to use (jasmine/mocha/qunit/...)
-    frameworks: ['mocha', 'chai', 'chai-things', 'chai-as-promised'],
+    frameworks: ['mocha', 'sinon', 'chai'],
 
     reporters: ['dots', 'coverage'],
 
@@ -16,6 +16,7 @@ module.exports = function (config) {
       'node_modules/angular-mocks/angular-mocks.js',
       'src/*.js',
       'tests/spec/*.js',
+      'dist/rzslider.css',
       'src/*.html'
     ],
 
@@ -51,7 +52,6 @@ module.exports = function (config) {
       subdir: '.'
     },
 
-
     // Start these browsers, currently available:
     // - Chrome
     // - ChromeCanary

package.json

@@ -24,8 +24,6 @@
     "angular": "1.4.7",
     "angular-mocks": "^1.4.8",
     "chai": "^3.4.1",
-    "chai-as-promised": "^5.1.0",
-    "chai-things": "^0.2.0",
     "codecov.io": "^0.1.6",
     "commitizen": "^2.4.6",
     "cz-conventional-changelog": "^1.1.5",
@@ -41,12 +39,13 @@
     "grunt-replace": "^0.11.0",
     "grunt-serve": "^0.1.6",
     "karma": "^0.13.15",
-    "karma-chai-plugins": "^0.6.1",
+    "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^0.2.2",
     "karma-coverage": "^0.5.3",
     "karma-mocha": "^0.2.1",
     "karma-ng-html2js-preprocessor": "^0.2.0",
     "karma-phantomjs-launcher": "^0.2.1",
+    "karma-sinon": "^1.0.4",
     "mocha": "^2.3.4",
     "phantomjs": "^1.9.19",
     "recess": "~1.1.9"

src/rzslider.js

@@ -282,9 +282,12 @@
        */
       init: function() {
         var thrLow, thrHigh,
-          calcDimFn = angular.bind(this, this.calcViewDimensions),
           self = this;
 
+        var calcDimFn = function() {
+          self.calcViewDimensions();
+        };
+
         this.applyOptions();
         this.initElemHandles();
         this.manageElementsStyle();
@@ -309,27 +312,12 @@
         this.initHasRun = true;
 
         // Watch for changes to the model
-
         thrLow = rzThrottle(function() {
-          self.setMinAndMax();
-          self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
-          self.updateSelectionBar();
-          self.updateTicksScale();
-          self.updateAriaAttributes();
-
-          if (self.range) {
-            self.updateCmbLabel();
-          }
-
+          self.onLowHandleChange();
         }, self.options.interval);
 
         thrHigh = rzThrottle(function() {
-          self.setMinAndMax();
-          self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
-          self.updateSelectionBar();
-          self.updateTicksScale();
-          self.updateCmbLabel();
-          self.updateAriaAttributes();
+          self.onHighHandleChange();
         }, self.options.interval);
 
         this.scope.$on('rzSliderForceRender', function() {
@@ -377,6 +365,32 @@
         });
       },
 
+      /*
+      * Reflow the slider when the low handle changes (called with throttle)
+      */
+      onLowHandleChange: function() {
+        this.setMinAndMax();
+        this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
+        this.updateSelectionBar();
+        this.updateTicksScale();
+        this.updateAriaAttributes();
+        if (this.range) {
+          this.updateCmbLabel();
+        }
+      },
+
+      /*
+      * Reflow the slider when the high handle changes (called with throttle)
+      */
+      onHighHandleChange: function() {
+        this.setMinAndMax();
+        this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
+        this.updateSelectionBar();
+        this.updateTicksScale();
+        this.updateCmbLabel();
+        this.updateAriaAttributes();
+      },
+
       /**
        * Read the user options and apply them to the slider model
        */

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

@@ -2,20 +2,24 @@
 
 describe('rzslider - ', function() {
   var RzSlider,
+    RzSliderOptions,
     $rootScope,
     scope,
     $compile,
     $timeout,
+    $window,
     element,
     slider;
   beforeEach(module('rzModule'));
   beforeEach(module('appTemplates'));
 
-  beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_, _$timeout_) {
+  beforeEach(inject(function(_RzSlider_, _RzSliderOptions_, _$rootScope_, _$compile_, _$timeout_, _$window_) {
     RzSlider = _RzSlider_;
+    RzSliderOptions = _RzSliderOptions_;
     $rootScope = _$rootScope_;
     $compile = _$compile_;
     $timeout = _$timeout_;
+    $window = _$window_;
   }));
 
   /*
@@ -50,7 +54,151 @@ describe('rzslider - ', function() {
       $timeout.flush(); //to flush the throttle function
       expect(scope.slider.value).to.equal(60);
     });
+
+    it('should call calcViewDimensions() on reCalcViewDimensions', function() {
+      sinon.spy(slider, 'calcViewDimensions');
+      scope.$broadcast('reCalcViewDimensions');
+      slider.calcViewDimensions.called.should.be.true;
+    });
+
+    it('should reset everything on rzSliderForceRender', function() {
+      sinon.spy(slider, 'resetLabelsValue');
+      sinon.spy(slider, 'resetSlider');
+      sinon.spy(slider, 'onLowHandleChange');
+
+      scope.$broadcast('rzSliderForceRender');
+
+      slider.resetLabelsValue.called.should.be.true;
+      slider.resetSlider.called.should.be.true;
+      slider.onLowHandleChange.called.should.be.true;
+    });
+
+    it('should call calcViewDimensions() on window resize event', function() {
+      sinon.spy(slider, 'calcViewDimensions');
+      angular.element($window).triggerHandler('resize');
+      slider.calcViewDimensions.called.should.be.true;
+    });
+
+    it('should unregister all dom events on $destroy', function() {
+      sinon.spy(slider, 'calcViewDimensions');
+      sinon.spy(slider, 'unbindEvents');
+
+      scope.$broadcast('$destroy');
+      angular.element($window).triggerHandler('resize');
+
+      slider.calcViewDimensions.called.should.be.false;
+      slider.unbindEvents.called.should.be.true;
+    });
   });
+
+  /*
+  ******************************************************************************
+    RANGE SLIDER INIT
+  ******************************************************************************
+  */
+  describe('range slider initialisation', function() {
+    beforeEach(function() {
+      var sliderConf = {
+        min: 10,
+        max: 90,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10
+        }
+      };
+      createRangeSlider(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.min = 13;
+      scope.slider.max = 94;
+      scope.$digest();
+      expect(scope.slider.min).to.equal(10);
+      expect(scope.slider.max).to.equal(90);
+
+      scope.slider.min = 15;
+      scope.slider.max = 95;
+      scope.$digest();
+      $timeout.flush(); //to flush the throttle function
+      expect(scope.slider.min).to.equal(20);
+      expect(scope.slider.max).to.equal(100);
+    });
+
+    it('should reset everything on rzSliderForceRender', function() {
+      sinon.spy(slider, 'resetLabelsValue');
+      sinon.spy(slider, 'resetSlider');
+      sinon.spy(slider, 'onLowHandleChange');
+      sinon.spy(slider, 'onHighHandleChange');
+
+      scope.$broadcast('rzSliderForceRender');
+
+      slider.resetLabelsValue.called.should.be.true;
+      slider.resetSlider.called.should.be.true;
+      slider.onLowHandleChange.called.should.be.true;
+      slider.onHighHandleChange.called.should.be.true;
+    });
+  });
+
+  /*
+  ******************************************************************************
+    RzSliderOptions
+  ******************************************************************************
+  */
+  describe('RzSliderOptions', function() {
+
+    it('should have a correct getOptions method that apply custom options', function() {
+      var defaultOpts = RzSliderOptions.getOptions();
+      var customOpts = {
+        showTicks: true
+      };
+
+      var expectedOpts = angular.extend({}, defaultOpts, customOpts);
+      var options = RzSliderOptions.getOptions(customOpts);
+      expect(options).to.deep.equal(expectedOpts);
+    });
+
+    it('should have a correct options method to update the global options', function() {
+      var defaultOpts = RzSliderOptions.getOptions();
+      var globalOpts = {
+        showTicks: true
+      };
+      RzSliderOptions.options(globalOpts);
+
+      var expectedOpts = angular.extend({}, defaultOpts, globalOpts);
+      var options = RzSliderOptions.getOptions();
+      expect(options).to.deep.equal(expectedOpts);
+    });
+  });
+
+  /*
+  ******************************************************************************
+    Slider with ticks
+  ******************************************************************************
+  */
+  describe('slider with ticks', function() {
+    beforeEach(function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true
+        }
+      };
+      createSlider(sliderConf);
+    });
+
+    it('should create the correct number of ticks', function() {
+      expect(element[0].querySelectorAll('.tick')).to.have.length(11);
+    });
+  });
+
   /*
   ******************************************************************************
     KEYBOARD CONTROLS
@@ -530,7 +678,10 @@ describe('rzslider - ', function() {
   function initSlider(sliderObj, template) {
     scope = $rootScope.$new();
     scope.slider = sliderObj;
+    var parent = angular.element('<div style="width: 1000px"></div>');
     element = $compile(template)(scope);
+    parent.append(element);
+    angular.element(document).find('body').append(parent);
     scope.$apply();
     slider = element.isolateScope().slider;
     $timeout.flush();