feat(lib): add useAllAngularAppRoots option

This allows waiting for all angular applications on the page, for
angular2 apps only.

Author: juliemr

lib/clientsidescripts.js

@@ -38,7 +38,8 @@ function wrapWithHelpers(fun) {
 
 /**
  * Wait until Angular has finished rendering and has
- * no outstanding $http calls before continuing.
+ * no outstanding $http calls before continuing. The specific Angular app
+ * is determined by the rootSelector.
  *
  * Asynchronous.
  *
@@ -72,6 +73,32 @@ functions.waitForAngular = function(rootSelector, callback) {
   }
 };
 
+/**
+ * Wait until all Angular2 applications on the page have become stable.
+ *
+ * Asynchronous.
+ *
+ * @param {function(string)} callback callback. If a failure occurs, it will
+ *     be passed as a parameter.
+ */
+functions.waitForAllAngular2 = function(callback) {
+  try {
+    var testabilities = window.getAllAngularTestabilities();
+    var count = testabilities.length;
+    var decrement = function() {
+      count--;
+      if (count === 0) {
+        callback();
+      }
+    };
+    testabilities.forEach(function(testability) {
+      testability.whenStable(decrement);
+    });
+  } catch (err) {
+    callback(err.message);
+  }
+};
+
 /**
  * Find a list of elements in the page by their angular binding.
  *
@@ -558,9 +585,8 @@ functions.findByCssContainingText = function(cssSelector, searchText, using) {
  * Asynchronous.
  *
  * @param {number} attempts Number of times to retry.
- * @param {function} asyncCallback callback
+ * @param {function({version: ?number, message: ?string})} asyncCallback callback
  *
- * @return {{version: ?number, message: ?string}}
  */
 functions.testForAngular = function(attempts, asyncCallback) {
   var callback = function(args) {

lib/protractor.js

@@ -257,6 +257,18 @@ Protractor.prototype.getProcessedConfig = null;
  */
 Protractor.prototype.forkNewDriverInstance = null;
 
+
+/**
+ * Instead of using a single root element, search through all angular apps
+ * available on the page when finding elements or waiting for stability.
+ * Only compatible with Angular2.
+ */
+Protractor.prototype.useAllAngular2AppRoots = function() {
+  // The empty string is an invalid css selector, so we use it to easily
+  // signal to scripts to not find a root element.
+  this.rootEl = '';
+};
+
 /**
  * The same as {@code webdriver.WebDriver.prototype.executeScript},
  * but with a customized description for debugging.
@@ -325,10 +337,20 @@ Protractor.prototype.waitForAngular = function(opt_description) {
     }, 'Ignore Synchronization Protractor.waitForAngular()');
   }
 
-  return this.executeAsyncScript_(
-      clientSideScripts.waitForAngular,
-      'Protractor.waitForAngular()' + description,
-      this.rootEl).
+  function runWaitForAngularScript() {
+    if (self.rootEl) {
+      return self.executeAsyncScript_(
+          clientSideScripts.waitForAngular,
+          'Protractor.waitForAngular()' + description,
+          self.rootEl);
+    } else {
+      return self.executeAsyncScript_(
+          clientSideScripts.waitForAllAngular2,
+          'Protractor.waitForAngular()' + description);
+    }
+  }
+
+  return runWaitForAngularScript().
       then(function(browserErr) {
         if (browserErr) {
           throw 'Error while waiting for Protractor to ' +

lib/runner.js

@@ -197,6 +197,9 @@ Runner.prototype.createBrowser = function(plugins) {
   if (config.debuggerServerPort) {
     browser_.debuggerServerPort_ = config.debuggerServerPort;
   }
+  if (config.useAllAngular2AppRoots) {
+    browser_.useAllAngular2AppRoots();
+  }
   var self = this;
 
 

spec/angular2Conf.js

@@ -6,7 +6,7 @@ var env = require('./environment.js');
 // As Angular2 is in rapid development, the test application that ships with
 // the Protractor repository does not yet contain an Angular2 section. This
 // configuration assumes that you are serving the examples from the
-// angular/angular repository at localhost:8000. 
+// angular/angular repository at localhost:8000.
 // See https://github.com/angular/angular/blob/master/DEVELOPER.md for
 // setup instructions.
 //
@@ -25,5 +25,13 @@ exports.config = {
 
   baseUrl: 'http://localhost:8000',
 
-  rootElement: 'async-app'
+  // Special option for Angular2, to test against all Angular2 applications
+  // on the page. This means that Protractor will wait for every app to be
+  // stable before each action, and search within all apps when finding
+  // elements.
+  useAllAngular2AppRoots: true
+
+  // Alternatively, you could specify one root element application, to test
+  // against only that one:
+  // rootElement: 'async-app'
 };