fix(clientSideScripts): change protractor to support waiting for hybr…

…id app (#4512)

Change protractor to wait for both angular1 hook and angular2 hook so
that it can wait for hybrid app correctly.
Add an aot hybrid app and testcase to test new change

lib/clientsidescripts.js

@@ -86,7 +86,7 @@ function getNg1Hooks(selector, injectorPlease) {
           return {$injector: $injector};
         }
       }
-    } catch(err) {} 
+    } catch(err) {}
   }
   function trySelector(selector) {
     var els = document.querySelectorAll(selector);
@@ -133,54 +133,96 @@ function getNg1Hooks(selector, injectorPlease) {
  *     be passed as a parameter.
  */
 functions.waitForAngular = function(rootSelector, callback) {
+
   try {
-    if (window.angular && !(window.angular.version &&
-          window.angular.version.major > 1)) {
-      /* ng1 */
-      var hooks = getNg1Hooks(rootSelector);
-      if (hooks.$$testability) {
-        hooks.$$testability.whenStable(callback);
-      } else if (hooks.$injector) {
-        hooks.$injector.get('$browser').
-            notifyWhenNoOutstandingRequests(callback);
-      } else if (!!rootSelector) {
-        throw new Error('Could not automatically find injector on page: "' +
-            window.location.toString() + '".  Consider using config.rootEl');
-      } else {
-        throw new Error('root element (' + rootSelector + ') has no injector.' +
-           ' this may mean it is not inside ng-app.');
+    // Wait for both angular1 testability and angular2 testability.
+
+    var testCallback = callback;
+
+    // Wait for angular1 testability first and run waitForAngular2 as a callback
+    var waitForAngular1 = function(callback) {
+
+      if (window.angular) {
+        var hooks = getNg1Hooks(rootSelector);
+        if (!hooks){
+          callback();  // not an angular1 app
+        }
+        else{
+          if (hooks.$$testability) {
+            hooks.$$testability.whenStable(callback);
+          } else if (hooks.$injector) {
+            hooks.$injector.get('$browser')
+                .notifyWhenNoOutstandingRequests(callback);
+          } else if (!!rootSelector) {
+            throw new Error(
+                'Could not automatically find injector on page: "' +
+                window.location.toString() + '".  Consider using config.rootEl');
+          } else {
+            throw new Error(
+                'root element (' + rootSelector + ') has no injector.' +
+                ' this may mean it is not inside ng-app.');
+          }
+        }
       }
-    } else if (rootSelector && window.getAngularTestability) {
-      var el = document.querySelector(rootSelector);
-      window.getAngularTestability(el).whenStable(callback);
-    } else if (window.getAllAngularTestabilities) {
-      var testabilities = window.getAllAngularTestabilities();
-      var count = testabilities.length;
-      var decrement = function() {
-        count--;
+      else {callback();}  // not an angular1 app
+    };
+
+    // Wait for Angular2 testability and then run test callback
+    var waitForAngular2 = function() {
+      if (window.getAngularTestability) {
+        if (rootSelector) {
+          var testability = null;
+          var el = document.querySelector(rootSelector);
+          try{
+            testability = window.getAngularTestability(el);
+          }
+          catch(e){}
+          if (testability) {
+            return testability.whenStable(testCallback);
+          }
+        }
+
+        // Didn't specify root element or testability could not be found
+        // by rootSelector. This may happen in a hybrid app, which could have
+        // more than one root.
+        var testabilities = window.getAllAngularTestabilities();
+        var count = testabilities.length;
+
+        // No angular2 testability, this happens when
+        // going to a hybrid page and going back to a pure angular1 page
         if (count === 0) {
-          callback();
+          return testCallback();
         }
-      };
-      testabilities.forEach(function(testability) {
-        testability.whenStable(decrement);
-      });
-    } else if (!window.angular) {
-      throw new Error('window.angular is undefined.  This could be either ' +
+
+        var decrement = function() {
+          count--;
+          if (count === 0) {
+            testCallback();
+          }
+        };
+        testabilities.forEach(function(testability) {
+          testability.whenStable(decrement);
+        });
+
+      }
+      else {testCallback();}  // not an angular2 app
+    };
+
+    if (!(window.angular) && !(window.getAngularTestability)) {
+      // no testability hook
+      throw new Error(
+          'both angularJS testability and angular testability are undefined.' +
+          '  This could be either ' +
           'because this is a non-angular page or because your test involves ' +
           'client-side navigation, which can interfere with Protractor\'s ' +
           'bootstrapping.  See http://git.io/v4gXM for details');
-    } else if (window.angular.version >= 2) {
-      throw new Error('You appear to be using angular, but window.' +
-          'getAngularTestability was never set.  This may be due to bad ' +
-          'obfuscation.');
-    } else {
-      throw new Error('Cannot get testability API for unknown angular ' +
-          'version "' + window.angular.version + '"');
-    }
+    } else {waitForAngular1(waitForAngular2);}  // Wait for angular1 and angular2
+                                                // Testability hooks sequentially
+
   } catch (err) {
     callback(err.message);
   }
+
 };
 
 /**
@@ -277,7 +319,7 @@ function findRepeaterRows(repeater, exact, index, using) {
   var row = rows[index] || [], multiRow = multiRows[index] || [];
   return [].concat(row, multiRow);
 }
-functions.findRepeaterRows = wrapWithHelpers(findRepeaterRows, repeaterMatch); 
+functions.findRepeaterRows = wrapWithHelpers(findRepeaterRows, repeaterMatch);
 
  /**
  * Find all rows of an ng-repeat.
@@ -697,7 +739,7 @@ functions.testForAngular = function(attempts, ng12Hybrid, asyncCallback) {
       if (n < 1) {
         if (definitelyNg1 && window.angular) {
           callback({message: 'angular never provided resumeBootstrap'});
-        } else if (ng12Hybrid && !window.angular) { 
+        } else if (ng12Hybrid && !window.angular) {
           callback({message: 'angular 1 never loaded' +
               window.getAllAngularTestabilities ? ' (are you sure this app ' +
               'uses ngUpgrade?  Try un-setting ng12Hybrid)' : ''});

spec/hybrid/async_spec.js

@@ -54,3 +54,18 @@ describe('async angular1/2 hybrid using ngUpgrade application', function() {
     });
   });
 });
+describe('async angular1/2 hybrid using downgrade application', function() {
+  it('should be able to click buttons and wait for $timeout', function() {
+      browser.get('/upgrade?downgrade');
+
+      var rootBtn = $$('my-app button').first();
+      expect(rootBtn.getText()).toEqual('Click Count: 0');
+      rootBtn.click();
+      expect(rootBtn.getText()).toEqual('Click Count: 1');
+
+      var ng2Btn = $$('ng2 button').first();
+      expect(ng2Btn.getText()).toEqual('Click Count: 0');
+      ng2Btn.click();
+      expect(ng2Btn.getText()).toEqual('Click Count: 1');
+  });
+});

testapp/app.css

@@ -24,16 +24,21 @@ li {
 
 li.left {
   left: 0;
-} 
+}
 
 li.left.mid {
-  left: 25%;
+  left: 20%;
 }
 
-li.right {
-  right: 0;
+li.mid{
+  left : 40%;
 }
 
 li.right.mid {
-  right: 25%;
+  left: 60%;
+}
+
+li.right {
+  left: 80%;
 }
+

testapp/index.html

@@ -14,9 +14,12 @@ <h1>Choose Version</h1>
       <li class='mid left'>
         <a href='upgrade?no_static'>Hybrid (JIT)</a>
       </li>
-      <li class='mid right'>
+      <li class='mid'>
         <a href='upgrade'>Hybrid (AOT)</a>
       </li>
+      <li class='mid right'>
+          <a href='upgrade?downgrade'>Hybrid (Downgrade)</a>
+      </li>
       <li class="right">
         <a href="ng2">Angular 2</a>
       </li>

testapp/package.json

@@ -6,22 +6,23 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@angular/common": "2.2.1",
-    "@angular/compiler": "2.2.1",
-    "@angular/core": "2.2.1",
-    "@angular/http": "2.2.1",
-    "@angular/platform-browser": "2.2.1",
-    "@angular/platform-browser-dynamic": "2.2.1",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.2.1",
+    "@angular/common": "5.0.0-beta.7",
+    "@angular/compiler": "5.0.0-beta.7",
+    "@angular/core": "5.0.0-beta.7",
+    "@angular/http": "5.0.0-beta.7",
+    "@angular/platform-browser": "5.0.0-beta.7",
+    "@angular/animations": "5.0.0-beta.7",
+    "@angular/platform-browser-dynamic": "5.0.0-beta.7",
+    "@angular/router": "5.0.0-beta.7",
+    "@angular/upgrade": "5.0.0-beta.7",
     "@types/angular": "^1.5.20",
     "@types/core-js": "^0.9.34",
     "@types/node": "^6.0.48",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.4.3",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.25"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
     "concurrently": "2.2.0",

testapp/tsconfig-aot.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
+  },
+
+  "files": [
+    "upgrade/app/downgrade/main.ts",
+    "upgrade/app/downgrade/ng1.ts",
+    "upgrade/app/downgrade/ng2.ts"
+  ]
+
+}

testapp/upgrade/app/downgrade/main.ts

@@ -0,0 +1,10 @@
+import {downgradeModule} from '@angular/upgrade/static';
+declare var angular: angular.IAngularStatic;
+
+import {ng1module} from './ng1';
+import {AppModuleNgFactory} from './ng2.ngfactory';
+
+// Bootstrap Ng1 app as usual, but add a downgradedModule for the Angular (2+)
+// part of the application.
+angular.bootstrap(
+    document.body, [ng1module.name, downgradeModule(AppModuleNgFactory)]);

testapp/upgrade/app/downgrade/ng1.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"ng1module":{"__symbolic":"error","message":"Reference to a local symbol","line":0,"character":12,"context":{"name":"angular"}}}},{"__symbolic":"module","version":1,"metadata":{"ng1module":{"__symbolic":"error","message":"Reference to a local symbol","line":0,"character":12,"context":{"name":"angular"}}}}]

testapp/upgrade/app/downgrade/ng1.ts

@@ -0,0 +1,21 @@
+declare var angular: angular.IAngularStatic;
+
+function ctrl($scope: any, $timeout: any) {
+  $scope.callCount = 0;
+
+  $scope.clickButton = function() {
+    $timeout(() => {
+      $scope.callCount++;
+    }, 1000);
+  };
+}
+ctrl.$inject = ['$scope', '$timeout'];
+
+export const ng1module = angular.module('hybrid', []);
+
+ng1module.component('myApp', {
+  template: `<h3>ng1</h3><button ng-click="clickButton()">Click Count: {{callCount}}</button>
+             <ng2></ng2>
+            `,
+  controller: ctrl
+});