feat(cdk/testing): make MatButtonHarness extend ContentContainerComponentHarness (#20653)

* Allows users to access mat-icons within mat-buttons

Author: wagnermaciel

src/material-experimental/mdc-button/testing/button-harness.ts

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ButtonHarnessFilters} from '@angular/material/button/testing';
 
 
 /** Harness for interacting with a MDC-based mat-button in tests. */
-export class MatButtonHarness extends ComponentHarness {
+export class MatButtonHarness extends ContentContainerComponentHarness {
   // TODO(jelbourn) use a single class, like `.mat-button-base`
   static hostSelector = [
     '[mat-button]',

src/material/button/testing/BUILD.bazel

@@ -30,6 +30,8 @@ ng_test_library(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
+        "//src/material/icon",
+        "//src/material/icon/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
     ],

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

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ButtonHarnessFilters} from './button-harness-filters';
 
 
 /** Harness for interacting with a standard mat-button in tests. */
-export class MatButtonHarness extends ComponentHarness {
+export class MatButtonHarness extends ContentContainerComponentHarness {
   // TODO(jelbourn) use a single class, like `.mat-button-base`
   /** The selector for the host element of a `MatButton` instance. */
   static hostSelector = [

src/material/button/testing/shared.spec.ts

@@ -5,6 +5,8 @@ import {Component} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {MatButtonModule} from '@angular/material/button';
 import {MatButtonHarness} from '@angular/material/button/testing/button-harness';
+import {MatIconModule} from '@angular/material/icon';
+import {MatIconHarness} from '@angular/material/icon/testing/icon-harness';
 
 /** Shared tests to run on both the original and MDC-based buttons. */
 export function runHarnessTests(
@@ -15,7 +17,7 @@ export function runHarnessTests(
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [buttonModule, PlatformModule],
+      imports: [buttonModule, MatIconModule, PlatformModule],
       declarations: [ButtonHarnessTest],
     }).compileComponents();
 
@@ -30,7 +32,7 @@ export function runHarnessTests(
 
   it('should load all button harnesses', async () => {
     const buttons = await loader.getAllHarnesses(buttonHarness);
-    expect(buttons.length).toBe(14);
+    expect(buttons.length).toBe(15);
   });
 
   it('should load button with exact text', async () => {
@@ -96,6 +98,17 @@ export function runHarnessTests(
 
     expect(fixture.componentInstance.clicked).toBe(false);
   });
+
+  it('should be able to handle nested harnesses', async () => {
+    const homeBtn = await loader.getHarness(buttonHarness.with({selector: '#home-icon'}));
+    const favBtn = await loader.getHarness(buttonHarness.with({selector: '#favorite-icon'}));
+
+    const homeIcon = await homeBtn.getHarness(MatIconHarness);
+    const favIcon = await favBtn.getHarness(MatIconHarness);
+
+    expect(await homeIcon.getName()).toBe('home');
+    expect(await favIcon.getName()).toBe('favorite');
+  });
 }
 
 @Component({
@@ -110,7 +123,12 @@ export function runHarnessTests(
     </button>
     <button id="raised" type="button" mat-raised-button>Raised button</button>
     <button id="stroked" type="button" mat-stroked-button>Stroked button</button>
-    <button id="icon" type="button" mat-icon-button>Icon button</button>
+    <button id="home-icon" type="button" mat-icon-button>
+      <mat-icon>home</mat-icon>
+    </button>
+    <button id="favorite-icon" type="button" mat-icon-button>
+      <mat-icon>favorite</mat-icon>
+    </button>
     <button id="fab" type="button" mat-fab>Fab button</button>
     <button id="mini-fab" type="button" mat-mini-fab>Mini Fab button</button>
 

tools/public_api_guard/material/button/testing.d.ts

@@ -2,7 +2,7 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {
     text?: string | RegExp;
 }
 
-export declare class MatButtonHarness extends ComponentHarness {
+export declare class MatButtonHarness extends ContentContainerComponentHarness {
     blur(): Promise<void>;
     click(relativeX: number, relativeY: number): Promise<void>;
     click(location: 'center'): Promise<void>;