feat(core): add task tracking to Testability (#16863)

Allow passing an optional timeout to Testability's whenStable(). If
specified, if Angular is not stable before the timeout is hit, the
done callback will be invoked with a list of pending macrotasks.

Also, allows an optional update callback, which will be invoked whenever
the set of pending macrotasks changes. If this callback returns true,
the timeout will be cancelled and the done callback will not be invoked.

If the optional parameters are not passed, whenStable() will work
as it did before, whether or not the task tracking zone spec is
available.

This change also migrates the Testability unit tests off the deprecated
AsyncTestCompleter.

PR Close #16863

packages/examples/core/testability/ts/whenStable/e2e_test/testability_example_spec.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+
+describe('testability example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('using task tracking', () => {
+    const URL = '/core/testability/ts/whenStable/';
+
+    it('times out with a list of tasks', (done) => {
+      browser.get(URL);
+      browser.ignoreSynchronization = true;
+
+      // Script that runs in the browser and calls whenStable with a timeout.
+      let waitWithResultScript = function(done: any) {
+        let rootEl = document.querySelector('example-app');
+        let testability = (window as any).getAngularTestability(rootEl);
+        testability.whenStable((didWork: boolean, tasks: any) => { done(tasks); }, 1000);
+      };
+
+      element(by.css('.start-button')).click();
+
+      browser.driver.executeAsyncScript(waitWithResultScript).then((result: any[]) => {
+        let pendingTask = result[0];
+        expect(pendingTask.delay).toEqual(5000);
+        expect(pendingTask.source).toEqual('setTimeout');
+        expect(element(by.css('.status')).getText()).not.toContain('done');
+        done();
+      });
+    });
+
+    afterAll(() => { browser.ignoreSynchronization = false; });
+  });
+});

packages/examples/core/testability/ts/whenStable/module.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+export {AppModule} from './testability_example';

packages/examples/core/testability/ts/whenStable/testability_example.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <button class="start-button" (click)="start()">Start long-running task</button>
+    <div class="status">Status: {{status}}</div>
+  `
+})
+export class StableTestCmp {
+  status = 'none';
+  start() {
+    this.status = 'running';
+    setTimeout(() => { this.status = 'done'; }, 5000);
+  }
+}
+
+@NgModule({imports: [BrowserModule], declarations: [StableTestCmp], bootstrap: [StableTestCmp]})
+export class AppModule {
+}