From 4f3886867a66ff53209036cc3159d521c852d837 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 24 Sep 2020 10:51:04 -0700 Subject: [PATCH] feat(cdk/testing): make MatButtonHarness extend ContentContainerComponentHarness * Allows users to access mat-icons within mat-buttons --- .../mdc-button/testing/button-harness.ts | 4 ++-- src/material/button/testing/BUILD.bazel | 2 ++ src/material/button/testing/button-harness.ts | 4 ++-- src/material/button/testing/shared.spec.ts | 24 ++++++++++++++++--- .../material/button/testing.d.ts | 2 +- 5 files changed, 28 insertions(+), 8 deletions(-) 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;