feat(tooltip/testing): add test harness for mat-tooltip (#19144)

This is redo of #16676. Adds a test harness for `mat-tooltip`, as well as an API to move the pointer away from an element, as an opposite to `TestElement.hover`.

Author: crisbeto

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

@@ -99,6 +99,12 @@ export class ProtractorElement implements TestElement {
         .perform();
   }
 
+  async mouseAway(): Promise<void> {
+    return browser.actions()
+        .mouseMove(await this.element.getWebElement(), {x: -1, y: -1})
+        .perform();
+  }
+
   async sendKeys(...keys: (string | TestKey)[]): Promise<void>;
   async sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
   async sendKeys(...modifiersAndKeys: any[]): Promise<void> {

src/cdk/testing/test-element.ts

@@ -86,6 +86,9 @@ export interface TestElement {
   /** Hovers the mouse over the element. */
   hover(): Promise<void>;
 
+  /** Moves the mouse away from the element. */
+  mouseAway(): Promise<void>;
+
   /**
    * Sends the given string to the input as a series of key presses. Also fires input events
    * and attempts to add the string to the Element's value.

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

@@ -119,6 +119,12 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
+  async mouseAway(): Promise<void> {
+    await this._stabilize();
+    dispatchMouseEvent(this.element, 'mouseleave');
+    await this._stabilize();
+  }
+
   async sendKeys(...keys: (string | TestKey)[]): Promise<void>;
   async sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
   async sendKeys(...modifiersAndKeys: any[]): Promise<void> {

src/cdk/testing/tests/test-main-component.ts

@@ -24,8 +24,8 @@ import {
   templateUrl: 'test-main-component.html',
   host: {
     '[class.hovering]': '_isHovering',
-    '(mouseenter)': 'onMouseOver()',
-    '(mouseout)': 'onMouseOut()',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -50,11 +50,11 @@ export class TestMainComponent implements OnDestroy {
 
   private _fakeOverlayElement: HTMLElement;
 
-  onMouseOver() {
+  onMouseEnter() {
     this._isHovering = true;
   }
 
-  onMouseOut() {
+  onMouseLeave() {
     this._isHovering = false;
   }
 

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

@@ -338,6 +338,18 @@ describe('TestbedHarnessEnvironment', () => {
       expect(classAttr).toContain('hovering');
     });
 
+    it('should be able to stop hovering', async () => {
+      const host = await harness.host();
+      let classAttr = await host.getAttribute('class');
+      expect(classAttr).not.toContain('hovering');
+      await host.hover();
+      classAttr = await host.getAttribute('class');
+      expect(classAttr).toContain('hovering');
+      await host.mouseAway();
+      classAttr = await host.getAttribute('class');
+      expect(classAttr).not.toContain('hovering');
+    });
+
     it('should be able to getAttribute', async () => {
       const memoStr = `
         This is an example that shows how to use component harness

src/material/config.bzl

@@ -58,6 +58,7 @@ entryPoints = [
     "tabs/testing",
     "toolbar",
     "tooltip",
+    "tooltip/testing",
     "tree",
     "form-field/testing",
     "form-field/testing/control",

src/material/tooltip/testing/BUILD.bazel

@@ -0,0 +1,50 @@
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/tooltip/testing",
+    deps = [
+        "//src/cdk/testing",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_test_library(
+    name = "harness_tests_lib",
+    srcs = ["shared.spec.ts"],
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/tooltip",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["shared.spec.ts"],
+    ),
+    deps = [
+        ":harness_tests_lib",
+        ":testing",
+        "//src/material/tooltip",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material/tooltip/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './public-api';

src/material/tooltip/testing/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+export * from './tooltip-harness';
+export * from './tooltip-harness-filters';

src/material/tooltip/testing/shared.spec.ts

@@ -0,0 +1,67 @@
+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 {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTooltipHarness} from '@angular/material/tooltip/testing/tooltip-harness';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+/** Shared tests to run on both the original and MDC-based tooltips. */
+export function runHarnessTests(
+    tooltipModule: typeof MatTooltipModule, tooltipHarness: typeof MatTooltipHarness) {
+  let fixture: ComponentFixture<TooltipHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [tooltipModule, NoopAnimationsModule],
+      declarations: [TooltipHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TooltipHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all tooltip harnesses', async () => {
+    const tooltips = await loader.getAllHarnesses(tooltipHarness);
+    expect(tooltips.length).toBe(2);
+  });
+
+  it('should be able to show a tooltip', async () => {
+    const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.isOpen()).toBe(false);
+    await tooltip.show();
+    expect(await tooltip.isOpen()).toBe(true);
+  });
+
+  it('should be able to hide a tooltip', async () => {
+    const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.isOpen()).toBe(false);
+    await tooltip.show();
+    expect(await tooltip.isOpen()).toBe(true);
+    await tooltip.hide();
+    expect(await tooltip.isOpen()).toBe(false);
+  });
+
+  it('should be able to get the text of a tooltip', async () => {
+    const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'}));
+    await tooltip.show();
+    expect(await tooltip.getTooltipText()).toBe('Tooltip message');
+  });
+
+  it('should return empty when getting the tooltip text while closed', async () => {
+    const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.getTooltipText()).toBe('');
+  });
+}
+
+@Component({
+  template: `
+    <button [matTooltip]="message" id="one">Trigger 1</button>
+    <button matTooltip="Static message" id="two">Trigger 2</button>
+  `
+})
+class TooltipHarnessTest {
+  message = 'Tooltip message';
+}