chore(testapp): Use newer angular beta (#3121)

scripts/test.js

@@ -129,4 +129,10 @@ executor.addCommandlineTest('node built/cli.js spec/errorTest/slowHttpAndTimeout
                 'Locator: by.binding\\(\\"slowAngularTimeoutStatus\\"\\)$'}
     ]);
 
+executor.addCommandlineTest('node built/cli.js spec/angular2TimeoutConf.js')
+    .expectExitCode(1)
+    .expectErrors([
+      {message: 'Timed out waiting for Protractor to synchronize with the page'},
+    ]);
+
 executor.execute();

spec/angular2TimeoutConf.js

@@ -0,0 +1,35 @@
+var env = require('./environment');
+
+// This is the configuration for a smoke test for an Angular2 application.
+//
+// *** NOTE ***
+// 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.
+// See https://github.com/angular/angular/blob/master/DEVELOPER.md for
+// setup instructions.
+//
+exports.config = {
+  seleniumAddress: env.seleniumAddress,
+
+  framework: 'jasmine',
+
+  specs: [
+    'ng2/timeout_spec.js'
+  ],
+
+  capabilities: env.capabilities,
+
+  baseUrl: env.baseUrl,
+
+  // 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'
+};

spec/ng2/async_spec.js

@@ -63,7 +63,7 @@ describe('async angular2 application', function() {
     });
 
     it('should wait for a series of periodic increments', function() {
-      var timeout = $('#periodicIncrement');
+      var timeout = $('#periodicIncrement_unzoned');
 
       // Waits for the val to count 2.
       var EC = protractor.ExpectedConditions;

spec/ng2/timeout_spec.js

@@ -0,0 +1,10 @@
+describe('async angular2 application timeout', function() {
+  var URL = '/ng2/#/async';
+
+  it('should timeout if intervals are used in the NgZone', function() {
+    browser.get(URL);
+    var timeout = $('#periodicIncrement');
+    timeout.$('.action').click();
+    timeout.$('.cancel').click();
+  });
+});

testapp/ng2/app/async/async-component.html

@@ -22,3 +22,10 @@
   <button class='cancel' *ngIf="intervalId != null"
     (click)="cancelPeriodicIncrement()">Cancel</button>
 </div>
+<div id='periodicIncrement_unzoned'>
+  <span class='val'>{{val5}}</span>
+  <button class='action'
+    (click)="periodicIncrement_unzoned()">Periodic Increment (outside NgZone)</button>
+  <button class='cancel' *ngIf="intervalId_unzoned != null"
+    (click)="cancelPeriodicIncrement_unzoned()">Cancel</button>
+</div>

testapp/ng2/app/async/async.component.ts

@@ -1,7 +1,6 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component} from 'angular2/core';
+import {Component, NgZone} from 'angular2/core';
 import {NgIf} from 'angular2/common';
-import {TimerWrapper} from 'angular2/src/facade/async';
 
 @Component({
   templateUrl: 'app/async/async-component.html',
@@ -12,15 +11,19 @@ export class AsyncComponent {
   val2: number = 0;
   val3: number = 0;
   val4: number = 0;
+  val5: number = 0;
   timeoutId = null;
   chainedTimeoutId = null;
   intervalId = null;
+  intervalId_unzoned = null;
+
+  constructor(private _ngZone: NgZone) {};
 
   increment(): void { this.val1++; };
 
   delayedIncrement(): void {
     this.cancelDelayedIncrement();
-    this.timeoutId = TimerWrapper.setTimeout(() => {
+    this.timeoutId = setTimeout(() => {
       this.val2++;
       this.timeoutId = null;
     }, 2000);
@@ -36,7 +39,7 @@ export class AsyncComponent {
         return;
       }
 
-      self.chainedTimeoutId = TimerWrapper.setTimeout(() => {
+      self.chainedTimeoutId = setTimeout(() => {
         self.val3++;
         helper(_i - 1);
       }, 500);
@@ -46,27 +49,45 @@ export class AsyncComponent {
 
   periodicIncrement(): void {
     this.cancelPeriodicIncrement();
-    this.intervalId = TimerWrapper.setInterval(() => { this.val4++; }, 2000)
+    this.intervalId = setInterval(() => { this.val4++; }, 2000)
+  };
+
+  periodicIncrement_unzoned(): void {
+    this.cancelPeriodicIncrement_unzoned();
+    this._ngZone.runOutsideAngular(() => {
+      this.intervalId_unzoned = setInterval(() => {
+        this._ngZone.run(() => {
+          this.val5++;
+        });
+      }, 2000)
+    });
   };
 
   cancelDelayedIncrement(): void {
     if (this.timeoutId != null) {
-      TimerWrapper.clearTimeout(this.timeoutId);
+      clearTimeout(this.timeoutId);
       this.timeoutId = null;
     }
   };
 
   cancelChainedDelayedIncrements(): void {
     if (this.chainedTimeoutId != null) {
-      TimerWrapper.clearTimeout(this.chainedTimeoutId);
+      clearTimeout(this.chainedTimeoutId);
       this.chainedTimeoutId = null;
     }
   };
 
   cancelPeriodicIncrement(): void {
     if (this.intervalId != null) {
-      TimerWrapper.clearInterval(this.intervalId);
+      clearInterval(this.intervalId);
       this.intervalId = null;
     }
   };
+
+  cancelPeriodicIncrement_unzoned(): void {
+    if (this.intervalId_unzoned != null) {
+      clearInterval(this.intervalId_unzoned);
+      this.intervalId_unzoned = null;
+    }
+  };
 }