tests(jQuery): test on both oldest & latest supported jQuery version (+ a minor jqLite refactor)

.travis.yml

@@ -19,6 +19,7 @@ env:
     - JOB=unit BROWSER_PROVIDER=saucelabs
     - JOB=docs-e2e BROWSER_PROVIDER=saucelabs
     - JOB=e2e TEST_TARGET=jqlite BROWSER_PROVIDER=saucelabs
+    - JOB=e2e TEST_TARGET=jquery-2.1 BROWSER_PROVIDER=saucelabs
     - JOB=e2e TEST_TARGET=jquery BROWSER_PROVIDER=saucelabs
   global:
     - CXX=g++-4.8  # node 4 likes the G++ v4.8 compiler

Gruntfile.js

@@ -79,6 +79,7 @@ module.exports = function(grunt) {
     tests: {
       jqlite: 'karma-jqlite.conf.js',
       jquery: 'karma-jquery.conf.js',
+      'jquery-2.1': 'karma-jquery-2.1.conf.js',
       docs: 'karma-docs.conf.js',
       modules: 'karma-modules.conf.js'
     },
@@ -87,6 +88,7 @@ module.exports = function(grunt) {
     autotest: {
       jqlite: 'karma-jqlite.conf.js',
       jquery: 'karma-jquery.conf.js',
+      'jquery-2.1': 'karma-jquery-2.1.conf.js',
       modules: 'karma-modules.conf.js',
       docs: 'karma-docs.conf.js'
     },
@@ -344,10 +346,11 @@ module.exports = function(grunt) {
   //alias tasks
   grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['jshint', 'jscs', 'package', 'test:unit', 'test:promises-aplus', 'tests:docs', 'test:protractor']);
   grunt.registerTask('test:jqlite', 'Run the unit tests with Karma' , ['tests:jqlite']);
-  grunt.registerTask('test:jquery', 'Run the jQuery unit tests with Karma', ['tests:jquery']);
+  grunt.registerTask('test:jquery', 'Run the jQuery (latest) unit tests with Karma', ['tests:jquery']);
+  grunt.registerTask('test:jquery-2.1', 'Run the jQuery 2.1 unit tests with Karma', ['tests:jquery-2.1']);
   grunt.registerTask('test:modules', 'Run the Karma module tests with Karma', ['build', 'tests:modules']);
   grunt.registerTask('test:docs', 'Run the doc-page tests with Karma', ['package', 'tests:docs']);
-  grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', ['test:jqlite', 'test:jquery', 'test:modules']);
+  grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', ['test:jqlite', 'test:jquery', 'test:jquery-2.1', 'test:modules']);
   grunt.registerTask('test:protractor', 'Run the end to end tests with Protractor and keep a test server running in the background', ['webdriver', 'connect:testserver', 'protractor:normal']);
   grunt.registerTask('test:travis-protractor', 'Run the end to end tests with Protractor for Travis CI builds', ['connect:testserver', 'protractor:travis']);
   grunt.registerTask('test:ci-protractor', 'Run the end to end tests with Protractor for Jenkins CI builds', ['webdriver', 'connect:testserver', 'protractor:jenkins']);

angularFiles.js

@@ -226,6 +226,15 @@ var angularFiles = {
     '@angularTest'
   ],
 
+  'karmaJqueryOld': [
+    'bower_components/jquery-2.1/dist/jquery.js',
+    'test/jquery_alias.js',
+    '@angularSrc',
+    '@angularSrcModules',
+    '@angularScenario',
+    '@angularTest'
+  ],
+
   'karmaJqueryExclude': [
     'src/angular-bootstrap.js',
     'src/ngScenario/angular-bootstrap.js',

bower.json

@@ -2,7 +2,8 @@
   "name": "AngularJS",
   "license": "MIT",
   "devDependencies": {
-    "jquery": "2.1.1",
+    "jquery": "2.2.1",
+    "jquery-2.1": "jquery#2.1.4",
     "closure-compiler": "https://dl.google.com/closure-compiler/compiler-20140814.zip",
     "ng-closure-runner": "https://raw.github.com/angular/ng-closure-runner/v0.2.3/assets/ng-closure-runner.zip"
   }

docs/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "AngularJS-docs-app",
   "dependencies": {
-    "jquery": "2.1.1",
+    "jquery": "2.2.1",
     "lunr.js": "0.5.12",
     "open-sans-fontface": "1.0.4",
     "google-code-prettify": "1.0.1",

docs/content/tutorial/step_07.ngdoc

@@ -35,7 +35,7 @@ We are using [Bower][bower] to install client-side dependencies.  This step upda
   "dependencies": {
     "angular": "1.4.x",
     "angular-mocks": "1.4.x",
-    "jquery": "~2.1.1",
+    "jquery": "~2.2.1",
     "bootstrap": "~3.1.1",
     "angular-route": "1.4.x"
   }

docs/content/tutorial/step_11.ngdoc

@@ -34,7 +34,7 @@ We are using [Bower][bower] to install client side dependencies.  This step upda
   "dependencies": {
     "angular": "1.4.x",
     "angular-mocks": "1.4.x",
-    "jquery": "~2.1.1",
+    "jquery": "~2.2.1",
     "bootstrap": "~3.1.1",
     "angular-route": "1.4.x",
     "angular-resource": "1.4.x"

docs/content/tutorial/step_12.ngdoc

@@ -38,7 +38,7 @@ We are using [Bower][bower] to install client side dependencies.  This step upda
   "dependencies": {
     "angular": "1.4.x",
     "angular-mocks": "1.4.x",
-    "jquery": "~2.1.1",
+    "jquery": "~2.2.1",
     "bootstrap": "~3.1.1",
     "angular-route": "1.4.x",
     "angular-resource": "1.4.x",
@@ -49,7 +49,7 @@ We are using [Bower][bower] to install client side dependencies.  This step upda
 
 * `"angular-animate": "1.4.x"` tells bower to install a version of the
 angular-animate component that is compatible with version 1.4.x.
-* `"jquery": "~2.1.1"` tells bower to install the 2.1.1 version of jQuery.  Note that this is not an
+* `"jquery": "~2.2.1"` tells bower to install the 2.2.1 version of jQuery.  Note that this is not an
 Angular library, it is the standard jQuery library.  We can use bower to install a wide range of 3rd
 party libraries.
 

karma-jquery-2.1.conf.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var angularFiles = require('./angularFiles');
+var sharedConfig = require('./karma-shared.conf');
+
+module.exports = function(config) {
+  sharedConfig(config, {testName: 'AngularJS: jQuery', logFile: 'karma-jquery.log'});
+
+  config.set({
+    files: angularFiles.mergeFilesFor('karmaJqueryOld'),
+    exclude: angularFiles.mergeFilesFor('karmaJqueryExclude'),
+
+    junitReporter: {
+      outputFile: 'test_out/jquery.xml',
+      suite: 'jQuery'
+    }
+  });
+};

scripts/travis/build.sh

@@ -20,12 +20,12 @@ elif [ $JOB = "unit" ]; then
 elif [ $JOB = "docs-e2e" ]; then
   grunt test:travis-protractor --specs "docs/app/e2e/**/*.scenario.js"
 elif [ $JOB = "e2e" ]; then
-  if [ $TEST_TARGET = "jquery" ]; then
+  if [[ $TEST_TARGET == jquery* ]]; then
     export USE_JQUERY=1
   fi
 
   export TARGET_SPECS="build/docs/ptore2e/**/default_test.js"
-  if [ $TEST_TARGET = "jquery" ]; then
+  if [[ $TEST_TARGET == jquery* ]]; then
     TARGET_SPECS="build/docs/ptore2e/**/jquery_test.js"
   fi
 

src/.jshintrc

@@ -143,8 +143,6 @@
     "getAliasedAttrName": false,
     "createEventHandler": false,
     "JQLitePrototype": false,
-    "addEventListenerFn": false,
-    "removeEventListenerFn": false,
     "jqLiteIsTextNode": false,
     "jqLiteDocumentLoaded": false,
 

src/jqLite.js

@@ -12,8 +12,6 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 /* global JQLitePrototype: true,
-  addEventListenerFn: true,
-  removeEventListenerFn: true,
   BOOLEAN_ATTR: true,
   ALIASED_ATTR: true,
 */
@@ -121,13 +119,7 @@
 JQLite.expando = 'ng339';
 
 var jqCache = JQLite.cache = {},
-    jqId = 1,
-    addEventListenerFn = function(element, type, fn) {
-      element.addEventListener(type, fn, false);
-    },
-    removeEventListenerFn = function(element, type, fn) {
-      element.removeEventListener(type, fn, false);
-    };
+    jqId = 1;
 
 /*
  * !!! This is an undocumented "private" function !!!
@@ -325,7 +317,7 @@ function jqLiteOff(element, type, fn, unsupported) {
   if (!type) {
     for (type in events) {
       if (type !== '$destroy') {
-        removeEventListenerFn(element, type, handle);
+        element.removeEventListener(type, handle);
       }
       delete events[type];
     }
@@ -337,7 +329,7 @@ function jqLiteOff(element, type, fn, unsupported) {
         arrayRemove(listenerFns || [], fn);
       }
       if (!(isDefined(fn) && listenerFns && listenerFns.length > 0)) {
-        removeEventListenerFn(element, type, handle);
+        element.removeEventListener(type, handle);
         delete events[type];
       }
     };
@@ -874,7 +866,7 @@ forEach({
         eventFns = events[type] = [];
         eventFns.specialHandlerWrapper = specialHandlerWrapper;
         if (type !== '$destroy' && !noEventListener) {
-          addEventListenerFn(element, type, handle);
+          element.addEventListener(type, handle);
         }
       }
 

src/ng/directive/form.js

@@ -497,13 +497,13 @@ var formDirectiveFactory = function(isNgForm) {
                 event.preventDefault();
               };
 
-              addEventListenerFn(formElement[0], 'submit', handleFormSubmission);
+              formElement[0].addEventListener('submit', handleFormSubmission);
 
               // unregister the preventDefault listener so that we don't not leak memory but in a
               // way that will achieve the prevention of the default action.
               formElement.on('$destroy', function() {
                 $timeout(function() {
-                  removeEventListenerFn(formElement[0], 'submit', handleFormSubmission);
+                  formElement[0].removeEventListener('submit', handleFormSubmission);
                 }, 0, false);
               });
             }

src/ng/httpBackend.js

@@ -172,8 +172,8 @@ function createHttpBackend($browser, createXhr, $browserDefer, callbacks, rawDoc
     script.async = true;
 
     callback = function(event) {
-      removeEventListenerFn(script, "load", callback);
-      removeEventListenerFn(script, "error", callback);
+      script.removeEventListener('load', callback);
+      script.removeEventListener('error', callback);
       rawDocument.body.removeChild(script);
       script = null;
       var status = -1;
@@ -192,8 +192,8 @@ function createHttpBackend($browser, createXhr, $browserDefer, callbacks, rawDoc
       }
     };
 
-    addEventListenerFn(script, "load", callback);
-    addEventListenerFn(script, "error", callback);
+    script.addEventListener('load', callback);
+    script.addEventListener('error', callback);
     rawDocument.body.appendChild(script);
     return callback;
   }

src/ngScenario/Application.js

@@ -64,7 +64,7 @@ angular.scenario.Application.prototype.navigateTo = function(url, loadFn, errorF
     self.context.find('#test-frames').append('<iframe>');
     frame = self.getFrame_();
 
-    frame.load(function() {
+    frame.on('load', function() {
       frame.off();
       try {
         var $window = self.getWindow_();

test/.jshintrc

@@ -117,8 +117,6 @@
     "getBooleanAttrName": false,
     "createEventHandler": false,
     "JQLitePrototype": false,
-    "addEventListenerFn": false,
-    "removeEventListenerFn": false,
     "jqLiteDocumentLoaded": false,
 
     /* apis.js */

test/helpers/testabilityPatch.js

@@ -1,14 +1,6 @@
 /* global jQuery: true, uid: true, jqCache: true */
 'use strict';
 
-/**
- * Here is the problem: http://bugs.jquery.com/ticket/7292
- * basically jQuery treats change event on some browsers (IE) as a
- * special event and changes it form 'change' to 'click/keydown' and
- * few others. This horrible hack removes the special treatment
- */
-if (window._jQuery) _jQuery.event.special.change = undefined;
-
 if (window.bindJQuery) bindJQuery();
 
 var supportTests = {