feat(testability): hook zone into whenstable api with async support

closes(#428)
2015-07-24 12:46:12 -07:00
parent 19d8b221b4
commit a8b75c3d41
9 changed files with 511 additions and 54 deletions
@@ -0,0 +1,5 @@
+library examples.e2e_test.async_spec;
+
+main() {
+
+}
@@ -0,0 +1,71 @@
+import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
+
+function whenStable(rootSelector) {
+  // TODO(hankduan): remove this call once Protractor implements it
+  return browser.executeAsyncScript('var el = document.querySelector("' + rootSelector + '");' +
+                                    'window.getAngularTestability(el).whenStable(arguments[0]);');
+};
+
+describe('async', () => {
+  var URL = 'examples/src/async/index.html';
+
+  beforeEach(() => browser.get(URL));
+
+  it('should work with synchronous actions', () => {
+    var increment = $('#increment');
+    increment.$('.action').click();
+
+    expect(increment.$('.val').getText()).toEqual('1');
+  });
+
+  it('should wait for asynchronous actions', () => {
+    var timeout = $('#delayedIncrement');
+    timeout.$('.action').click();
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    whenStable('async-app')
+        .then(() => {
+          // whenStable should only be called when the async action finished,
+          // so the count should be 1 at this point.
+          expect(timeout.$('.val').getText()).toEqual('1');
+        });
+  });
+
+  it('should notice when asynchronous actions are cancelled', () => {
+    var timeout = $('#delayedIncrement');
+    timeout.$('.action').click();
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    timeout.$('.cancel').click();
+    whenStable('async-app')
+        .then(() => {
+          // whenStable should be called since the async action is cancelled. The
+          // count should still be 0;
+          expect(timeout.$('.val').getText()).toEqual('0');
+        });
+  });
+
+  it('should wait for a series of asynchronous actions', () => {
+    var timeout = $('#multiDelayedIncrements');
+    timeout.$('.action').click();
+
+    // At this point, the async action is still pending, so the count should
+    // still be 0.
+    expect(timeout.$('.val').getText()).toEqual('0');
+
+    whenStable('async-app')
+        .then(() => {
+          // whenStable should only be called when all the async actions
+          // finished, so the count should be 10 at this point.
+          expect(timeout.$('.val').getText()).toEqual('10');
+        });
+  });
+
+  afterEach(verifyNoBrowserErrors);
+});
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <title>Async</title>
+</head>
+
+<body>
+  <async-app>
+    Loading...
+  </async-app>
+
+  $SCRIPTS$
+</body>
+</html>
@@ -0,0 +1,96 @@
+import {NgIf, bootstrap, Component, View} from 'angular2/bootstrap';
+import {TimerWrapper} from 'angular2/src/facade/async';
+
+
+@Component({selector: 'async-app'})
+@View({
+  template: `
+    <div id='increment'>
+      <span class='val'>{{val1}}</span>
+      <button class='action' (click)="increment()">Increment</button>
+    </div>
+    <div id='delayedIncrement'>
+      <span class='val'>{{val2}}</span>
+      <button class='action' (click)="delayedIncrement()">Delayed Increment</button>
+      <button class='cancel' *ng-if="timeoutId != null" (click)="cancelDelayedIncrement()">Cancel</button>              
+    </div>
+    <div id='multiDelayedIncrements'>
+      <span class='val'>{{val3}}</span>
+      <button class='action' (click)="multiDelayedIncrements(10)">10 Delayed Increments</button>
+      <button class='cancel' *ng-if="multiTimeoutId != null" (click)="cancelMultiDelayedIncrements()">Cancel</button>              
+    </div>
+    <div id='periodicIncrement'>
+      <span class='val'>{{val4}}</span>
+      <button class='action' (click)="periodicIncrement()">Periodic Increment</button>
+      <button class='cancel' *ng-if="intervalId != null" (click)="cancelPeriodicIncrement()">Cancel</button>
+    </div>
+  `,
+  directives: [NgIf]
+})
+class AsyncApplication {
+  val1: number = 0;
+  val2: number = 0;
+  val3: number = 0;
+  val4: number = 0;
+  timeoutId = null;
+  multiTimeoutId = null;
+  intervalId = null;
+
+  increment(): void { this.val1++; };
+
+  delayedIncrement(): void {
+    this.cancelDelayedIncrement();
+    this.timeoutId = TimerWrapper.setTimeout(() => {
+      this.val2++;
+      this.timeoutId = null;
+    }, 2000);
+  };
+
+  multiDelayedIncrements(i: number): void {
+    this.cancelMultiDelayedIncrements();
+
+    var self = this;
+    function helper(_i) {
+      if (_i <= 0) {
+        self.multiTimeoutId = null;
+        return;
+      }
+
+      self.multiTimeoutId = TimerWrapper.setTimeout(() => {
+        self.val3++;
+        helper(_i - 1);
+      }, 500);
+    }
+    helper(i);
+  };
+
+  periodicIncrement(): void {
+    this.cancelPeriodicIncrement();
+    this.intervalId = TimerWrapper.setInterval(() => { this.val4++; }, 2000)
+  };
+
+  cancelDelayedIncrement(): void {
+    if (this.timeoutId != null) {
+      TimerWrapper.clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  };
+
+  cancelMultiDelayedIncrements(): void {
+    if (this.multiTimeoutId != null) {
+      TimerWrapper.clearTimeout(this.multiTimeoutId);
+      this.multiTimeoutId = null;
+    }
+  };
+
+  cancelPeriodicIncrement(): void {
+    if (this.intervalId != null) {
+      TimerWrapper.clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  };
+}
+
+export function main() {
+  bootstrap(AsyncApplication);
+}