test: Refactor tests architecture

Author: Valentin Hervieu

Gruntfile.js

@@ -125,12 +125,16 @@ module.exports = function(grunt) {
         }
       },
       js: {
-        files: ['src/*js', 'src/*.html'],
+        files: ['src/*.js', 'src/*.html'],
         tasks: ['js']
       },
       less: {
         files: ['src/*.less'],
         tasks: ['css']
+      },
+      test: {
+        files: ['src/*.js', 'tests/spec/*.js'],
+        tasks: ['test']
       }
     },
     serve: {

dist/rzslider.js

@@ -1345,7 +1345,7 @@
             HOME: this.minValue,
             END: this.maxValue
           },
-          key = keys[keyCode],
+          key = keys[keyCode], 
           action = actions[key];
         if (action == null || this.tracking === '') return;
         event.preventDefault();

karma.conf.js

@@ -8,7 +8,7 @@ module.exports = function (config) {
     // testing framework to use (jasmine/mocha/qunit/...)
     frameworks: ['mocha', 'chai', 'chai-things', 'chai-as-promised'],
 
-    reporters: ['progress', 'coverage'],
+    reporters: ['dots', 'coverage'],
 
     // list of files / patterns to load in the browser
     files: [

src/rzslider.js

@@ -1574,7 +1574,7 @@
       },
 
       link: function(scope, elem) {
-        return new RzSlider(scope, elem);
+        scope.service = new RzSlider(scope, elem); //attach on scope so we can test it
       }
     };
   });

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

@@ -1,59 +1,90 @@
 'use strict';
 
-describe('rzslider api', function () {
-  var RzSlider;
-  var $rootScope;
-  var scope;
-  var $compile;
-  var element;
-  var $httpBackend;
+describe('rzslider - ', function() {
+  var RzSlider,
+    $rootScope,
+    scope,
+    $compile,
+    element,
+    service;
   beforeEach(module('rzModule'));
   beforeEach(module('appTemplates'));
 
-  beforeEach(inject(function (_RzSlider_, _$rootScope_, _$compile_, _$httpBackend_) {
+  beforeEach(inject(function(_RzSlider_, _$rootScope_, _$compile_) {
     RzSlider = _RzSlider_;
     $rootScope = _$rootScope_;
     $compile = _$compile_;
-    $httpBackend = _$httpBackend_;
   }));
 
-  beforeEach(function () {
-    scope = $rootScope.$new();
-    scope.minSlider = {value: 10};
-    scope.rzSliderModel = scope.minSlider.value;
-    scope.options = {
-      floor: 0,
-      ceil: 1000, //defaults to rz-slider-model
-      step: 100
-    };
-    compileHtml();
+  describe('initialisation', function() {
+    beforeEach(function() {
+      var slider = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 1000,
+          step: 100
+        }
+      };
+      createSlider(slider);
+    });
+    it('should exist compiled', function() {
+      expect(element.find('span')).to.have.length(11);
+    });
   });
 
-  it('should exist compiled', function () {
-    expect(element.find('span')).to.have.length(11);
-  });
+  describe('keyboard controls', function() {
+    beforeEach(function() {
+      var slider = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 1000,
+          step: 100
+        }
+      };
+      createSlider(slider);
+    });
 
-  it('should trigger a left arrow respecting step values and not go below 0', function (done) {
-    var service = new RzSlider(scope, element);
-    service.step = 100;
-    var event = pressLeftArrow();
-    service.onPointerFocus(element, 'rzSliderModel', event);
-    service.onKeyboardEvent(event);
-    expect(scope.rzSliderModel).to.equal(0);
-    done();
+    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);
+      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 pressLeftArrow() {
-    var evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
-    evt.initCustomEvent('keydown', false, false, null);
-    evt.which = 37;
-    return evt;
+  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;
   }
 
-  function compileHtml() {
-    element = $compile("<rzslider rz-slider-model='minSlider.value' rz-slider-options='options'></rzslider>")(scope);
+  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>';
+    element = $compile(template)(scope);
     scope.$apply();
+    service = element.isolateScope().service;
   }
-
-
 });