fix(uiPercentageMask): detect and handle backspace keypresses

* fix backspacing single digit percentages (issue #174)

* correct travis ci build error

src/global/percentage/percentage.html

@@ -23,6 +23,9 @@ <h2>ui-percentage-mask</h2>
 		<input type="text" name="field6" ng-model="percentageWith4Decimals" ng-model-options="{allowInvalid:true}" ui-percentage-mask="4" min="percentageWithDefaultDecimals" max="115"> <br>
 		<span ng-bind="percentageWith4Decimals"></span> - {{form.field6.$error}}
 		<br>
+		<input type="text" name="field60" ng-model="percentageWith0Decimals" ng-model-options="{allowInvalid:true}" ui-percentage-mask="0" ui-percentage-value min="0" max="100"> <br>
+		<span ng-bind="percentageWith0Decimals"></span> - {{form.field60.$error}}
+		<br>
 		Percentage: <input type="text" name="field25" ng-model="percentWithDynamicDecimals" ng-model-options="{allowInvalid:true}" ui-percentage-mask="pdecimals">
 		Decimals: <input type="text" name="field26" ng-model="pdecimals" ui-number-mask=0><br>
 		<span ng-bind="percentWithDynamicDecimals"></span> - {{form.field25.$error}}

src/global/percentage/percentage.js

@@ -13,7 +13,12 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks) {
 		link: function(scope, element, attrs, ctrl) {
 			var decimalDelimiter = $locale.NUMBER_FORMATS.DECIMAL_SEP,
 				thousandsDelimiter = $locale.NUMBER_FORMATS.GROUP_SEP,
-				decimals = parseInt(attrs.uiPercentageMask);
+				decimals = parseInt(attrs.uiPercentageMask),
+				backspacePressed = false;
+
+			element.bind('keydown keypress', function(event) {
+				backspacePressed = event.which === 8;
+			});
 
 			var modelValue = {
 				multiplier : 100,
@@ -55,6 +60,9 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks) {
 				if (value.length > 1 && value.indexOf('%') === -1) {
 					valueToFormat = valueToFormat.slice(0,valueToFormat.length-1);
 				}
+				if (backspacePressed && value.length === 1 && value !== '%') {
+					valueToFormat = '0';
+				}
 				var formatedValue = viewMask.apply(valueToFormat) + ' %';
 				var actualNumber = parseFloat(modelMask.apply(valueToFormat));
 

src/global/percentage/percentage.spec.js

@@ -107,5 +107,41 @@ describe('ui.utils.masks.percentage', function() {
 				expect(input.getAttribute('value')).toEqual(formatedNumberAsString + percent);
 			}
 		});
+
+		it('should format percentage numbers with no decimal places', function() {
+			var formatterView = new StringMask('#.##0', {reverse: true}),
+				formatterModel =  new StringMask('###0', {reverse: true}),
+				numberToFormat = '', percent = ' %', formatedNumberAsString, formatedNumberAsNumber;
+
+			var input = element(by.model('percentageWith0Decimals')),
+				value = element(by.binding('percentageWith0Decimals'));
+
+			input.clear();
+			var i;
+			for (i = 1; i <= 9; i++) {
+				input.sendKeys(i);
+				numberToFormat += i;
+
+				formatedNumberAsString = formatterView.apply(numberToFormat);
+				expect(input.getAttribute('value')).toEqual(formatedNumberAsString + percent);
+
+				formatedNumberAsNumber = formatterModel.apply(numberToFormat);
+				expect(value.getText()).toEqual(formatedNumberAsNumber);
+			}
+
+			for (i = 9; i >= 1; i--) {
+				input.sendKeys(protractor.Key.BACK_SPACE);
+				numberToFormat = numberToFormat.slice(0, -1);
+				if (!numberToFormat) {
+					numberToFormat = '0';
+				} else {
+					formatedNumberAsNumber = formatterModel.apply(numberToFormat);
+					expect(value.getText()).toEqual(formatedNumberAsNumber);
+				}
+
+				formatedNumberAsString = formatterView.apply(numberToFormat);
+				expect(input.getAttribute('value')).toEqual(formatedNumberAsString + percent);
+			}
+		});
 	});
 });