fix(cdk/testing): Make harnesses click on the center of the element by default (#19212)

* fix(cdk/testing): Make harnesses click on the center of the element by default

This is Protractor's default behavior. Prior to this PR we had been
clicking the top-left corner, but that didn't trigger the click event in
Protractor.

* address feedback

* clarifying comment

* update api goldens

Author: mmalerba

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

@@ -73,9 +73,14 @@ export class ProtractorElement implements TestElement {
     return this.element.clear();
   }
 
-  async click(relativeX = 0, relativeY = 0): Promise<void> {
+  async click(...args: 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]}] : [];
+
     await browser.actions()
-      .mouseMove(await this.element.getWebElement(), {x: relativeX, y: relativeY})
+      .mouseMove(await this.element.getWebElement(), ...offsetArgs)
       .click()
       .perform();
   }

src/cdk/testing/test-element.ts

@@ -67,12 +67,15 @@ 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(): Promise<void>;
+
   /**
-   * Click the element.
+   * 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.
    * @param relativeY Coordinate within the element, along the Y-axis at which to click.
    */
-  click(relativeX?: number, relativeY?: number): Promise<void>;
+  click(relativeX: number, relativeY: number): Promise<void>;
 
   /** Focus the element. */
   focus(): Promise<void>;

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

@@ -71,9 +71,11 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
-  async click(relativeX = 0, relativeY = 0): Promise<void> {
-    await this._stabilize();
-    const {left, top} = this.element.getBoundingClientRect();
+  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);

src/material/button/testing/BUILD.bazel

@@ -1,4 +1,5 @@
-load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_test_library", "ng_web_test_suite", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -38,7 +39,10 @@ ng_test_library(
     name = "unit_tests_lib",
     srcs = glob(
         ["**/*.spec.ts"],
-        exclude = ["shared.spec.ts"],
+        exclude = [
+            "**/*.e2e.spec.ts",
+            "shared.spec.ts",
+        ],
     ),
     deps = [
         ":harness_tests_lib",
@@ -51,3 +55,21 @@ ng_web_test_suite(
     name = "unit_tests",
     deps = [":unit_tests_lib"],
 )
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/private/e2e",
+        "//src/cdk/testing/protractor",
+        "//src/material/button/testing",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/private/e2e",
+    ],
+)

src/material/button/testing/button-harness.e2e.spec.ts

@@ -0,0 +1,17 @@
+import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import {browser} from 'protractor';
+
+describe('button harness', () => {
+  beforeEach(async () => await browser.get('/button'));
+
+  it('can click button', async () => {
+    const loader = ProtractorHarnessEnvironment.loader();
+    const disableToggle = await loader.getHarness(MatButtonHarness.with({text: 'Disable buttons'}));
+    const testButton  = await loader.getHarness(MatButtonHarness.with({selector: '#test-button'}));
+
+    expect(await testButton.isDisabled()).toBe(false);
+    await disableToggle.click();
+    expect(await testButton.isDisabled()).toBe(true);
+  });
+});

tools/public_api_guard/cdk/testing.d.ts

@@ -107,7 +107,8 @@ export interface ModifierKeys {
 export interface TestElement {
     blur(): Promise<void>;
     clear(): Promise<void>;
-    click(relativeX?: number, relativeY?: number): Promise<void>;
+    click(): Promise<void>;
+    click(relativeX: number, relativeY: number): Promise<void>;
     focus(): Promise<void>;
     getAttribute(name: string): Promise<string | null>;
     getCssValue(property: string): Promise<string>;

tools/public_api_guard/cdk/testing/protractor.d.ts

@@ -3,7 +3,7 @@ export declare class ProtractorElement implements TestElement {
     constructor(element: ElementFinder);
     blur(): Promise<void>;
     clear(): Promise<void>;
-    click(relativeX?: number, relativeY?: number): Promise<void>;
+    click(...args: number[]): Promise<void>;
     focus(): Promise<void>;
     getAttribute(name: string): Promise<string | null>;
     getCssValue(property: string): Promise<string>;

tools/public_api_guard/cdk/testing/testbed.d.ts

@@ -20,7 +20,7 @@ export declare class UnitTestElement implements TestElement {
     constructor(element: Element, _stabilize: () => Promise<void>);
     blur(): Promise<void>;
     clear(): Promise<void>;
-    click(relativeX?: number, relativeY?: number): Promise<void>;
+    click(...args: number[]): Promise<void>;
     focus(): Promise<void>;
     getAttribute(name: string): Promise<string | null>;
     getCssValue(property: string): Promise<string>;