Merge pull request #5 from nabil-boag/master

Revert invalid input to previous valid value. Add live reload JS to i…

app/package/angular-pure-slider.js

@@ -83,14 +83,15 @@ angular.module('angular-pure-slider', ['angular-pure-slider.value-converter'])
             selected = angular.element(element.find('span')[0]);
 
           /**
-           *	Updates the model value based on a mouse or touch click.
+           * Updates the model value based on a mouse or touch click.
+           *
            * @param TouchEvent/MouseEvent
            */
           var updateModelOnAction = function (e) {
 
             /**
-             *	Set to current position on slider, use the ValueService
-             * to calculate the model percentage value, given a min/max
+             * Set to current position on slider, use the ValueService
+             * to calculate the model percentage value, given a min/max.
              */
             var
               xMin = sliderElement[0].getBoundingClientRect().left,
@@ -131,7 +132,13 @@ angular.module('angular-pure-slider', ['angular-pure-slider.value-converter'])
           /**
            *	Updates the slider presentation when the model value has changed
            */
-          var updateSlider = function (newVal) {
+          var updateSlider = function (newVal, oldValue) {
+            newVal = parseFloat(newVal);
+
+            if (isNaN(newVal)) {
+              newVal = oldValue;
+            }
+
             // Rounds up the model value to the nearest whole number
             $scope[attributes.ngModel] = getValueWithinRange(Math.ceil(newVal));
 

app/src/angular-pure-slider.js

@@ -52,14 +52,15 @@ angular.module('angular-pure-slider', ['angular-pure-slider.value-converter'])
             selected = angular.element(element.find('span')[0]);
 
           /**
-           *	Updates the model value based on a mouse or touch click.
+           * Updates the model value based on a mouse or touch click.
+           *
            * @param TouchEvent/MouseEvent
            */
           var updateModelOnAction = function (e) {
 
             /**
-             *	Set to current position on slider, use the ValueService
-             * to calculate the model percentage value, given a min/max
+             * Set to current position on slider, use the ValueService
+             * to calculate the model percentage value, given a min/max.
              */
             var
               xMin = sliderElement[0].getBoundingClientRect().left,
@@ -100,7 +101,13 @@ angular.module('angular-pure-slider', ['angular-pure-slider.value-converter'])
           /**
            *	Updates the slider presentation when the model value has changed
            */
-          var updateSlider = function (newVal) {
+          var updateSlider = function (newVal, oldValue) {
+            newVal = parseFloat(newVal);
+
+            if (isNaN(newVal)) {
+              newVal = oldValue;
+            }
+
             // Rounds up the model value to the nearest whole number
             $scope[attributes.ngModel] = getValueWithinRange(Math.ceil(newVal));
 

app/src/angular-pure-slider.spec.js

@@ -141,4 +141,36 @@ describe('wnSlider directive', function () {
       // Assert
       expect(scope.min).toBe(20);
     });
+
+  it('should set the model value to previous value when new value is NaN',
+    function () {
+      // Arrange
+      scope.min = 34;
+      scope.max = 95;
+      scope.slider = 45;
+      scope.$apply();
+
+      // Act
+      scope.slider = 'not a number';
+      scope.$apply();
+
+      // Assert
+      expect(scope.slider).toBe(45);
+    });
+
+  it('should set the model value to previous value when new value is ' +
+    'whitespace', function () {
+      // Arrange
+      scope.min = 34;
+      scope.max = 95;
+      scope.slider = 45;
+      scope.$apply();
+
+      // Act
+      scope.slider = ' ';
+      scope.$apply();
+
+      // Assert
+      expect(scope.slider).toBe(45);
+    });
 });

app/src/features/page_objects/sliderPage.js

@@ -53,17 +53,17 @@ module.exports = function () {
   };
 
   /**
-   *	Gets the slider model value
+   * Sets the slider ng-model value
    */
-  page.getSliderModelValue = function () {
-    return element(by.model('sliderInputValue')).getAttribute('value');
+  page.setSliderValue = function (value) {
+    return element(by.model('sliderInputValue')).clear().sendKeys(value);
   };
 
   /**
-   * Sets the slider ng-model value
+   * Gets the slider ng-model value
    */
-  page.setSliderValue = function (value) {
-    return element(by.model('sliderInputValue')).clear().sendKeys(value);
+  page.getSliderValue = function () {
+    return element(by.model('sliderInputValue')).getAttribute('value');
   };
 
   page.setSliderRange = function (min, max) {

app/src/features/slider.feature

@@ -1,24 +1,35 @@
 Feature: Slider
+
   Scenario: Slider handle moves to correct position
     Given a slider width of 200px
     When I click the slider at 150px
     Then the handle should be at "75%"
+
   Scenario: Dragging the slider
     Given a slider width of 400px
     And a range of 0 to 200
     And a slider that is set to 50
     When I drag the slider to 300px
     Then the handle should be at "75%"
+
   Scenario: Customer types a value in the input box to update the slider
     Given a slider width of 200px
     And a range of 0 to 120
     And a slider that is set to 60
     When the input is changed to 30
     Then the handle should be at "25%"
+
   Scenario: jQuery included on the page BEFORE angular
     Given a page with jQuery
     And a slider width of 400px
     And a range of 0 to 200
     And a slider that is set to 50
     When I drag the slider to 300px
-    Then the handle should be at "75%"
+    Then the handle should be at "75%"
+
+  Scenario: Invalid input reverts to slider value
+    Given a slider width of 200px
+    And a range of 0 to 120
+    And a slider that is set to 60
+    When the input is changed to "some invalid text"
+    Then the handle should be at "50%"

app/src/features/step_definitions/slider.js

@@ -48,12 +48,27 @@ module.exports = function () {
     });
   });
 
+  this.When(/^the input is changed to "([^"]*)"$/, function (value, done) {
+    sp.setSliderValue(value).then(function () {
+      sp.unfocus().then(function () {
+        done();
+      });
+    });
+  });
+
   this.When(/^I click the slider at (\d+)px$/, function (xPixelPosition, done) {
     sp.clickSlider(xPixelPosition).then(function () {
       done();
     });
   });
 
+  this.Then(/^the input should be set to (\d+)$/, function (value, done) {
+    sp.getSliderValue().then(function (modelValue) {
+      value.should.equal(modelValue);
+      done();
+    });
+  });
+
   this.Then(/^the handle should be at "([^"]*)"$/, function (percentage, done) {
     sp.getSelectedStyle().then(function (selectedWidth) {
 
@@ -68,13 +83,6 @@ module.exports = function () {
     });
   });
 
-  this.Then(/^the output value should be (\d+)$/, function (value, done) {
-    sp.getSliderModelValue().then(function (modelValue) {
-      value.should.equal(modelValue);
-      done();
-    });
-  });
-
   this.Then(/^the slider should be at (\d+)$/,
     function (sliderPercentage, done) {
       sp.getSliderValue().then(function (value) {

app/src/index.html

@@ -125,6 +125,6 @@ <h1>Test page</h1>
     </div>
 
     <div></div>
-
+    <script src="//localhost:35729/livereload.js"></script>
   </body>
 </html>