Upgrades to intl-tel-input:14.0.0 and fixes protractor tests

.nvmrc

@@ -0,0 +1 @@
+6.9.0

.travis.yml

@@ -1,18 +1,17 @@
 language: node_js
 node_js:
-  - "iojs"
-  - "0.12"
-  - "4"
-  - "5"
   - "6"
+  - "7"
+  - "8"
+  - "9"
+  - "10"
 addons:
-  - "firefox": "36.0.4"
+  - "firefox": latest-esr
 install:
   - "npm install"
   - "./node_modules/bower/bin/bower install"
 before_script:
   - "export DISPLAY=:99.0"
-  - "sh -e /etc/init.d/xvfb start"
   - "npm run start &"
 script:
   - "npm run jshint"

README.md

@@ -79,3 +79,19 @@ This attribute allows run-time setting of the default country.
 ```html
 <input type="text" ng-model="model.tel" ng-intl-tel-input data-initial-country="gb">
 ```
+
+## Running tests
+
+Be sure to install the right node version. You can use [nvm](https://github.com/creationix/nvm):
+
+    nvm i
+
+Run Unit tests (jasmine):
+
+    npm run test
+
+Run End-to-end tests (protractor):
+
+    npm run webdriver-update
+    npm run start &
+    npm run protractor

bower.json

@@ -26,7 +26,7 @@
     "tests"
   ],
   "dependencies": {
-    "intl-tel-input": "~12.1.6"
+    "intl-tel-input": "14.0.0"
   },
   "devDependencies": {
     "angularjs": "^1.6.7",

dist/ng-intl-tel-input.js

@@ -1,4 +1,5 @@
-angular.module('ngIntlTelInput', []);angular.module('ngIntlTelInput')
+angular.module('ngIntlTelInput', []);
+angular.module('ngIntlTelInput')
   .provider('ngIntlTelInput', function () {
     var me = this;
     var props = {};
@@ -18,12 +19,13 @@ angular.module('ngIntlTelInput', []);angular.module('ngIntlTelInput')
             if (!window.intlTelInputUtils) {
               $log.warn('intlTelInputUtils is not defined. Formatting and validation will not work.');
             }
-            elm.intlTelInput(props);
+            return window.intlTelInput(elm[0], props);
           }
         },
       });
     }];
   });
+
 angular.module('ngIntlTelInput')
   .directive('ngIntlTelInput', ['ngIntlTelInput', '$log', '$window', '$parse',
     function (ngIntlTelInput, $log, $window, $parse) {
@@ -41,12 +43,12 @@ angular.module('ngIntlTelInput')
             ngIntlTelInput.set({initialCountry: attr.initialCountry});
           }
           // Initialize.
-          ngIntlTelInput.init(elm);
+          var iti = ngIntlTelInput.init(elm);
           // Set Selected Country Data.
           function setSelectedCountryData(model) {
             var getter = $parse(model);
             var setter = getter.assign;
-            setter(scope, elm.intlTelInput('getSelectedCountryData'));
+            setter(scope, iti.getSelectedCountryData());
           }
           // Handle Country Changes.
           function handleCountryChange() {
@@ -66,22 +68,22 @@ angular.module('ngIntlTelInput')
           ctrl.$validators.ngIntlTelInput = function (value) {
             // if phone number is deleted / empty do not run phone number validation
             if (value || elm[0].value.length > 0) {
-                return elm.intlTelInput('isValidNumber');
+                return iti.isValidNumber();
             } else {
                 return true;
             }
           };
           // Set model value to valid, formatted version.
           ctrl.$parsers.push(function (value) {
-            return elm.intlTelInput('getNumber');
+            return iti.getNumber();
           });
           // Set input value to model value and trigger evaluation.
           ctrl.$formatters.push(function (value) {
             if (value) {
               if(value.charAt(0) !== '+') {
                 value = '+' + value;
               }
-              elm.intlTelInput('setNumber', value);
+              iti.setNumber(value);
             }
             return value;
           });

index.html

@@ -85,7 +85,6 @@ <h2>Setting default country with <code>data-initial-country</code></h2>
 
 </div>
 
-<script src="node_modules/jquery/dist/jquery.js"></script>
 <script src="node_modules/angular/angular.js"></script>
 <script src="node_modules/intl-tel-input/build/js/utils.js"></script>
 <script src="node_modules/intl-tel-input/build/js/intlTelInput.js"></script>

karma.conf.js

@@ -19,7 +19,6 @@ module.exports = function (config) {
     ],
 
     files: [
-      'bower_components/jquery/dist/jquery.js',
       'bower_components/angularjs/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
       'bower_components/intl-tel-input/build/js/intlTelInput.js',
@@ -28,6 +27,7 @@ module.exports = function (config) {
       'ng-intl-tel-input.provider.js',
       'ng-intl-tel-input.directive.js',
       'node_modules/phantomjs-polyfills/polyfills/function-bind-polyfill.js',
+      'test-helpers.js',
       '*.spec.js'
     ]
 

ng-intl-tel-input.directive.js

@@ -15,12 +15,12 @@ angular.module('ngIntlTelInput')
             ngIntlTelInput.set({initialCountry: attr.initialCountry});
           }
           // Initialize.
-          ngIntlTelInput.init(elm);
+          var iti = ngIntlTelInput.init(elm);
           // Set Selected Country Data.
           function setSelectedCountryData(model) {
             var getter = $parse(model);
             var setter = getter.assign;
-            setter(scope, elm.intlTelInput('getSelectedCountryData'));
+            setter(scope, iti.getSelectedCountryData());
           }
           // Handle Country Changes.
           function handleCountryChange() {
@@ -40,22 +40,22 @@ angular.module('ngIntlTelInput')
           ctrl.$validators.ngIntlTelInput = function (value) {
             // if phone number is deleted / empty do not run phone number validation
             if (value || elm[0].value.length > 0) {
-                return elm.intlTelInput('isValidNumber');
+                return iti.isValidNumber();
             } else {
                 return true;
             }
           };
           // Set model value to valid, formatted version.
           ctrl.$parsers.push(function (value) {
-            return elm.intlTelInput('getNumber');
+            return iti.getNumber();
           });
           // Set input value to model value and trigger evaluation.
           ctrl.$formatters.push(function (value) {
             if (value) {
               if(value.charAt(0) !== '+') {
                 value = '+' + value;
               }
-              elm.intlTelInput('setNumber', value);
+              iti.setNumber(value);
             }
             return value;
           });

ng-intl-tel-input.directive.spec.js

@@ -14,26 +14,26 @@ describe('ng-intl-tel-input', function () {
     $compile(doc)($scope);
     $scope.$digest();
     form = $scope.form;
-    element = doc.find('input').eq(0);
+    element = (doc.find('input').eq(0))[0];
   }));
 
 
-  it('should apply the intl-tel-input jquery plugin to text fields', function () {
-    expect(doc.find('.intl-tel-input').length).toEqual(1);
+  it('should apply the intl-tel-input to text fields', function () {
+    expect(doc[0].querySelector('.intl-tel-input')).not.toBeNull();
   });
 
-  it('should apply the intl-tel-input jquery plugin to tel fields', inject(function ($compile, $rootScope) {
+  it('should apply the intl-tel-input to tel fields', inject(function ($compile, $rootScope) {
     doc = angular.element(
       '<form name="form">' +
       '<input ng-model="model.tel" type="tel" name="tel" ng-intl-tel-input />' +
       '</form>'
     );
     $compile(doc)($scope);
     $scope.$digest();
-    expect(doc.find('.intl-tel-input').length).toEqual(1);
+    expect(doc[0].querySelector('.intl-tel-input')).not.toBeNull();
   }));
 
-  it('should apply the intl-tel-input jquery plugin to text and tel fields', inject(function ($compile, $rootScope) {
+  it('should apply the intl-tel-input to text and tel fields', inject(function ($compile, $rootScope) {
     doc = angular.element(
       '<form name="form">' +
       '<input ng-model="model.tel" type="password" name="tel" ng-intl-tel-input />' +
@@ -44,51 +44,58 @@ describe('ng-intl-tel-input', function () {
     );
     $compile(doc)($scope);
     $scope.$digest();
-    expect(doc.find('.intl-tel-input').length).toEqual(0);
+    expect(doc[0].querySelector('.intl-tel-input')).toBeNull();
   }));
 
   it('should set the field as invalid with bad input', function () {
-    angular.element(element).val('07400 123456').trigger('input');
+    element.value = '07400 123456';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect(form.tel.$error.ngIntlTelInput).toBeDefined();
     expect(form.tel.$valid).toBe(false);
   });
 
   it('should set the field as invalid with input longer than > 0', function () {
-    angular.element(element).val('1').trigger('input');
+    element.value = '1';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect(form.tel.$error.ngIntlTelInput).toBeDefined();
     expect(form.tel.$valid).toBe(false);
   });
 
   it('should set the field as valid with good input', function () {
-    angular.element(element).val('2103128425').trigger('input');
+    element.value = '2103128425';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect(form.tel.$error.ngIntlTelInput).toBeUndefined();
     expect(form.tel.$valid).toBe(true);
   });
 
   it('should set the field as valid with empty input', function () {
-    angular.element(element).val('').trigger('input');
+    element.value = '';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect(form.tel.$error.ngIntlTelInput).toBeUndefined();
     expect(form.tel.$valid).toBe(true);
   });
 
   it('should set the model value to the full phone number with dial code', function () {
-    angular.element(element).val('2103128425').trigger('input');
+    element.value = '2103128425';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect($scope.model.tel).toEqual('+12103128425');
   });
 
   it('should set the model value to the full phone number with dial code and plus sign prefix', function () {
-    angular.element(element).val('+12103128425').trigger('input');
+    element.value = '+12103128425';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect($scope.model.tel).toEqual('+12103128425');
   });
 
   it('should not set the model value when invalid', function () {
-    angular.element(element).val('07400 123456').trigger('input');
+    element.value = '07400 123456';
+    element.dispatchEvent(new Event('input'));
     $scope.$digest();
     expect($scope.model.tel).toBeUndefined();
   });
@@ -101,8 +108,9 @@ describe('ng-intl-tel-input', function () {
     );
     $compile(doc)($scope);
     $scope.$digest();
-    element = doc.find('input').eq(0);
-    expect(element.intlTelInput('getSelectedCountryData').iso2).toEqual('af');
+
+    var iti = findLastCreatedItiInstance();
+    expect(iti.getSelectedCountryData().iso2).toEqual('af');
   }));
 
   it('should set the country when model value is present', inject(function ($compile) {
@@ -114,8 +122,9 @@ describe('ng-intl-tel-input', function () {
     );
     $compile(doc)($scope);
     $scope.$digest();
-    element = doc.find('input').eq(0);
-    expect(element.intlTelInput('getSelectedCountryData').iso2).toEqual('gb');
+
+    var iti = findLastCreatedItiInstance();
+    expect(iti.getSelectedCountryData().iso2).toEqual('gb');
   }));
 
   it('should set the country when model value is present with plus sign prefix', inject(function ($compile) {
@@ -127,19 +136,20 @@ describe('ng-intl-tel-input', function () {
     );
     $compile(doc)($scope);
     $scope.$digest();
-    element = doc.find('input').eq(0);
-    expect(element.intlTelInput('getSelectedCountryData').iso2).toEqual('gb');
+
+    var iti = findLastCreatedItiInstance();
+    expect(iti.getSelectedCountryData().iso2).toEqual('gb');
   }));
 
-  it('should apply the intl-tel-input jquery plugin to input fields without a type declaration', inject(function ($compile) {
+  it('should apply the intl-tel-input to input fields without a type declaration', inject(function ($compile) {
     doc = angular.element(
       '<form name="form">' +
       '<input ng-model="model.tel" name="tel" ng-intl-tel-input />' +
       '</form>'
     );
     $compile(doc)($scope);
     $scope.$digest();
-    expect(doc.find('.intl-tel-input').length).toEqual(1);
+    expect(doc[0].querySelector('.intl-tel-input')).not.toBeNull();
   }));
 
   it('should set the selected country data when data-selected-country attribute is present', inject(function ($compile) {

ng-intl-tel-input.provider.js

@@ -18,7 +18,7 @@ angular.module('ngIntlTelInput')
             if (!window.intlTelInputUtils) {
               $log.warn('intlTelInputUtils is not defined. Formatting and validation will not work.');
             }
-            elm.intlTelInput(props);
+            return window.intlTelInput(elm[0], props);
           }
         },
       });