├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENCE ├── README.md ├── bower.json ├── example ├── app.js └── index.html ├── package-lock.json ├── package.json ├── src └── numeric-directive.js └── test ├── numeric-test.js └── numeric.conf.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | test/coverage/ 2 | src/*.html 3 | /node_modules -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "node" 5 | 6 | env: 7 | global: 8 | CC_TEST_REPORTER_ID=f6086c3920602d6e039ca0a214e2b9696059a68ef8272c68f57c33dd8466940d 9 | 10 | before_install: 11 | - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter 12 | - chmod +x ./cc-test-reporter 13 | - export DISPLAY=:99.0 # Display number for xvfb (for headless browser testing) 14 | - sh -e /etc/init.d/xvfb start # Start xvfb (for headless browser testing) 15 | - ./cc-test-reporter before-build 16 | 17 | install: 18 | - npm install # Install npm dependencies 19 | - npm install -qg grunt-cli karma-cli istanbul codeclimate-test-reporter 20 | 21 | script: 22 | - npm test 23 | 24 | after_script: 25 | - ./cc-test-reporter format-coverage -t lcov test/coverage/lcov.info 26 | - ./cc-test-reporter upload-coverage -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2017 The angular-translate team and Pascal Precht 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-numeric-directive 2 | 3 | [![NPM](https://nodei.co/npm/angular-numeric-directive.png)](https://nodei.co/npm/angular-numeric-directive/) 4 | 5 | [![Build Status](https://travis-ci.org/epeschier/angular-numeric-directive.svg?branch=master)](http://travis-ci.org/epeschier/angular-numeric-directive) 6 | [![Code Climate](https://codeclimate.com/github/epeschier/angular-numeric-directive/badges/gpa.svg)](https://codeclimate.com/github/epeschier/angular-numeric-directive) 7 | [![Test Coverage](https://codeclimate.com/github/epeschier/angular-numeric-directive/badges/coverage.svg)](https://codeclimate.com/github/epeschier/angular-numeric-directive) 8 | [![NPM](https://img.shields.io/npm/v/angular-numeric-directive.svg)](https://www.npmjs.com/package/angular-numeric-directive) 9 | 10 | This angular directive prevents the user from entering non-numeric values. 11 | 12 | - There are checks on min and max values. When the value falls below the minumum the value is set to the minumum value. When the value exceeds the maxiumum, the value is set to the maximum. If the limit-min or limit-max attributes are set to false, the min or max values remain untouched. 13 | - Formatting is done on the blur event; thousand separator and decimal are based on the current Angular locale. 14 | - The number of decimals can be set. 15 | 16 | ## Install: 17 | bower install angular-numeric-directive --save 18 | 19 | npm install angular-numeric-directive --save 20 | 21 | ## Usage: 22 | 23 | 1. Include the numeric-directive as a dependency for your app. 24 | 25 | ```js 26 | angular.module('myApp', ['purplefox.numeric']) 27 | ``` 28 | 29 | 2. Use the directive in your view: 30 | 31 | ```html 32 | 33 | ``` 34 | 35 | ## Attributes 36 | 37 | **`max`**: maximum input value. Default undefined (no max) 38 | 39 | **`min`**: minimum input value. Default 0. 40 | 41 | **`decimals`**: number of decimals. Default 2. 42 | 43 | **`formatting`**: apply thousand separator formatting. Default true. 44 | 45 | **`limit-max`**: limit input to max value (value is capped). Default true. If set to false, the angular validations can be done like normal. 46 | 47 | **`limit-min`**: limit input to min value (value is capped). Default true. If set to false, the angular validations can be done like normal. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Erik Peschier", 3 | "name": "angular-numeric-directive", 4 | "description": "Angular numeric directive", 5 | "version": "1.2.1", 6 | "homepage": "http://github.com/epeschier/angular-numeric-directive", 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/epeschier/angular-numeric-directive" 10 | }, 11 | "main": "./src/numeric-directive.js", 12 | "ignore": [ 13 | "**/.*", 14 | "node_modules", 15 | "components" 16 | ], 17 | "devDependencies": { 18 | "angular": "~1.6.9", 19 | "angular-mocks": "~1.6.9" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module('NumericExample', ['purplefox.numeric']) 3 | 4 | .controller('NumericCtrl', function () { 5 | var vm = this; 6 | 7 | vm.value = 12.34; 8 | }); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Angular Numeric Directive

17 |

A numeric directive. Capable of minimizing and maximizing values, formatting to decimal precision and thousand separators and limiting number of characters.

18 |

19 | Download on GitHub 20 |

21 |
22 | 23 |
24 | 25 |

Model value: {{vm.value}}

26 |

Error model: {{myForm.myNumber.$error}}

27 |

Tab out of input to see the changes.

28 |
29 | 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-numeric-directive", 3 | "version": "1.2.1", 4 | "description": "Angular numeric directive", 5 | "main": "src/numeric-directive.js", 6 | "dependencies": { 7 | "angular": "^1.7.2" 8 | }, 9 | "devDependencies": { 10 | "angular-mocks": "^1.7.2", 11 | "bower": "^1.3.12", 12 | "jasmine-core": "^3.1.0", 13 | "karma": "^2.0.4", 14 | "karma-chrome-launcher": "^2.2.0", 15 | "karma-coverage": "^1.1.2", 16 | "karma-jasmine": "^1.1.2", 17 | "karma-phantomjs-launcher": "^1.0.4" 18 | }, 19 | "directories": { 20 | "example": "example", 21 | "test": "test" 22 | }, 23 | "scripts": { 24 | "test": "./node_modules/.bin/karma start test/numeric.conf.js --single-run --browsers PhantomJS" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/epeschier/angular-numeric-directive" 29 | }, 30 | "keywords": [ 31 | "angular", 32 | "numeric" 33 | ], 34 | "author": "Erik Peschier", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/epeschier/angular-numeric-directive/issues" 38 | }, 39 | "homepage": "https://github.com/epeschier/angular-numeric-directive" 40 | } 41 | -------------------------------------------------------------------------------- /src/numeric-directive.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | if(typeof module !== 'undefined') { 4 | module.exports = 'purplefox.numeric'; 5 | } 6 | 7 | /* global angular */ 8 | angular 9 | .module('purplefox.numeric', []) 10 | .directive('numeric', numeric); 11 | 12 | numeric.$inject = ['$locale']; 13 | 14 | function numeric($locale) { 15 | // Usage: 16 | // 17 | // Creates: 18 | // 19 | var directive = { 20 | link: link, 21 | require: 'ngModel', 22 | restrict: 'A' 23 | }; 24 | return directive; 25 | 26 | 27 | function link(scope, el, attrs, ngModelCtrl) { 28 | var decimalSeparator = $locale.NUMBER_FORMATS.DECIMAL_SEP; 29 | var groupSeparator = $locale.NUMBER_FORMATS.GROUP_SEP; 30 | 31 | // Create new regular expression with current decimal separator. 32 | var NUMBER_REGEXP = "^\\s*(\\-|\\+)?(\\d+|(\\d*(\\.\\d*)))\\s*$"; 33 | var regex = new RegExp(NUMBER_REGEXP); 34 | 35 | var formatting = true; 36 | var maxInputLength = 16; // Maximum input length. Default max ECMA script. 37 | var max; // Maximum value. Default undefined. 38 | var min; // Minimum value. Default undefined. 39 | var limitMax = true; // Limit input to max value (value is capped). Default true. 40 | var limitMin = true; // Limit input to min value (value is capped). Default true. 41 | var decimals = 2; // Number of decimals. Default 2. 42 | var lastValidValue; // Last valid value. 43 | 44 | // Create parsers and formatters. 45 | ngModelCtrl.$parsers.push(parseViewValue); 46 | ngModelCtrl.$parsers.push(minValidator); 47 | ngModelCtrl.$parsers.push(maxValidator); 48 | ngModelCtrl.$formatters.push(formatViewValue); 49 | 50 | el.bind('blur', onBlur); // Event handler for the leave event. 51 | el.bind('focus', onFocus); // Event handler for the focus event. 52 | 53 | // Put a watch on the min, max and decimal value changes in the attribute. 54 | scope.$watch(attrs.min, onMinChanged); 55 | scope.$watch(attrs.max, onMaxChanged); 56 | scope.$watch(attrs.limitMax, onLimitMaxChanged); 57 | scope.$watch(attrs.limitMin, onLimitMinChanged); 58 | scope.$watch(attrs.decimals, onDecimalsChanged); 59 | scope.$watch(attrs.formatting, onFormattingChanged); 60 | 61 | // Setup decimal formatting. 62 | if (decimals > -1) { 63 | ngModelCtrl.$parsers.push(function (value) { 64 | return (value) ? round(value) : value; 65 | }); 66 | ngModelCtrl.$formatters.push(function (value) { 67 | return (value || value === 0) ? formatPrecision(value) : value; 68 | }); 69 | } 70 | 71 | function onMinChanged(value) { 72 | if (!angular.isUndefined(value)) { 73 | min = parseFloat(value); 74 | lastValidValue = minValidator(ngModelCtrl.$modelValue); 75 | ngModelCtrl.$setViewValue(formatPrecision(lastValidValue)); 76 | ngModelCtrl.$render(); 77 | } 78 | } 79 | 80 | function onMaxChanged(value) { 81 | if (!angular.isUndefined(value)) { 82 | max = parseFloat(value); 83 | maxInputLength = calculateMaxLength(max); 84 | lastValidValue = maxValidator(ngModelCtrl.$modelValue); 85 | ngModelCtrl.$setViewValue(formatPrecision(lastValidValue)); 86 | ngModelCtrl.$render(); 87 | } 88 | } 89 | 90 | function onDecimalsChanged(value) { 91 | if (!angular.isUndefined(value)) { 92 | decimals = parseFloat(value); 93 | maxInputLength = calculateMaxLength(max); 94 | if (lastValidValue !== undefined) { 95 | ngModelCtrl.$setViewValue(formatPrecision(lastValidValue)); 96 | ngModelCtrl.$render(); 97 | } 98 | } 99 | } 100 | 101 | function onFormattingChanged(value) { 102 | if (!angular.isUndefined(value)) { 103 | formatting = (value !== false); 104 | ngModelCtrl.$setViewValue(formatPrecision(lastValidValue)); 105 | ngModelCtrl.$render(); 106 | } 107 | } 108 | 109 | function onLimitMinChanged(value) { 110 | if (!angular.isUndefined(value)) { 111 | limitMin = (value == "true"); 112 | } 113 | } 114 | 115 | function onLimitMaxChanged(value) { 116 | if (!angular.isUndefined(value)) { 117 | limitMax = (value == "true"); 118 | } 119 | } 120 | 121 | /** 122 | * Round the value to the closest decimal. 123 | */ 124 | function round(value) { 125 | var d = Math.pow(10, decimals); 126 | return Math.round(value * d) / d; 127 | } 128 | 129 | /** 130 | * Format a number with the thousand group separator. 131 | */ 132 | function numberWithCommas(value) { 133 | if (formatting) { 134 | var parts = (""+value).split(decimalSeparator); 135 | parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator); 136 | return parts.join(decimalSeparator); 137 | } 138 | else { 139 | // No formatting applies. 140 | return value; 141 | } 142 | } 143 | 144 | /** 145 | * Format a value with thousand group separator and correct decimal char. 146 | */ 147 | function formatPrecision(value) { 148 | if (!(value || value === 0)) { 149 | return ''; 150 | } 151 | var formattedValue = parseFloat(value).toFixed(decimals); 152 | formattedValue = formattedValue.replace('.', decimalSeparator); 153 | return numberWithCommas(formattedValue); 154 | } 155 | 156 | function formatViewValue(value) { 157 | return ngModelCtrl.$isEmpty(value) ? '' : '' + value; 158 | } 159 | 160 | /** 161 | * Parse the view value. 162 | */ 163 | function parseViewValue(value) { 164 | if (angular.isUndefined(value)) { 165 | value = ''; 166 | } 167 | value = (""+value).replace(decimalSeparator, '.'); 168 | 169 | // Handle leading decimal point, like ".5" 170 | if (value.indexOf('.') === 0) { 171 | value = '0' + value; 172 | } 173 | 174 | // Allow "-" inputs only when min < 0 175 | if (value.indexOf('-') === 0) { 176 | if (min >= 0) { 177 | value = null; 178 | ngModelCtrl.$setViewValue(formatViewValue(lastValidValue)); 179 | ngModelCtrl.$render(); 180 | } 181 | else if (value === '-') { 182 | value = ''; 183 | } 184 | } 185 | 186 | var empty = ngModelCtrl.$isEmpty(value); 187 | if (empty) { 188 | lastValidValue = ''; 189 | //ngModelCtrl.$modelValue = undefined; 190 | } 191 | else { 192 | if (regex.test(value) && (value.length <= maxInputLength)) { 193 | if ((value > max) && limitMax) { 194 | lastValidValue = max; 195 | } 196 | else if ((value < min) && limitMin) { 197 | lastValidValue = min; 198 | } 199 | else { 200 | lastValidValue = (value === '') ? null : parseFloat(value); 201 | } 202 | } 203 | else { 204 | // Render the last valid input in the field 205 | ngModelCtrl.$setViewValue(formatViewValue(lastValidValue)); 206 | ngModelCtrl.$render(); 207 | } 208 | } 209 | 210 | return lastValidValue; 211 | } 212 | 213 | /** 214 | * Calculate the maximum input length in characters. 215 | * If no maximum the input will be limited to 16; the maximum ECMA script int. 216 | */ 217 | function calculateMaxLength(value) { 218 | var length = 16; 219 | if (!angular.isUndefined(value)) { 220 | length = Math.floor(value).toString().length; 221 | } 222 | if (decimals > 0) { 223 | // Add extra length for the decimals plus one for the decimal separator. 224 | length += decimals + 1; 225 | } 226 | if (min < 0) { 227 | // Add extra length for the - sign. 228 | length++; 229 | } 230 | return length; 231 | } 232 | 233 | /** 234 | * Value validator for min and max. 235 | */ 236 | function minmaxValidator(value, testValue, validityName, limit, compareFunction) { 237 | if (!angular.isUndefined(testValue) && limit) { 238 | if (!ngModelCtrl.$isEmpty(value) && compareFunction) { 239 | return testValue; 240 | } else { 241 | return value; 242 | } 243 | } 244 | else { 245 | if (!limit) { 246 | ngModelCtrl.$setValidity(validityName, !compareFunction); 247 | } 248 | return value; 249 | } 250 | } 251 | 252 | /** 253 | * Minimum value validator. 254 | */ 255 | function minValidator(value) { 256 | return minmaxValidator(value, min, 'min', limitMin, (value < min)); 257 | } 258 | 259 | /** 260 | * Maximum value validator. 261 | */ 262 | function maxValidator(value) { 263 | return minmaxValidator(value, max, 'max', limitMax, (value > max)); 264 | } 265 | 266 | /** 267 | * Function for handeling the blur (leave) event on the control. 268 | */ 269 | function onBlur() { 270 | var value = ngModelCtrl.$modelValue; 271 | if (!angular.isUndefined(value)) { 272 | // Format the model value. 273 | ngModelCtrl.$viewValue = formatPrecision(value); 274 | ngModelCtrl.$render(); 275 | } 276 | } 277 | 278 | /** 279 | * Function for handeling the focus (enter) event on the control. 280 | * On focus show the value without the group separators. 281 | */ 282 | function onFocus() { 283 | var value = ngModelCtrl.$modelValue; 284 | if (!angular.isUndefined(value)) { 285 | ngModelCtrl.$viewValue = (""+value).replace(".", decimalSeparator); 286 | ngModelCtrl.$render(); 287 | } 288 | } 289 | } 290 | } 291 | 292 | })(); 293 | -------------------------------------------------------------------------------- /test/numeric-test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('angular-numeric-directive', function () { 4 | var $compile, scope, inputEl, form; 5 | 6 | function setValue(val) { 7 | form.number.$setViewValue(val); 8 | scope.$digest(); 9 | } 10 | 11 | function setupDirective(attrs) { 12 | attrs = attrs || ''; 13 | 14 | var formEl = angular.element( 15 | '
' + 16 | ' ' + 17 | ' ' + 18 | ' ' + 19 | '
'); 20 | $compile(formEl)(scope); 21 | 22 | scope.$digest(); 23 | 24 | form = scope.form; 25 | inputEl = formEl.find('input') 26 | } 27 | 28 | 29 | beforeEach(module('purplefox.numeric')); 30 | beforeEach(inject(function (_$compile_, $rootScope) { 31 | $compile = _$compile_; 32 | scope = $rootScope.$new(); 33 | scope.model = {}; 34 | })); 35 | 36 | describe('when ngModel is undefined', function () { 37 | beforeEach(function () { 38 | setupDirective(); 39 | setValue(undefined); 40 | }); 41 | 42 | it('displays an empty string', function () { 43 | expect(inputEl.val()).toEqual(''); 44 | expect(form.number.$valid).toBe(true); 45 | }); 46 | }); 47 | 48 | describe('when min = 0 (default)', function () { 49 | beforeEach(function () { 50 | setupDirective(); 51 | }); 52 | 53 | it('displays an empty string in the view by default', function () { 54 | expect(inputEl.val()).toEqual(''); 55 | }) 56 | 57 | it('accepts in-range values', function () { 58 | setValue('50.4'); 59 | expect(scope.model.number).toEqual(50.4); 60 | }); 61 | 62 | it('accepts decimals without a leading zero', function () { 63 | setValue('.5'); 64 | expect(scope.model.number).toEqual(0.5); 65 | }); 66 | 67 | it('rounds off to two decimal points', function () { 68 | setValue('41.999'); 69 | expect(scope.model.number).toEqual(42); 70 | }); 71 | 72 | it('disallows negative values', function () { 73 | setValue('-5'); 74 | expect(inputEl.val()).toEqual(''); 75 | }); 76 | 77 | it('reverts to the last valid value on invalid char', function () { 78 | // A valid value is first entered 79 | setValue('50.4'); 80 | 81 | // Then "a" is entered next 82 | setValue('50.4a'); 83 | 84 | expect(scope.model.number).toEqual(50.4); 85 | expect(inputEl.val()).toEqual('50.4'); 86 | }); 87 | 88 | it('formats decimals on blur', function () { 89 | setValue('50'); 90 | inputEl.triggerHandler('blur'); 91 | expect(inputEl.val()).toEqual('50.00'); 92 | }); 93 | 94 | it('formats thousands on blur', function () { 95 | setValue('1234'); 96 | inputEl.triggerHandler('blur'); 97 | expect(inputEl.val()).toEqual('1,234.00'); 98 | }); 99 | 100 | it('removes format on focus', function () { 101 | setValue('1234.56'); 102 | inputEl.triggerHandler('focus'); 103 | expect(inputEl.val()).toEqual('1234.56'); 104 | }); 105 | }); 106 | 107 | describe('when min < 0', function () { 108 | beforeEach(function () { 109 | setupDirective('min="-10"'); 110 | }); 111 | 112 | it('allows negative values', function () { 113 | setValue('-5.41'); 114 | expect(scope.model.number).toEqual(-5.41); 115 | //expect(inputEl.val()).toEqual('-5.40'); 116 | }); 117 | 118 | it('clears the value', function () { 119 | setValue('-'); 120 | //expect(scope.model.number).toEqual(-5.41); 121 | expect(inputEl.val()).toEqual(''); 122 | }); 123 | 124 | it('takes the min value', function () { 125 | setValue('-20'); 126 | inputEl.triggerHandler('blur'); 127 | expect(inputEl.val()).toEqual('-10.00'); 128 | expect(scope.model.number).toEqual(-10); 129 | }); 130 | 131 | it('limits the input', function () { 132 | setupDirective('min="-20" max="100"'); 133 | setValue('1000'); 134 | inputEl.triggerHandler('blur'); 135 | expect(inputEl.val()).toEqual('100.00'); 136 | expect(scope.model.number).toEqual(100.00); 137 | }); 138 | }); 139 | 140 | describe('when value < min', function () { 141 | it('takes the min value', function () { 142 | setupDirective('min="20"'); 143 | setValue('10'); 144 | inputEl.triggerHandler('blur'); 145 | expect(inputEl.val()).toEqual('20.00'); 146 | }); 147 | }); 148 | 149 | describe('when value > max', function () { 150 | it('takes the max value', function () { 151 | setupDirective('max="100"'); 152 | setValue('100.5'); 153 | inputEl.triggerHandler('blur'); 154 | expect(inputEl.val()).toEqual('100.00'); 155 | }); 156 | }); 157 | 158 | describe('when decimals = 0', function () { 159 | it('should round to int', function () { 160 | setupDirective('decimals="0"'); 161 | setValue('42.01'); 162 | expect(scope.model.number).toEqual(42); 163 | }); 164 | }); 165 | 166 | describe('when formatting = false', function () { 167 | it('should not format', function () { 168 | setupDirective('formatting="false"'); 169 | setValue('1234.56'); 170 | inputEl.triggerHandler('blur'); 171 | expect(inputEl.val()).toEqual('1234.56'); 172 | }); 173 | }); 174 | 175 | describe('when value has no min', function () { 176 | it('takes the value', function () { 177 | setupDirective(); 178 | setValue('-10'); 179 | inputEl.triggerHandler('blur'); 180 | expect(inputEl.val()).toEqual('-10.00'); 181 | }); 182 | }); 183 | 184 | describe('when min = 0', function () { 185 | it('does not accept minus', function () { 186 | setupDirective('min="0"'); 187 | setValue('-10'); 188 | inputEl.triggerHandler('blur'); 189 | expect(inputEl.val()).toEqual(''); 190 | }); 191 | }); 192 | }); -------------------------------------------------------------------------------- /test/numeric.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Fri Feb 06 2015 20:55:49 GMT+0100 (W. Europe Standard Time) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['jasmine'], 14 | 15 | 16 | // list of files / patterns to load in the browser 17 | files: [ 18 | '../node_modules/angular/angular.js', 19 | '../node_modules/angular-mocks/angular-mocks.js', 20 | '../src/numeric-directive.js', 21 | 'numeric-test.js' 22 | ], 23 | 24 | plugins:[ 25 | 'karma-jasmine', 26 | 'karma-coverage', 27 | 'karma-chrome-launcher', 28 | 'karma-phantomjs-launcher', 29 | ], 30 | 31 | // list of files to exclude 32 | exclude: [ 33 | ], 34 | 35 | // preprocess matching files before serving them to the browser 36 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 37 | preprocessors: { 38 | '../src/**/*.js': ['coverage'] 39 | }, 40 | 41 | 42 | // test results reporter to use 43 | // possible values: 'dots', 'progress' 44 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 45 | reporters: ['progress', 'coverage'], 46 | 47 | coverageReporter: { 48 | type : 'lcov', 49 | dir : 'coverage', 50 | subdir: '.' 51 | }, 52 | 53 | // web server port 54 | port: 9876, 55 | 56 | 57 | // enable / disable colors in the output (reporters and logs) 58 | colors: true, 59 | 60 | 61 | // level of logging 62 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 63 | logLevel: config.LOG_INFO, 64 | 65 | 66 | // enable / disable watching file and executing tests whenever any file changes 67 | autoWatch: true, 68 | 69 | 70 | // start these browsers 71 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 72 | browsers: ['Chrome'], 73 | 74 | 75 | // Continuous Integration mode 76 | // if true, Karma captures browsers, runs the tests and exits 77 | singleRun: false 78 | }); 79 | }; 80 | --------------------------------------------------------------------------------