fix(material/tooltip): match panel to trigger in test harness

The tooltip harness was written the assumption that only tooltip can be shown on the page at a time, however in tests that might not be the case. These changes add a couple of attributes so a trigger can be matched to its specific panel.

Fixes #26773.

Author: crisbeto

src/material/legacy-tooltip/testing/tooltip-harness.ts

@@ -15,7 +15,6 @@ import {_MatTooltipHarnessBase, TooltipHarnessFilters} from '@angular/material/t
  * @breaking-change 17.0.0
  */
 export class MatLegacyTooltipHarness extends _MatTooltipHarnessBase {
-  protected _optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-tooltip');
   protected _hiddenClass = 'mat-tooltip-hide';
   protected _showAnimationName = 'mat-tooltip-show';
   protected _hideAnimationName = 'mat-tooltip-hide';

src/material/legacy-tooltip/tooltip.ts

@@ -49,6 +49,8 @@ import {
   exportAs: 'matTooltip',
   host: {
     'class': 'mat-tooltip-trigger',
+    // Used by harnesses to match the trigger to its tooltip.
+    '[attr.data-mat-tooltip]': '_panelId',
   },
 })
 export class MatLegacyTooltip extends _MatTooltipBase<LegacyTooltipComponent> {
@@ -102,6 +104,7 @@ export class MatLegacyTooltip extends _MatTooltipBase<LegacyTooltipComponent> {
     // won't be rendered if the animations are disabled or there is no web animations polyfill.
     '[style.zoom]': 'isVisible() ? 1 : null',
     '(mouseleave)': '_handleMouseLeave($event)',
+    '[attr.id]': '_id',
     'aria-hidden': 'true',
   },
 })

src/material/tooltip/testing/tooltip-harness.ts

@@ -7,7 +7,6 @@
  */
 
 import {
-  AsyncFactoryFn,
   ComponentHarness,
   ComponentHarnessConstructor,
   HarnessPredicate,
@@ -16,7 +15,6 @@ import {
 import {TooltipHarnessFilters} from './tooltip-harness-filters';
 
 export abstract class _MatTooltipHarnessBase extends ComponentHarness {
-  protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;
   protected abstract _hiddenClass: string;
   protected abstract _showAnimationName: string;
   protected abstract _hideAnimationName: string;
@@ -30,7 +28,7 @@ export abstract class _MatTooltipHarnessBase extends ComponentHarness {
     // element has ripples.
     await host.dispatchEvent('touchstart', {changedTouches: []});
     await host.hover();
-    const panel = await this._optionalPanel();
+    const panel = await this._getPanel();
     await panel?.dispatchEvent('animationend', {animationName: this._showAnimationName});
   }
 
@@ -42,27 +40,32 @@ export abstract class _MatTooltipHarnessBase extends ComponentHarness {
     // the tooltip binds different events depending on the device.
     await host.dispatchEvent('touchend');
     await host.mouseAway();
-    const panel = await this._optionalPanel();
+    const panel = await this._getPanel();
     await panel?.dispatchEvent('animationend', {animationName: this._hideAnimationName});
   }
 
   /** Gets whether the tooltip is open. */
   async isOpen(): Promise<boolean> {
-    const panel = await this._optionalPanel();
+    const panel = await this._getPanel();
     return !!panel && !(await panel.hasClass(this._hiddenClass));
   }
 
   /** Gets a promise for the tooltip panel's text. */
   async getTooltipText(): Promise<string> {
-    const panel = await this._optionalPanel();
+    const panel = await this._getPanel();
     return panel ? panel.text() : '';
   }
+
+  /** Gets the tooltip panel associated with the trigger. */
+  private async _getPanel(): Promise<TestElement | null> {
+    const host = await this.host();
+    const locatorFactory = this.documentRootLocatorFactory();
+    return locatorFactory.locatorForOptional(`#${await host.getAttribute('data-mat-tooltip')}`)();
+  }
 }
 
 /** Harness for interacting with a standard mat-tooltip in tests. */
 export class MatTooltipHarness extends _MatTooltipHarnessBase {
-  protected _optionalPanel =
-    this.documentRootLocatorFactory().locatorForOptional('.mat-mdc-tooltip');
   static hostSelector = '.mat-mdc-tooltip-trigger';
   protected _hiddenClass = 'mat-mdc-tooltip-hide';
   protected _showAnimationName = 'mat-mdc-tooltip-show';

src/material/tooltip/tooltip.ts

@@ -161,6 +161,7 @@ const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
 const UNBOUNDED_ANCHOR_GAP = 8;
 const MIN_HEIGHT = 24;
 const MAX_WIDTH = 200;
+let uniqueId = 0;
 
 @Directive()
 export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
@@ -181,6 +182,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
   protected _viewportMargin = 8;
   private _currentPosition: TooltipPosition;
   protected readonly _cssClassPrefix: string = 'mat';
+  readonly _panelId = `mat-tooltip-panel-${uniqueId++}`;
 
   /** Allows the user to define the position of the tooltip relative to the parent element */
   @Input('matTooltipPosition')
@@ -426,6 +428,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
     const instance = (this._tooltipInstance = overlayRef.attach(this._portal).instance);
     instance._triggerElement = this._elementRef.nativeElement;
     instance._mouseLeaveHideDelay = this._hideDelay;
+    instance._id = this._panelId;
     instance
       .afterHidden()
       .pipe(takeUntil(this._destroyed))
@@ -852,6 +855,8 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
   exportAs: 'matTooltip',
   host: {
     'class': 'mat-mdc-tooltip-trigger',
+    // Used by harnesses to match the trigger to its tooltip.
+    '[attr.data-mat-tooltip]': '_panelId',
   },
 })
 export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
@@ -927,6 +932,9 @@ export abstract class _TooltipComponentBase implements OnDestroy {
   /** Amount of milliseconds to delay the closing sequence. */
   _mouseLeaveHideDelay: number;
 
+  /** Unique ID for the panel. Assigned by the trigger. */
+  _id: string | undefined;
+
   /** Whether animations are currently disabled. */
   private _animationsDisabled: boolean;
 
@@ -1111,6 +1119,7 @@ export abstract class _TooltipComponentBase implements OnDestroy {
     // won't be rendered if the animations are disabled or there is no web animations polyfill.
     '[style.zoom]': 'isVisible() ? 1 : null',
     '(mouseleave)': '_handleMouseLeave($event)',
+    '[attr.id]': '_id',
     'aria-hidden': 'true',
   },
 })

tools/public_api_guard/material/legacy-tooltip-testing.md

@@ -4,11 +4,9 @@
 
 ```ts
 
-import { AsyncFactoryFn } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 import { TooltipHarnessFilters as LegacyTooltipHarnessFilters } from '@angular/material/tooltip/testing';
 import { _MatTooltipHarnessBase } from '@angular/material/tooltip/testing';
-import { TestElement } from '@angular/cdk/testing';
 
 export { LegacyTooltipHarnessFilters }
 
@@ -21,8 +19,6 @@ export class MatLegacyTooltipHarness extends _MatTooltipHarnessBase {
     // (undocumented)
     static hostSelector: string;
     // (undocumented)
-    protected _optionalPanel: AsyncFactoryFn<TestElement | null>;
-    // (undocumented)
     protected _showAnimationName: string;
     static with(options?: LegacyTooltipHarnessFilters): HarnessPredicate<MatLegacyTooltipHarness>;
 }

tools/public_api_guard/material/tooltip-testing.md

@@ -4,12 +4,10 @@
 
 ```ts
 
-import { AsyncFactoryFn } from '@angular/cdk/testing';
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
 import { ComponentHarnessConstructor } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
-import { TestElement } from '@angular/cdk/testing';
 
 // @public
 export class MatTooltipHarness extends _MatTooltipHarnessBase {
@@ -20,8 +18,6 @@ export class MatTooltipHarness extends _MatTooltipHarnessBase {
     // (undocumented)
     static hostSelector: string;
     // (undocumented)
-    protected _optionalPanel: AsyncFactoryFn<TestElement | null>;
-    // (undocumented)
     protected _showAnimationName: string;
     static with<T extends MatTooltipHarness>(this: ComponentHarnessConstructor<T>, options?: TooltipHarnessFilters): HarnessPredicate<T>;
 }
@@ -35,8 +31,6 @@ export abstract class _MatTooltipHarnessBase extends ComponentHarness {
     // (undocumented)
     protected abstract _hideAnimationName: string;
     isOpen(): Promise<boolean>;
-    // (undocumented)
-    protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;
     show(): Promise<void>;
     // (undocumented)
     protected abstract _showAnimationName: string;

tools/public_api_guard/material/tooltip.md

@@ -105,6 +105,8 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
     ngOnDestroy(): void;
     // (undocumented)
     _overlayRef: OverlayRef | null;
+    // (undocumented)
+    readonly _panelId: string;
     get position(): TooltipPosition;
     set position(value: TooltipPosition);
     // (undocumented)
@@ -195,6 +197,7 @@ export abstract class _TooltipComponentBase implements OnDestroy {
     _handleMouseLeave({ relatedTarget }: MouseEvent): void;
     hide(delay: number): void;
     protected abstract readonly _hideAnimation: string;
+    _id: string | undefined;
     isVisible(): boolean;
     _markForCheck(): void;
     message: string;