perf(cdk/testing): allow batching of change detection

Author: mmalerba

src/cdk/testing/component-harness.ts

@@ -101,6 +101,8 @@ 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>;
 }
 
 /**
@@ -240,6 +242,8 @@ export interface LocatorFactory {
    * authors to wait for async tasks outside of the Angular zone.
    */
   waitForTasksOutsideAngular(): Promise<void>;
+
+  batchCD<T>(fn: () => Promise<T>): Promise<T>;
 }
 
 /**
@@ -373,6 +377,10 @@ export abstract class ComponentHarness {
   protected async waitForTasksOutsideAngular() {
     return this.locatorFactory.waitForTasksOutsideAngular();
   }
+
+  async batchCD<T>(fn: () => Promise<T>) {
+    return this.locatorFactory.batchCD(fn);
+  }
 }
 
 
@@ -486,7 +494,11 @@ export class HarnessPredicate<T extends ComponentHarness> {
    * @return A list of harnesses that satisfy this predicate.
    */
   async filter(harnesses: T[]): Promise<T[]> {
-    const results = await Promise.all(harnesses.map(h => this.evaluate(h)));
+    if (harnesses.length === 0) {
+      return [];
+    }
+    const results =
+        await harnesses[0].batchCD(() => Promise.all(harnesses.map(h => this.evaluate(h))));
     return harnesses.filter((_, i) => results[i]);
   }
 
@@ -497,7 +509,7 @@ export class HarnessPredicate<T extends ComponentHarness> {
    *   and resolves to false otherwise.
    */
   async evaluate(harness: T): Promise<boolean> {
-    const results = await Promise.all(this._predicates.map(p => p(harness)));
+    const results = await harness.batchCD(() => Promise.all(this._predicates.map(p => p(harness))));
     return results.reduce((combined, current) => combined && current, true);
   }
 

src/cdk/testing/harness-environment.ts

@@ -36,6 +36,8 @@ type ParsedQueries<T extends ComponentHarness> = {
   harnessTypes: Set<ComponentHarnessConstructor<T>>,
 };
 
+let isCDBatching = false;
+
 /**
  * Base harness environment class that can be extended to allow `ComponentHarness`es to be used in
  * different test environments (e.g. testbed, protractor, etc.). This class implements the
@@ -119,6 +121,24 @@ 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>) {
+    const alreadyBatching = isCDBatching;
+    if (!alreadyBatching) {
+      await this.forceStabilize();
+      isCDBatching = true;
+    }
+    const result = await fn();
+    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 {
@@ -165,17 +185,18 @@ export abstract class HarnessEnvironment<E> implements HarnessLoader, LocatorFac
     const skipSelectorCheck = (elementQueries.length === 0 && harnessTypes.size === 1) ||
         harnessQueries.length === 0;
 
-    const perElementMatches = await 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 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);
+        })));
     return ([] as any).concat(...perElementMatches);
   }
 

src/cdk/testing/test-harnesses.md

@@ -157,16 +157,23 @@ Note that `await` statements block the execution of your test until the associat
 resolves. When reading multiple properties of a harness it may not be necessary to block on the
 first before asking for the next, in these cases use `Promise.all` to parallelize.
 
+Another thing to consider when parallelizing multiple operations is the component harnesses
+automatically trigger change detection before reading state from an element and after interacting
+with it. When you're running multiple operations in a `Promise.all`, you don't need change detection
+to be triggered multiple times. In order to optimize performance, both `HarnessLoader` and
+`ComponentHarness` offer a `batchCD` method that can be used to ensure change detection is only
+triggered once before the batch operation, and once after.
+
 For example, consider the following example of reading both the `checked` and `indeterminate` state
 off of a checkbox harness:
 
 ```ts
 it('reads properties in parallel', async () => {
   const checkboxHarness = loader.getHarness(MyCheckboxHarness);
-  const [checked, indeterminate] = await Promise.all([
+  const [checked, indeterminate] = await loader.batchCD(() => Promise.all([
     checkboxHarness.isChecked(),
     checkboxHarness.isIndeterminate()
-  ]);
+  ]));
 
   // ... make some assertions
 });

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

@@ -79,12 +79,14 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   }
 
   async forceStabilize(): Promise<void> {
-    if (this._destroyed) {
-      throw Error('Harness is attempting to use a fixture that has already been destroyed.');
-    }
+    if (!this.isCDBatching()) {
+      if (this._destroyed) {
+        throw Error('Harness is attempting to use a fixture that has already been destroyed.');
+      }
 
-    this._fixture.detectChanges();
-    await this._fixture.whenStable();
+      this._fixture.detectChanges();
+      await this._fixture.whenStable();
+    }
   }
 
   async waitForTasksOutsideAngular(): Promise<void> {

src/cdk/testing/tests/testbed.spec.ts

@@ -102,6 +102,38 @@ describe('TestbedHarnessEnvironment', () => {
           );
           expect(await (await harness.deepShadow()).text()).toBe('Shadow 2');
         });
+
+        it('should batch change detection', async () => {
+          const detectChangesSpy = spyOn(fixture, 'detectChanges').and.callThrough();
+          const harness =
+              await TestbedHarnessEnvironment.harnessForFixture(fixture, MainComponentHarness);
+          detectChangesSpy.calls.reset();
+          await harness.batchCD(async () => {
+            expect(detectChangesSpy).toHaveBeenCalledTimes(1);
+            const button = await harness.button();
+            await button.text();
+            await button.click();
+            expect(detectChangesSpy).toHaveBeenCalledTimes(1);
+          });
+          expect(detectChangesSpy).toHaveBeenCalledTimes(2);
+        });
+
+        it('should handle nested calls to batch change detection', async () => {
+          const detectChangesSpy = spyOn(fixture, 'detectChanges').and.callThrough();
+          const harness =
+              await TestbedHarnessEnvironment.harnessForFixture(fixture, MainComponentHarness);
+          detectChangesSpy.calls.reset();
+          await harness.batchCD(async () => {
+            const button = await harness.button();
+            await button.text();
+            await button.click();
+            await harness.batchCD(async () => {
+              await button.text();
+              await button.click();
+            });
+          });
+          expect(detectChangesSpy).toHaveBeenCalledTimes(2);
+        });
       });
     }
   });

test/benchmarks/material/button-harness/testbed.perf-spec.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright Google LLC 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 {HarnessLoader} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonHarness} from '@angular/material/button/testing/button-harness';
+import {MIDDLE_BUTTON, NUM_BUTTONS} from './constants';
+import {benchmark} from './testbed-benchmark-utilities';
+
+describe('performance for the testbed harness environment', () => {
+  let fixture: ComponentFixture<ButtonHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = 36000000;
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatButtonModule],
+      declarations: [ButtonHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  describe('(baseline)', () => {
+    it('should find a button', async () => {
+      await benchmark('(baseline) find a button', async () => {
+        document.querySelector('button');
+      });
+    });
+
+    it('should find all buttons', async () => {
+      await benchmark('(baseline) find all buttons', async () => {
+        document.querySelectorAll('button');
+      });
+    });
+
+    it('should find a button via text filter', async () => {
+      await benchmark('(baseline) find a button via text filter', async () => {
+        return Array.from(document.querySelectorAll('button'))
+            .filter(b => b.innerText === MIDDLE_BUTTON);
+      });
+    });
+
+    it('should click a button', async () => {
+      const button = document.querySelector('button')!;
+      await benchmark('(baseline) click a button', async () => {
+        button.click();
+        fixture.detectChanges();
+      });
+    });
+
+    it('should click all buttons', async () => {
+      const buttons = Array.prototype.slice.call(document.querySelectorAll('button'));
+      await benchmark('(baseline) click all buttons', async () => {
+        buttons.forEach(button => button.click());
+        fixture.detectChanges();
+      });
+    });
+  });
+
+  describe('(with harness)', () => {
+    it('should find a button', async () => {
+      await benchmark('(with harness) find a button', async () => {
+        await loader.getHarness(MatButtonHarness);
+      });
+    });
+
+    it('should find all buttons', async () => {
+      await benchmark('(with harness) find all buttons', async () => {
+        await loader.getAllHarnesses(MatButtonHarness);
+      });
+    });
+
+    it('should find a button via text filter', async () => {
+      await benchmark('(with harness) find a button via text filter', async () => {
+        await loader.getAllHarnesses(MatButtonHarness.with({text: MIDDLE_BUTTON}));
+      });
+    });
+
+    it('should click a button', async () => {
+      const button = await loader.getHarness(MatButtonHarness);
+      await benchmark('(with harness) click a button', async () => {
+        await button.click();
+      });
+    });
+
+    it('should click all buttons', async () => {
+      const buttons = await loader.getAllHarnesses(MatButtonHarness);
+      await benchmark('(with harness) click all buttons', async () => {
+        await loader.batchCD(() => Promise.all(buttons.map(button => button.click())));
+      });
+    });
+  });
+
+  it('should fail intentionally so performance numbers are logged', fail);
+});
+
+@Component({
+  template: `
+    <button *ngFor="let val of vals" mat-button> {{ val }} </button>
+	`,
+})
+export class ButtonHarnessTest {
+  vals = Array.from({ length: NUM_BUTTONS }, (_, i) => i);
+}