fix(material/menu): add filter for trigger icon name (#32188)

Adds the option to filter harnesses based on the icon in the menu trigger.

Fixes #32181.

(cherry picked from commit c9289b5)

Author: crisbeto

goldens/material/menu/testing/index.api.md

@@ -62,6 +62,7 @@ export class MatMenuItemHarness extends ContentContainerComponentHarness<string>
 
 // @public
 export interface MenuHarnessFilters extends BaseHarnessFilters {
+    triggerIconName?: string | RegExp;
     triggerText?: string | RegExp;
 }
 

src/material/menu/testing/BUILD.bazel

@@ -11,6 +11,7 @@ ts_project(
     deps = [
         "//src/cdk/coercion",
         "//src/cdk/testing",
+        "//src/material/icon/testing",
     ],
 )
 
@@ -31,6 +32,7 @@ ng_project(
         "//src/cdk/testing",
         "//src/cdk/testing/private",
         "//src/cdk/testing/testbed",
+        "//src/material/icon",
         "//src/material/menu",
     ],
 )

src/material/menu/testing/menu-harness-filters.ts

@@ -12,6 +12,9 @@ import {BaseHarnessFilters} from '@angular/cdk/testing';
 export interface MenuHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose trigger text matches the given value. */
   triggerText?: string | RegExp;
+
+  /** Only find instances where the trigger contains an icon whose name matches the given value. */
+  triggerIconName?: string | RegExp;
 }
 
 /** A set of criteria that can be used to filter a list of `MatMenuItemHarness` instances. */

src/material/menu/testing/menu-harness.spec.ts

@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
+import {MatIconModule} from '@angular/material/icon';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatMenuModule} from '../menu-module';
 import {MatMenuHarness} from './menu-harness';
@@ -18,7 +19,7 @@ describe('MatMenuHarness', () => {
 
     it('should load all menu harnesses', async () => {
       const menues = await loader.getAllHarnesses(MatMenuHarness);
-      expect(menues.length).toBe(2);
+      expect(menues.length).toBe(3);
     });
 
     it('should load menu with exact text', async () => {
@@ -33,6 +34,12 @@ describe('MatMenuHarness', () => {
       expect(await menus[0].getTriggerText()).toBe('Settings');
     });
 
+    it('should load menu by icon name', async () => {
+      const menus = await loader.getAllHarnesses(MatMenuHarness.with({triggerIconName: 'wrench'}));
+      expect(menus.length).toBe(1);
+      expect(await (await menus[0].host()).getAttribute('id')).toBe('with-icon');
+    });
+
     it('should get disabled state', async () => {
       const [enabledMenu, disabledMenu] = await loader.getAllHarnesses(MatMenuHarness);
       expect(await enabledMenu.isDisabled()).toBe(false);
@@ -146,39 +153,42 @@ describe('MatMenuHarness', () => {
 
 @Component({
   template: `
-      <button type="button" id="settings" [matMenuTriggerFor]="settingsMenu">Settings</button>
-      <button type="button" disabled [matMenuTriggerFor]="settingsMenu">Disabled menu</button>
-
-      <mat-menu #settingsMenu>
-        <menu mat-menu-item>Profile</menu>
-        <menu mat-menu-item>Account</menu>
-      </mat-menu>
+    <button type="button" id="settings" [matMenuTriggerFor]="settingsMenu">Settings</button>
+    <button type="button" disabled [matMenuTriggerFor]="settingsMenu">Disabled menu</button>
+    <button type="button" id="with-icon" [matMenuTriggerFor]="settingsMenu">
+      <mat-icon>wrench</mat-icon>
+    </button>
+
+    <mat-menu #settingsMenu>
+      <menu mat-menu-item>Profile</menu>
+      <menu mat-menu-item>Account</menu>
+    </mat-menu>
   `,
-  imports: [MatMenuModule],
+  imports: [MatMenuModule, MatIconModule],
 })
 class MenuHarnessTest {}
 
 @Component({
   template: `
-      <button [matMenuTriggerFor]="menu1">Menu 1</button>
+    <button [matMenuTriggerFor]="menu1">Menu 1</button>
 
-      <mat-menu #menu1>
-        <button mat-menu-item [matMenuTriggerFor]="menu2">Menu 2</button>
-        <button mat-menu-item (click)="lastClickedLeaf = 1">Leaf Item 1</button>
-        <button mat-menu-item [matMenuTriggerFor]="menu3">Menu 3</button>
-      </mat-menu>
+    <mat-menu #menu1>
+      <button mat-menu-item [matMenuTriggerFor]="menu2">Menu 2</button>
+      <button mat-menu-item (click)="lastClickedLeaf = 1">Leaf Item 1</button>
+      <button mat-menu-item [matMenuTriggerFor]="menu3">Menu 3</button>
+    </mat-menu>
 
-      <mat-menu #menu2>
-        <button mat-menu-item (click)="lastClickedLeaf = 2">Leaf Item 2</button>
-      </mat-menu>
+    <mat-menu #menu2>
+      <button mat-menu-item (click)="lastClickedLeaf = 2">Leaf Item 2</button>
+    </mat-menu>
 
-      <mat-menu #menu3>
-        <button mat-menu-item [matMenuTriggerFor]="menu4">Menu 4</button>
-      </mat-menu>
+    <mat-menu #menu3>
+      <button mat-menu-item [matMenuTriggerFor]="menu4">Menu 4</button>
+    </mat-menu>
 
-      <mat-menu #menu4>
-        <button mat-menu-item (click)="lastClickedLeaf = 3">Leaf Item 3</button>
-      </mat-menu>
+    <mat-menu #menu4>
+      <button mat-menu-item (click)="lastClickedLeaf = 3">Leaf Item 3</button>
+    </mat-menu>
   `,
   imports: [MatMenuModule],
 })

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

@@ -14,6 +14,7 @@ import {
   TestElement,
 } from '@angular/cdk/testing';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {MatIconHarness} from '@angular/material/icon/testing';
 import {MenuHarnessFilters, MenuItemHarnessFilters} from './menu-harness-filters';
 
 /** Harness for interacting with a mat-menu in tests. */
@@ -32,11 +33,16 @@ export class MatMenuHarness extends ContentContainerComponentHarness<string> {
     this: ComponentHarnessConstructor<T>,
     options: MenuHarnessFilters = {},
   ): HarnessPredicate<T> {
-    return new HarnessPredicate(this, options).addOption(
-      'triggerText',
-      options.triggerText,
-      (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text),
-    );
+    return new HarnessPredicate(this, options)
+      .addOption('triggerText', options.triggerText, (harness, text) =>
+        HarnessPredicate.stringMatches(harness.getTriggerText(), text),
+      )
+      .addOption('triggerIconName', options.triggerIconName, async (harness, triggerIconName) => {
+        const result = await harness.locatorForOptional(
+          MatIconHarness.with({name: triggerIconName}),
+        )();
+        return result !== null;
+      });
   }
 
   /** Whether the menu is disabled. */