forked from assisrafael/angular-input-masks
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(uiChPhoneNumber): add ch (Switzerland) phone mask
* Added ch (switzerland) phone mask * little clean up * Fixed failing tests
- Loading branch information
1 parent
1174428
commit f3723c8
Showing
10 changed files
with
254 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
'use strict'; | ||
|
||
module.exports = require('./src/angular-input-masks.ch'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
'use strict'; | ||
|
||
describe('angular-input-masks-standalone', function() { | ||
var moduleName = require('./ch.js'); | ||
|
||
beforeEach(angular.mock.module('ui.utils.masks')); | ||
|
||
it('should export the module name', function() { | ||
expect(moduleName).toBe('ui.utils.masks'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
'use strict'; | ||
|
||
module.exports = angular.module('ui.utils.masks', [ | ||
require('./global/global-masks'), | ||
require('./ch/ch-masks') | ||
]).name; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
'use strict'; | ||
|
||
var m = angular.module('ui.utils.masks.ch', [ | ||
require('../helpers'), | ||
]) | ||
.directive('uiChPhoneNumber', require('./phone/ch-phone')); | ||
|
||
module.exports = m.name; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>CH Phone Number Spec</title> | ||
<script src="/node_modules/angular/angular.min.js"></script> | ||
<script src="/releases/angular-input-masks-dependencies.js"></script> | ||
<script src="/releases/angular-input-masks.ch.js"></script> | ||
<script> | ||
angular.module('app', ['ui.utils.masks']) | ||
.controller('ctrl', function ctrl($scope) { | ||
$scope.initializedPhoneNumber = '41790000000'; | ||
}); | ||
</script> | ||
</head> | ||
<body ng-app="app"> | ||
<form name="form" ng-controller="ctrl"> | ||
<h2>ui-br-phone-number</h2> | ||
<input type="text" name="freeLinePhoneNumber" ng-model="freeLinePhoneNumber" ng-model-options="{allowInvalid:true}" ui-ch-phone-number><br> | ||
<span ng-bind="freeLinePhoneNumber">-</span> - {{form.freeLinePhoneNumber.$error}}<br> | ||
<br> | ||
<input type="text" name="phoneNumber" ng-model="phoneNumber" ng-model-options="{allowInvalid:true}" ui-ch-phone-number><br> | ||
<span ng-bind="phoneNumber">-</span> - {{form.phoneNumber.$error}}<br> | ||
<br> | ||
<input type="text" name="initializedPhoneNumber" ng-model="initializedPhoneNumber" ng-model-options="{allowInvalid:true}" ui-ch-phone-number><br> | ||
<span ng-bind="initializedPhoneNumber">-</span> - {{form.initializedPhoneNumber.$error}}<br> | ||
</form> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
'use strict'; | ||
|
||
var StringMask = require('string-mask'); | ||
var maskFactory = require('mask-factory'); | ||
|
||
var phoneMask = new StringMask('+00 00 000 00 00'); | ||
|
||
module.exports = maskFactory({ | ||
clearValue: function(rawValue) { | ||
return rawValue.toString().replace(/[^0-9]/g, '').slice(0, 11); | ||
}, | ||
format: function(cleanValue) { | ||
var formatedValue; | ||
|
||
formatedValue = phoneMask.apply(cleanValue) || ''; | ||
|
||
return formatedValue.trim().replace(/[^0-9]$/, ''); | ||
}, | ||
validations: { | ||
chPhoneNumber: function(value) { | ||
var valueLength = value && value.toString().length; | ||
return valueLength === 11; | ||
} | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
'use strict'; | ||
|
||
describe('ui.utils.masks.number', function() { | ||
it('should load the demo page', function() { | ||
browser.get('/src/ch/phone/ch-phone.html'); | ||
expect(browser.getTitle()).toEqual('CH Phone Number Spec'); | ||
}); | ||
|
||
describe('ui-ch-phone-number:', function() { | ||
it('should apply a phone number mask while the user is typping:', function() { | ||
var BS = protractor.Key.BACK_SPACE; | ||
|
||
var tests = [ | ||
{key:'1', viewValue:'+1', modelValue:'1'}, | ||
{key:'2', viewValue:'+12', modelValue:'12'}, | ||
{key:'3', viewValue:'+12 3', modelValue:'123'}, | ||
{key:'4', viewValue:'+12 34', modelValue:'1234'}, | ||
{key:'5', viewValue:'+12 34 5', modelValue:'12345'}, | ||
{key:'6', viewValue:'+12 34 56', modelValue:'123456'}, | ||
{key:'7', viewValue:'+12 34 567', modelValue:'1234567'}, | ||
{key:'8', viewValue:'+12 34 567 8', modelValue:'12345678'}, | ||
{key:'9', viewValue:'+12 34 567 89', modelValue:'123456789'}, | ||
{key:'0', viewValue:'+12 34 567 89 0', modelValue:'1234567890'}, | ||
{key:'1', viewValue:'+12 34 567 89 01', modelValue:'12345678901'}, | ||
{key:'2', viewValue:'+12 34 567 89 01', modelValue:'12345678901'}, | ||
{key:BS, viewValue:'+12 34 567 89 0', modelValue:'1234567890'}, | ||
{key:BS, viewValue:'+12 34 567 89 ', modelValue:'123456789'}, | ||
{key:BS, viewValue:'+12 34 567 89', modelValue:'123456789'}, | ||
{key:BS, viewValue:'+12 34 567 8', modelValue:'12345678'}, | ||
{key:BS, viewValue:'+12 34 567 ', modelValue:'1234567'}, | ||
{key:BS, viewValue:'+12 34 567', modelValue:'1234567'}, | ||
{key:BS, viewValue:'+12 34 56', modelValue:'123456'}, | ||
{key:BS, viewValue:'+12 34 5', modelValue:'12345'}, | ||
{key:BS, viewValue:'+12 34 ', modelValue:'1234'}, | ||
{key:BS, viewValue:'+12 34', modelValue:'1234'}, | ||
{key:BS, viewValue:'+12 3', modelValue:'123'}, | ||
{key:BS, viewValue:'+12 ', modelValue:'12'}, | ||
{key:BS, viewValue:'+12', modelValue:'12'}, | ||
{key:BS, viewValue:'+1', modelValue:'1'}, | ||
{key:BS, viewValue:'', modelValue:''}, | ||
]; | ||
|
||
var input = element(by.model('phoneNumber')), | ||
value = element(by.exactBinding('phoneNumber')); | ||
|
||
for (var i = 0; i < tests.length; i++) { | ||
input.sendKeys(tests[i].key); | ||
expect(input.getAttribute('value')).toEqual(tests[i].viewValue); | ||
expect(value.getText()).toEqual(tests[i].modelValue); | ||
} | ||
}); | ||
|
||
it('should apply a phone number mask in a model with default value:', function() { | ||
var BS = protractor.Key.BACK_SPACE; | ||
|
||
var tests = [ | ||
{key:'1', viewValue:'+1', modelValue:'1'}, | ||
{key:'2', viewValue:'+12', modelValue:'12'}, | ||
{key:'3', viewValue:'+12 3', modelValue:'123'}, | ||
{key:'4', viewValue:'+12 34', modelValue:'1234'}, | ||
{key:'5', viewValue:'+12 34 5', modelValue:'12345'}, | ||
{key:'6', viewValue:'+12 34 56', modelValue:'123456'}, | ||
{key:'7', viewValue:'+12 34 567', modelValue:'1234567'}, | ||
{key:BS, viewValue:'+12 34 56', modelValue:'123456'}, | ||
{key:BS, viewValue:'+12 34 5', modelValue:'12345'}, | ||
{key:BS, viewValue:'+12 34 ', modelValue:'1234'}, | ||
{key:BS, viewValue:'+12 34', modelValue:'1234'}, | ||
{key:BS, viewValue:'+12 3', modelValue:'123'}, | ||
{key:BS, viewValue:'+12 ', modelValue:'12'}, | ||
{key:BS, viewValue:'+12', modelValue:'12'}, | ||
{key:BS, viewValue:'+1', modelValue:'1'}, | ||
{key:BS, viewValue:'', modelValue:''}, | ||
]; | ||
|
||
var input = element(by.model('initializedPhoneNumber')), | ||
value = element(by.exactBinding('initializedPhoneNumber')); | ||
|
||
expect(input.getAttribute('value')).toEqual('+41 79 000 00 00'); | ||
input.clear(); | ||
|
||
for (var i = 0; i < tests.length; i++) { | ||
input.sendKeys(tests[i].key); | ||
expect(input.getAttribute('value')).toEqual(tests[i].viewValue); | ||
expect(value.getText()).toEqual(tests[i].modelValue); | ||
} | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
'use strict'; | ||
|
||
require('../ch-masks'); | ||
|
||
describe('ui-ch-phone-number', function() { | ||
beforeEach(angular.mock.module('ui.utils.masks.ch')); | ||
|
||
it('should throw an error if used without ng-model', function() { | ||
expect(function() { | ||
TestUtil.compile('<input ui-ch-phone-number>'); | ||
}).toThrow(); | ||
}); | ||
|
||
it('should register a $parser and a $formatter', function() { | ||
var input = TestUtil.compile('<input ng-model="model">'); | ||
var model = input.controller('ngModel'); | ||
|
||
var maskedInput = TestUtil.compile('<input ng-model="maskedModel" ui-ch-phone-number>'); | ||
var maskedModel = maskedInput.controller('ngModel'); | ||
|
||
expect(maskedModel.$parsers.length).toBe(model.$parsers.length + 1); | ||
expect(maskedModel.$formatters.length).toBe(model.$formatters.length + 1); | ||
}); | ||
|
||
it('should format initial model values', function() { | ||
var input = TestUtil.compile('<input ng-model="model" ui-ch-phone-number>', { | ||
model: '41790000000' | ||
}); | ||
|
||
var model = input.controller('ngModel'); | ||
expect(model.$viewValue).toBe('+41 79 000 00 00'); | ||
}); | ||
|
||
it('should ignore non digits', function() { | ||
var input = TestUtil.compile('<input ng-model="model" ng-model-options="{allowInvalid:true}"' + | ||
' ui-ch-phone-number>'); | ||
var model = input.controller('ngModel'); | ||
|
||
var tests = [ | ||
{value:'@', viewValue:'', modelValue:''}, | ||
{value:'2-', viewValue:'+2', modelValue:'2'}, | ||
{value:'23a', viewValue:'+23', modelValue:'23'}, | ||
{value:'23_34', viewValue:'+23 34', modelValue:'2334'}, | ||
{value:'23346!', viewValue:'+23 34 6', modelValue:'23346'}, | ||
{value:'23346!324', viewValue:'+23 34 632 4', modelValue:'23346324'}, | ||
]; | ||
|
||
tests.forEach(function(test) { | ||
input.val(test.value).triggerHandler('input'); | ||
expect(model.$viewValue).toBe(test.viewValue); | ||
expect(model.$modelValue).toBe(test.modelValue); | ||
}); | ||
}); | ||
|
||
it('should validate a phone number', function() { | ||
var input = TestUtil.compile('<input ng-model="model" ui-ch-phone-number>', { | ||
model: '417900' | ||
}); | ||
|
||
var model = input.controller('ngModel'); | ||
expect(model.$error.chPhoneNumber).toBe(true); | ||
input.val('41790000000').triggerHandler('input'); | ||
expect(model.$error.chPhoneNumber).toBeUndefined(); | ||
}); | ||
|
||
it('should use the type of the model value (if initialized)', function() { | ||
var input = TestUtil.compile('<input ng-model="model" ui-ch-phone-number>', { | ||
model: '41790000000' | ||
}); | ||
|
||
var model = input.controller('ngModel'); | ||
expect(model.$viewValue).toBe('+41 79 000 00 00'); | ||
expect(model.$modelValue).toBe('41790000000'); | ||
input.val('41619618686').triggerHandler('input'); | ||
expect(model.$viewValue).toBe('+41 61 961 86 86'); | ||
expect(model.$modelValue).toBe('41619618686'); | ||
}); | ||
}); |