split batchCD into 2 functions, parallel and noAutoChangeDetection

Author: mmalerba

src/cdk/testing/BUILD.bazel

@@ -11,6 +11,9 @@ ts_library(
             "**/*.spec.ts",
         ],
     ),
+    deps = [
+        "@npm//rxjs",
+    ],
     module_name = "@angular/cdk/testing",
 )
 

src/cdk/testing/component-harness.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {noAutoChangeDetection, parallel} from '@angular/cdk/testing/harness-environment';
 import {TestElement} from './test-element';
 
 /** An async function that returns a promise when called. */
@@ -101,8 +102,6 @@ export interface HarnessLoader {
    * @return A list instances of the given harness type.
    */
   getAllHarnesses<T extends ComponentHarness>(query: HarnessQuery<T>): Promise<T[]>;
-
-  batchCD<T>(fn: () => Promise<T>): Promise<T>;
 }
 
 /**
@@ -242,8 +241,6 @@ export interface LocatorFactory {
    * authors to wait for async tasks outside of the Angular zone.
    */
   waitForTasksOutsideAngular(): Promise<void>;
-
-  batchCD<T>(fn: () => Promise<T>): Promise<T>;
 }
 
 /**
@@ -377,10 +374,6 @@ export abstract class ComponentHarness {
   protected async waitForTasksOutsideAngular() {
     return this.locatorFactory.waitForTasksOutsideAngular();
   }
-
-  async batchCD<T>(fn: () => Promise<T>) {
-    return this.locatorFactory.batchCD(fn);
-  }
 }
 
 
@@ -497,8 +490,7 @@ export class HarnessPredicate<T extends ComponentHarness> {
     if (harnesses.length === 0) {
       return [];
     }
-    const results =
-        await harnesses[0].batchCD(() => Promise.all(harnesses.map(h => this.evaluate(h))));
+    const results = await parallel(harnesses.map(h => this.evaluate(h)));
     return harnesses.filter((_, i) => results[i]);
   }
 
@@ -509,7 +501,7 @@ export class HarnessPredicate<T extends ComponentHarness> {
    *   and resolves to false otherwise.
    */
   async evaluate(harness: T): Promise<boolean> {
-    const results = await harness.batchCD(() => Promise.all(this._predicates.map(p => p(harness))));
+    const results = await parallel((this._predicates.map(p => p(harness))));
     return results.reduce((combined, current) => combined && current, true);
   }
 

src/cdk/testing/harness-environment.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {BehaviorSubject, Subscription} from 'rxjs';
 import {
   AsyncFactoryFn,
   ComponentHarness,
@@ -36,7 +37,108 @@ type ParsedQueries<T extends ComponentHarness> = {
   harnessTypes: Set<ComponentHarnessConstructor<T>>,
 };
 
-let isCDBatching = false;
+/** Represents the status of change detection batching. */
+export interface ChangeDetectionBatchingStatus {
+  /** Whether change detection is batching. */
+  isBatching: boolean;
+  /**
+   * An optional callback, if present it indicates that change detection should be run immediately,
+   * while handling the batching status change. The callback should then be called as soon as change
+   * detection is done.
+   */
+  onDetectChangesNow?: () => void;
+}
+
+/** Subject used to dispatch and listen for changes to the change detection batching status . */
+const batchChangeDetectionSubject = new BehaviorSubject<ChangeDetectionBatchingStatus>({
+  isBatching: false
+});
+
+/** The current subscription to `batchChangeDetectionSubject`. */
+let batchChangeDetectionSubscription: Subscription | null;
+
+/**
+ * The default handler for change detection batching status changes. This handler will be used if
+ * the specific environment does not install its own.
+ * @param status The new change detection batching status.
+ */
+function defaultBatchChangeDetectionHandler(status: ChangeDetectionBatchingStatus) {
+  status.onDetectChangesNow?.();
+}
+
+/**
+ * Allows a test `HarnessEnvironment` to install its own handler for change detection batching
+ * status changes.
+ * @param handler The handler for the change detection batching status.
+ */
+export function handleChangeDetectionBatching(
+    handler: (status: ChangeDetectionBatchingStatus) => void) {
+  stopHandlingChangeDetectionBatching();
+  batchChangeDetectionSubscription = batchChangeDetectionSubject.subscribe(handler);
+}
+
+/** Allows a `HarnessEnvironment` to stop handling change detection batching status changes. */
+export function stopHandlingChangeDetectionBatching() {
+  batchChangeDetectionSubscription?.unsubscribe();
+  batchChangeDetectionSubscription = null;
+}
+
+/**
+ * Batches together triggering of change detection over the duration of the given function.
+ * @param fn The function to call with batched change detection.
+ * @param triggerBeforeAndAfter Optionally trigger change detection once before and after the batch
+ *   operation. If false, change detection will not be triggered.
+ * @return The result of the given function.
+ */
+async function batchChangeDetection<T>(fn: () => Promise<T>, triggerBeforeAndAfter: boolean) {
+  // If change detection batching is already in progress, just run the function.
+  if (batchChangeDetectionSubject.getValue().isBatching) {
+    return await fn();
+  }
+
+  // If nothing is handling change detection batching, install the default handler.
+  if (!batchChangeDetectionSubscription) {
+    batchChangeDetectionSubject.subscribe(defaultBatchChangeDetectionHandler);
+  }
+
+  if (triggerBeforeAndAfter) {
+    await new Promise(resolve => batchChangeDetectionSubject.next({
+      isBatching: true,
+      onDetectChangesNow: resolve,
+    }));
+    const result = await fn();
+    await new Promise(resolve => batchChangeDetectionSubject.next({
+      isBatching: false,
+      onDetectChangesNow: resolve,
+    }));
+    return result;
+  } else {
+    batchChangeDetectionSubject.next({isBatching: true});
+    const result = await fn();
+    batchChangeDetectionSubject.next({isBatching: false});
+    return result;
+  }
+}
+
+/**
+ * Disables the harness system's auto change detection for the duration of the given function.
+ * @param fn The function to disable auto change detection for.
+ * @return The result of the given function.
+ */
+export async function noAutoChangeDetection<T>(fn: () => Promise<T>) {
+  return batchChangeDetection(fn, false);
+}
+
+/**
+ * Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change
+ * detection over the entire operation such that change detection occurs exactly once before
+ * resolving the values and once after.
+ * @param values The async values to resolve in parallel with batched change detection.
+ * @return The resolved values.
+ */
+export async function parallel<T>(values: Iterable<T | PromiseLike<T>>) {
+  return batchChangeDetection(() => Promise.all(values), true);
+}
 
 /**
  * Base harness environment class that can be extended to allow `ComponentHarness`es to be used in
@@ -121,33 +223,6 @@ export abstract class HarnessEnvironment<E> implements HarnessLoader, LocatorFac
     return (await this.getAllRawElements(selector)).map(e => this.createEnvironment(e));
   }
 
-  protected isCDBatching() {
-    return isCDBatching;
-  }
-
-  async batchCD<T>(fn: () => Promise<T>) {
-    // Flipping on the `isCDBatching` flag will turn all calls to `forceStabilize` into no-ops to
-    // prevent triggering redundant change detection. However, we want to make sure we trigger
-    // change detection exactly once before flipping this flag to ensure that any pending changes
-    // are flushed before the harness tries to read state from DOM elements.
-    const alreadyBatching = isCDBatching;
-    if (!alreadyBatching) {
-      await this.forceStabilize();
-      isCDBatching = true;
-    }
-
-    const result = await fn();
-
-    // We also want to run change detection exactly once after the batched operation is complete.
-    // This will ensure that any changes from interacting with DOM elements are properly flushed.
-    if (!alreadyBatching) {
-      isCDBatching = false;
-      await this.forceStabilize();
-    }
-
-    return result;
-  }
-
   /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
   protected createComponentHarness<T extends ComponentHarness>(
       harnessType: ComponentHarnessConstructor<T>, element: E): T {
@@ -198,18 +273,17 @@ export abstract class HarnessEnvironment<E> implements HarnessLoader, LocatorFac
     // may trigger change detection by reading state from DOM elements. If not batched these change
     // detections would be triggered once per potential match element which could cause significant
     // slowdown.
-    const perElementMatches = await this.batchCD(() =>
-        Promise.all(rawElements.map(async rawElement => {
-          const testElement = this.createTestElement(rawElement);
-          const allResultsForElement = await Promise.all(
-              // For each query, get `null` if it doesn't match, or a `TestElement` or
-              // `ComponentHarness` as appropriate if it does match. This gives us everything that
-              // matches the current raw element, but it may contain duplicate entries (e.g.
-              // multiple `TestElement` or multiple `ComponentHarness` of the same type).
-              allQueries.map(query => this._getQueryResultForElement(
-                  query, rawElement, testElement, skipSelectorCheck)));
-          return _removeDuplicateQueryResults(allResultsForElement);
-        })));
+    const perElementMatches = await parallel(rawElements.map(async rawElement => {
+      const testElement = this.createTestElement(rawElement);
+      const allResultsForElement = await Promise.all(
+          // For each query, get `null` if it doesn't match, or a `TestElement` or
+          // `ComponentHarness` as appropriate if it does match. This gives us everything that
+          // matches the current raw element, but it may contain duplicate entries (e.g.
+          // multiple `TestElement` or multiple `ComponentHarness` of the same type).
+          allQueries.map(query => this._getQueryResultForElement(
+              query, rawElement, testElement, skipSelectorCheck)));
+      return _removeDuplicateQueryResults(allResultsForElement);
+    }));
     return ([] as any).concat(...perElementMatches);
   }
 

src/cdk/testing/testbed/testbed-harness-environment.ts

@@ -9,8 +9,10 @@
 import {
   ComponentHarness,
   ComponentHarnessConstructor,
+  handleChangeDetectionBatching,
   HarnessEnvironment,
   HarnessLoader,
+  stopHandlingChangeDetectionBatching,
   TestElement
 } from '@angular/cdk/testing';
 import {ComponentFixture, flush} from '@angular/core/testing';
@@ -30,6 +32,50 @@ const defaultEnvironmentOptions: TestbedHarnessEnvironmentOptions = {
   queryFn: (selector: string, root: Element) => root.querySelectorAll(selector)
 };
 
+/** Whether auto change detection is currently disabled. */
+let disableAutoChangeDetection = false;
+
+/**
+ * The set of non-destroyed fixtures currently being used by `TestbedHarnessEnvironment` instances.
+ */
+const activeFixtures = new Set<ComponentFixture<unknown>>();
+
+/**
+ * Installs a handler for change detection batching status changes for a specific fixture.
+ * @param fixture The fixture to handle change detection batching for.
+ */
+function installChangeDetectionBatchingHandler(fixture: ComponentFixture<unknown>) {
+  if (!activeFixtures.size) {
+    handleChangeDetectionBatching(({isBatching, onDetectChangesNow}) => {
+      disableAutoChangeDetection = isBatching;
+      if (onDetectChangesNow) {
+        Promise.all([...activeFixtures].map(detectChanges)).then(onDetectChangesNow);
+      }
+    });
+  }
+  activeFixtures.add(fixture);
+}
+
+/**
+ * Uninstalls a handler for change detection batching status changes for a specific fixture.
+ * @param fixture The fixture to stop handling change detection batching for.
+ */
+function uninstallChangeDetectionBatchingHandler(fixture: ComponentFixture<unknown>) {
+  activeFixtures.delete(fixture);
+  if (!activeFixtures.size) {
+    stopHandlingChangeDetectionBatching();
+  }
+}
+
+/**
+ * Triggers change detection for a specific fixture.
+ * @param fixture The fixture to trigger change detection for.
+ */
+async function detectChanges(fixture: ComponentFixture<unknown>) {
+  fixture.detectChanges();
+  await fixture.whenStable();
+}
+
 /** A `HarnessEnvironment` implementation for Angular's Testbed. */
 export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   /** Whether the environment has been destroyed. */
@@ -46,7 +92,11 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
     super(rawRootElement);
     this._options = {...defaultEnvironmentOptions, ...options};
     this._taskState = TaskStateZoneInterceptor.setup();
-    _fixture.componentRef.onDestroy(() => this._destroyed = true);
+    installChangeDetectionBatchingHandler(_fixture);
+    _fixture.componentRef.onDestroy(() => {
+      uninstallChangeDetectionBatchingHandler(_fixture);
+      this._destroyed = true;
+    });
   }
 
   /** Creates a `HarnessLoader` rooted at the given fixture's root element. */
@@ -79,13 +129,12 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   }
 
   async forceStabilize(): Promise<void> {
-    if (!this.isCDBatching()) {
+    if (!disableAutoChangeDetection) {
       if (this._destroyed) {
         throw Error('Harness is attempting to use a fixture that has already been destroyed.');
       }
 
-      this._fixture.detectChanges();
-      await this._fixture.whenStable();
+      await detectChanges(this._fixture);
     }
   }