fix(material/icon): harness returning wrong name if icon has other content (#27132)

crisbeto · crisbeto · commit 5c3107ccc66a · 2023-05-22T14:17:53.000+02:00
Fixes that the badge was returning all of its `textContent` for the name which may include other elements (e.g. badges). Only the text directly inside of the icon determines its name. Fixes #27015. (cherry picked from commit fd481b9)
diff --git a/src/material/icon/testing/icon-harness.ts b/src/material/icon/testing/icon-harness.ts
@@ -50,7 +50,13 @@ export class MatIconHarness extends ComponentHarness {
     // Some icons support defining the icon as a ligature.
     // As a fallback, try to extract it from the DOM text.
     if ((await this.getType()) === IconType.FONT) {
-      return host.text();
+      // Other directives may add content to the icon (e.g. `MatBadge`), however only the direct
+      // text nodes affect the name of the icon. Exclude all element descendants from the result.
+      const text = await host.text({exclude: '*'});
+
+      // There are some internal cases where the icon name is wrapped in another node.
+      // Fall back to extracting the entire text if we ended up excluding everything above.
+      return text.length > 0 ? text : host.text();
     }
 
     return null;
diff --git a/src/material/icon/testing/shared.spec.ts b/src/material/icon/testing/shared.spec.ts
@@ -37,7 +37,7 @@ export function runHarnessTests(
 
   it('should load all icon harnesses', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
-    expect(icons.length).toBe(4);
+    expect(icons.length).toBe(6);
   });
 
   it('should filter icon harnesses based on their type', async () => {
@@ -47,7 +47,7 @@ export function runHarnessTests(
     ]);
 
     expect(svgIcons.length).toBe(1);
-    expect(fontIcons.length).toBe(3);
+    expect(fontIcons.length).toBe(5);
   });
 
   it('should filter icon harnesses based on their name', async () => {
@@ -69,31 +69,45 @@ export function runHarnessTests(
 
     expect(regexFilterResults.length).toBe(1);
     expect(stringFilterResults.length).toBe(1);
-    expect(nullFilterResults.length).toBe(2);
+    expect(nullFilterResults.length).toBe(4);
   });
 
   it('should get the type of each icon', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const types = await parallel(() => icons.map(icon => icon.getType()));
-    expect(types).toEqual([IconType.FONT, IconType.SVG, IconType.FONT, IconType.FONT]);
+    expect(types).toEqual([
+      IconType.FONT,
+      IconType.SVG,
+      IconType.FONT,
+      IconType.FONT,
+      IconType.FONT,
+      IconType.FONT,
+    ]);
   });
 
   it('should get the name of an icon', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const names = await parallel(() => icons.map(icon => icon.getName()));
-    expect(names).toEqual(['fontIcon', 'svgIcon', 'ligature_icon', 'ligature_icon_by_attribute']);
+    expect(names).toEqual([
+      'fontIcon',
+      'svgIcon',
+      'ligature_icon',
+      'ligature_icon_by_attribute',
+      'ligature_icon_with_additional_content',
+      'ligature_icon_with_indirect_name',
+    ]);
   });
 
   it('should get the namespace of an icon', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const namespaces = await parallel(() => icons.map(icon => icon.getNamespace()));
-    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null, null]);
+    expect(namespaces).toEqual(['fontIcons', 'svgIcons', null, null, null, null]);
   });
 
   it('should get whether an icon is inline', async () => {
     const icons = await loader.getAllHarnesses(iconHarness);
     const inlineStates = await parallel(() => icons.map(icon => icon.isInline()));
-    expect(inlineStates).toEqual([false, false, true, false]);
+    expect(inlineStates).toEqual([false, false, true, false, false, false]);
   });
 }
 
@@ -103,6 +117,8 @@ export function runHarnessTests(
     <mat-icon svgIcon="svgIcons:svgIcon"></mat-icon>
     <mat-icon inline>ligature_icon</mat-icon>
     <mat-icon fontIcon="ligature_icon_by_attribute"></mat-icon>
+    <mat-icon>ligature_icon_with_additional_content <span class="fake-badge">Hello</span></mat-icon>
+    <mat-icon><span>ligature_icon_with_indirect_name</span></mat-icon>
   `,
 })
 class IconHarnessTest {}
