feat(mdc-experimental): add test harness for mat-tooltip

Sets up a test harness for the current Material tooltip.

Author: crisbeto

.github/CODEOWNERS

@@ -98,6 +98,7 @@
 /src/material-experimental/mdc-radio/**            @mmalerba
 /src/material-experimental/mdc-slide-toggle/**     @crisbeto
 /src/material-experimental/mdc-tabs/**             @crisbeto
+/src/material-experimental/mdc-tooltip/**          @crisbeto
 /src/material-experimental/mdc-theming/**          @mmalerba
 /src/material-experimental/mdc-typography/**       @mmalerba
 /src/material-experimental/popover-edit/**         @kseamon @andrewseguin

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

@@ -39,6 +39,12 @@ export class ProtractorElement implements TestElement {
         .perform();
   }
 
+  async movePointerAway(): Promise<void> {
+    return browser.actions()
+        .mouseMove(await this.element.getWebElement(), {x: -1, y: -1})
+        .perform();
+  }
+
   async sendKeys(keys: string): Promise<void> {
     return this.element.sendKeys(keys);
   }

src/cdk-experimental/testing/test-element.ts

@@ -29,6 +29,9 @@ export interface TestElement {
   /** Hovers the mouse over the element. */
   hover(): Promise<void>;
 
+  /** Moves the pointer away from the element. */
+  movePointerAway(): 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-experimental/testing/testbed/testbed-harness-environment.ts

@@ -37,7 +37,7 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   }
 
   protected getDocumentRoot(): Element {
-    return this._fixture.nativeElement;
+    return document.body;
   }
 
   protected createTestElement(element: Element): TestElement {

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

@@ -66,6 +66,12 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
+  async movePointerAway(): Promise<void> {
+    await this._stabilize();
+    dispatchMouseEvent(this.element, 'mouseleave');
+    await this._stabilize();
+  }
+
   async sendKeys(keys: string): Promise<void> {
     await this._stabilize();
     triggerFocus(this.element as HTMLElement);

src/cdk-experimental/testing/tests/protractor.e2e.spec.ts

@@ -205,6 +205,18 @@ describe('ProtractorHarnessEnvironment', () => {
       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.movePointerAway();
+      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/cdk-experimental/testing/tests/test-main-component.ts

@@ -19,8 +19,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,
@@ -36,11 +36,11 @@ export class TestMainComponent {
   testMethods: string[];
   _isHovering: boolean;
 
-  onMouseOver() {
+  onMouseEnter() {
     this._isHovering = true;
   }
 
-  onMouseOut() {
+  onMouseLeave() {
     this._isHovering = false;
   }
 

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

@@ -224,6 +224,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.movePointerAway();
+      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-experimental/mdc-tooltip/BUILD.bazel

@@ -0,0 +1,98 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite", "ts_library")
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+
+ng_module(
+    name = "mdc-tooltip",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "harness/**",
+        ],
+    ),
+    assets = [
+        # TODO: include scss assets
+    ] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-tooltip",
+    deps = [
+        "//src/material/core",
+    ],
+)
+
+ts_library(
+    name = "harness",
+    srcs = glob(
+        ["harness/**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk-experimental/testing",
+        "//src/cdk/private/testing",
+    ],
+)
+
+sass_library(
+    name = "mdc_tooltip_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "tooltip_scss",
+    src = "tooltip.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:all_themes",
+    ],
+)
+
+ng_test_library(
+    name = "tooltip_tests_lib",
+    srcs = [
+        "harness/tooltip-harness.spec.ts",
+    ],
+    deps = [
+        ":harness",
+        ":mdc-tooltip",
+        "//src/cdk-experimental/testing",
+        "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/testing",
+        "//src/material/tooltip",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [
+        ":tooltip_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/private/testing/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/private/testing/e2e",
+    ],
+)

src/material-experimental/mdc-tooltip/README.md

@@ -0,0 +1 @@
+<!-- TODO -->

src/material-experimental/mdc-tooltip/_mdc-tooltip.scss

@@ -0,0 +1,13 @@
+@import '../mdc-helpers/mdc-helpers';
+
+@mixin mat-tooltip-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    // TODO: implement MDC-based tooltip.
+  }
+}
+
+@mixin mat-tooltip-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    // TODO: implement MDC-based tooltip.
+  }
+}

src/material-experimental/mdc-tooltip/harness/mdc-tooltip-harness.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {ComponentHarness} from '@angular/cdk-experimental/testing';
+
+
+/**
+ * Harness for interacting with a MDC-based mat-tooltip in tests.
+ * @dynamic
+ */
+export class MatTooltipHarness extends ComponentHarness {
+  // TODO: implement once MDC tooltip is done.
+}

src/material-experimental/mdc-tooltip/harness/tooltip-harness-filters.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 type TooltipHarnessFilters = {
+  id?: string;
+};

src/material-experimental/mdc-tooltip/harness/tooltip-harness.spec.ts

@@ -0,0 +1,98 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatTooltipModule as MatMdcTooltipModule} from '../index';
+import {MatTooltipHarness} from './tooltip-harness';
+import {MatTooltipHarness as MatMdcTooltipHarness} from './mdc-tooltip-harness';
+
+let fixture: ComponentFixture<TooltipHarnessTest>;
+let loader: HarnessLoader;
+let harness: typeof MatTooltipHarness;
+
+describe('MatTooltipHarness', () => {
+  describe('non-MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [MatTooltipModule, NoopAnimationsModule],
+        declarations: [TooltipHarnessTest],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(TooltipHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      harness = MatTooltipHarness;
+    });
+
+    runTests();
+  });
+
+  describe('MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [MatMdcTooltipModule, NoopAnimationsModule],
+        declarations: [TooltipHarnessTest],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(TooltipHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      // Public APIs are the same as MatTooltipHarness, but cast
+      // is necessary because of different private fields.
+      harness = MatMdcTooltipHarness as any;
+    });
+
+    // TODO: enable after MDC tooltip is implemented
+    // runTests();
+  });
+});
+
+/** Shared tests to run on both the original and MDC-based tooltip. */
+function runTests() {
+  it('should load all tooltip harnesses', async () => {
+    const tooltips = await loader.getAllHarnesses(harness);
+    expect(tooltips.length).toBe(2);
+  });
+
+  it('should be able to open a tooltip', async () => {
+    const tooltip = await loader.getHarness(harness.with({id: 'one'}));
+    expect(await tooltip.isOpen()).toBe(false);
+    await tooltip.open();
+    expect(await tooltip.isOpen()).toBe(true);
+  });
+
+  // TODO(crisbeto): this fails because we have a setTimeout inside the tooltip which
+  // can't be flushed. Talk to Miles about how we should approach this in harnesses.
+  // it('should be able to close a tooltip', async () => {
+  //   const tooltip = await loader.getHarness(harness.with({id: 'one'}));
+  //   expect(await tooltip.isOpen()).toBe(false);
+  //   await tooltip.open();
+  //   expect(await tooltip.isOpen()).toBe(true);
+  //   await tooltip.close();
+  //   expect(await tooltip.isOpen()).toBe(false);
+  // });
+
+  it('should be able to get the text of a tooltip', async () => {
+    const tooltip = await loader.getHarness(harness.with({id: 'one'}));
+    await tooltip.open();
+    expect(await tooltip.getTooltipText()).toBe('Tooltip message');
+  });
+
+  it('should return empty when getting the tooltip text while closed', async () => {
+    const tooltip = await loader.getHarness(harness.with({id: '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';
+}
+