perf(cdk/testing): Improve performance of clicking in unit tests.

This PR changes the semantics of `TestElement.click()` when called with
no arguments. Rather than guarantee clicking the center of the element,
the location of the click will be up to the particular
`HarnessEnvironment`. This allows the `TestbedHarnessEnvironment` to
skip the expensive and often unnecessary calculation to determine the
center of the element.

To replace the old behavior of `TestElement.click()`, the PR adds a new
signature, `TestElement.click('center')` that can be used to click the
center of the element. Calling `TestElement.click(x, y)` to click a
point relative to the top left of the element remains uncahnged.

I tested the performance gain of these changes by running a unit test to
click 1000 buttons. Prior to this change it took 3000.2ms, with this
change it took 1842.1ms (38.6% improvement).

Author: mmalerba

src/cdk/testing/protractor/protractor-element.ts

@@ -80,11 +80,11 @@ export class ProtractorElement implements TestElement {
     return this.element.clear();
   }
 
-  async click(...args: number[]): Promise<void> {
+  async click(...args: ['center'] | [number, number]): Promise<void> {
     // Omitting the offset argument to mouseMove results in clicking the center.
     // This is the default behavior we want, so we use an empty array of offsetArgs if no args are
     // passed to this method.
-    const offsetArgs = args.length ? [{x: args[0], y: args[1]}] : [];
+    const offsetArgs = args.length == 2 ? [{x: args[0], y: args[1]}] : [];
 
     await browser.actions()
       .mouseMove(await this.element.getWebElement(), ...offsetArgs)

src/cdk/testing/test-element.ts

@@ -67,9 +67,16 @@ export interface TestElement {
   /** Clear the element's input (for input and textarea elements only). */
   clear(): Promise<void>;
 
-  /** Click the element at the element's center. */
+  /**
+   * Click the element at the default location for the current environment. If you need to guarantee
+   * the element is clicked at a specific location, consider using `click('center')` or
+   * `click(x, y)` instead.
+   */
   click(): Promise<void>;
 
+  /** Click the element at the element's center. */
+  click(location: 'center'): Promise<void>;
+
   /**
    * Click the element at the specified coordinates relative to the top-left of the element.
    * @param relativeX Coordinate within the element, along the X-axis at which to click.

src/cdk/testing/testbed/unit-test-element.ts

@@ -78,15 +78,19 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
-  async click(...args: number[]): Promise<void> {
-    const {left, top, width, height} = await this.getDimensions();
-    const relativeX = args.length ? args[0] : width / 2;
-    const relativeY = args.length ? args[1] : height / 2;
-
-    // Round the computed click position as decimal pixels are not
-    // supported by mouse events and could lead to unexpected results.
-    const clientX = Math.round(left + relativeX);
-    const clientY = Math.round(top + relativeY);
+  async click(...args: ['center'] | [number, number]): Promise<void> {
+    let clientX: number | undefined = undefined;
+    let clientY: number | undefined = undefined;
+    if (args.length) {
+      const {left, top, width, height} = await this.getDimensions();
+      const relativeX = args[0] === 'center' ? width / 2 : args[0];
+      const relativeY = args[0] === 'center' ? height / 2 : args[1];
+
+      // Round the computed click position as decimal pixels are not
+      // supported by mouse events and could lead to unexpected results.
+      clientX = Math.round(left + relativeX);
+      clientY = Math.round(top + relativeY);
+    }
 
     this._dispatchPointerEventIfSupported('pointerdown', clientX, clientY);
     dispatchMouseEvent(this.element, 'mousedown', clientX, clientY);

src/cdk/testing/tests/cross-environment.spec.ts

@@ -322,7 +322,14 @@ export function crossEnvironmentSpecs(
     it('should be able to click at a specific position within an element', async () => {
       const clickTest = await harness.clickTest();
       const clickTestResult = await harness.clickTestResult();
-      await clickTest.click(50, 50);
+      await clickTest.click(10, 10);
+      expect(await clickTestResult.text()).toBe('10-10');
+    });
+
+    it('should be able to click the center of an element', async () => {
+      const clickTest = await harness.clickTest();
+      const clickTestResult = await harness.clickTestResult();
+      await clickTest.click('center');
       expect(await clickTestResult.text()).toBe('50-50');
     });