docs(material/tooltip): add harness example for tooltip (#21083)

fixup! remove platform check

Author: annieyw

src/components-examples/material/tooltip/BUILD.bazel

@@ -12,12 +12,18 @@ ng_module(
     module_name = "@angular/components-examples/material/tooltip",
     deps = [
         "//src/cdk/scrolling",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/input",
         "//src/material/select",
         "//src/material/tooltip",
+        "//src/material/tooltip/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/tooltip/index.ts

@@ -18,12 +18,14 @@ import {
 } from './tooltip-modified-defaults/tooltip-modified-defaults-example';
 import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
 import {TooltipPositionExample} from './tooltip-position/tooltip-position-example';
+import {TooltipHarnessExample} from './tooltip-harness/tooltip-harness-example';
 
 export {
   TooltipAutoHideExample,
   TooltipCustomClassExample,
   TooltipDelayExample,
   TooltipDisabledExample,
+  TooltipHarnessExample,
   TooltipManualExample,
   TooltipMessageExample,
   TooltipModifiedDefaultsExample,
@@ -36,6 +38,7 @@ const EXAMPLES = [
   TooltipCustomClassExample,
   TooltipDelayExample,
   TooltipDisabledExample,
+  TooltipHarnessExample,
   TooltipManualExample,
   TooltipMessageExample,
   TooltipModifiedDefaultsExample,

src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.html

@@ -0,0 +1,2 @@
+<button [matTooltip]="message" id="one">Trigger 1</button>
+<button matTooltip="Static message" id="two">Trigger 2</button>

src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts

@@ -0,0 +1,62 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatTooltipHarness} from '@angular/material/tooltip/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {TooltipHarnessExample} from './tooltip-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('TooltipHarnessExample', () => {
+  let fixture: ComponentFixture<TooltipHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatTooltipModule, NoopAnimationsModule],
+        declarations: [TooltipHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(TooltipHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all tooltip harnesses', async () => {
+    const tooltips = await loader.getAllHarnesses(MatTooltipHarness);
+    expect(tooltips.length).toBe(2);
+  });
+
+  it('should be able to show a tooltip', async () => {
+    const tooltip = await loader.getHarness(MatTooltipHarness.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(MatTooltipHarness.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(MatTooltipHarness.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(MatTooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.getTooltipText()).toBe('');
+  });
+});

src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatTooltipHarness
+ */
+@Component({
+  selector: 'tooltip-harness-example',
+  templateUrl: 'tooltip-harness-example.html',
+})
+export class TooltipHarnessExample {
+  message = 'Tooltip message';
+}