diff --git a/src/material-experimental/mdc-button/testing/button-harness.ts b/src/material-experimental/mdc-button/testing/button-harness.ts
index 603488b4877a..13e6c02740f7 100644
--- a/src/material-experimental/mdc-button/testing/button-harness.ts
+++ b/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]',
diff --git a/src/material/button/testing/BUILD.bazel b/src/material/button/testing/BUILD.bazel
index 9ad59514f19a..52f4d2fce95b 100644
--- a/src/material/button/testing/BUILD.bazel
+++ b/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",
],
diff --git a/src/material/button/testing/button-harness.ts b/src/material/button/testing/button-harness.ts
index 2653667e0010..8da0c2487547 100644
--- a/src/material/button/testing/button-harness.ts
+++ b/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 = [
diff --git a/src/material/button/testing/shared.spec.ts b/src/material/button/testing/shared.spec.ts
index 041d9a9e0f97..1f436ddcf9b2 100644
--- a/src/material/button/testing/shared.spec.ts
+++ b/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(
-
+
+
diff --git a/tools/public_api_guard/material/button/testing.d.ts b/tools/public_api_guard/material/button/testing.d.ts
index e6d2455c3337..a865a749e97d 100644
--- a/tools/public_api_guard/material/button/testing.d.ts
+++ b/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;
click(relativeX: number, relativeY: number): Promise;
click(location: 'center'): Promise;