From 63a0047fa69df28bdea98a2f023291eefdf0c286 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 4 Mar 2022 13:21:58 -0700 Subject: [PATCH 1/6] test: provide a test component that opens components in a dialog --- .../mdc-dialog/testing/BUILD.bazel | 4 + .../mdc-dialog/testing/dialog-opener.spec.ts | 46 ++++++++++ .../mdc-dialog/testing/dialog-opener.ts | 43 +++++++++ .../mdc-dialog/testing/public-api.ts | 1 + src/material/dialog/testing/BUILD.bazel | 4 + .../dialog/testing/dialog-opener.spec.ts | 43 +++++++++ src/material/dialog/testing/dialog-opener.ts | 92 +++++++++++++++++++ src/material/dialog/testing/public-api.ts | 1 + 8 files changed, 234 insertions(+) create mode 100644 src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts create mode 100644 src/material-experimental/mdc-dialog/testing/dialog-opener.ts create mode 100644 src/material/dialog/testing/dialog-opener.spec.ts create mode 100644 src/material/dialog/testing/dialog-opener.ts diff --git a/src/material-experimental/mdc-dialog/testing/BUILD.bazel b/src/material-experimental/mdc-dialog/testing/BUILD.bazel index 6be141b1a989..98376b4a6ffb 100644 --- a/src/material-experimental/mdc-dialog/testing/BUILD.bazel +++ b/src/material-experimental/mdc-dialog/testing/BUILD.bazel @@ -9,8 +9,11 @@ ts_library( exclude = ["**/*.spec.ts"], ), deps = [ + "//src/cdk/overlay", "//src/cdk/testing", + "//src/material-experimental/mdc-dialog", "//src/material/dialog/testing", + "@npm//@angular/core", ], ) @@ -29,6 +32,7 @@ ng_test_library( ":testing", "//src/material-experimental/mdc-dialog", "//src/material/dialog/testing:harness_tests_lib", + "@npm//@angular/platform-browser", ], ) diff --git a/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts b/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts new file mode 100644 index 000000000000..77160d15e8a0 --- /dev/null +++ b/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts @@ -0,0 +1,46 @@ +import {Component, Inject} from '@angular/core'; +import {fakeAsync, TestBed, flush} from '@angular/core/testing'; +import { + MatTestDialogOpenerModule, + MatTestDialogOpener, +} from '@angular/material-experimental/mdc-dialog/testing'; +import {MAT_DIALOG_DATA, MatDialogState} from '@angular/material-experimental/mdc-dialog'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; + +describe('MDC-based MatTestDialogOpener', () => { + beforeEach(fakeAsync(() => { + TestBed.configureTestingModule({ + imports: [MatTestDialogOpenerModule, NoopAnimationsModule], + declarations: [ExampleComponent], + }); + + TestBed.compileComponents(); + })); + + it('should open a dialog when created', fakeAsync(() => { + const fixture = TestBed.createComponent(MatTestDialogOpener.withComponent(ExampleComponent)); + flush(); + expect(fixture.componentInstance.dialogRef.getState()).toBe(MatDialogState.OPEN); + expect(document.querySelector('mat-dialog-container')).toBeTruthy(); + })); + + it('should throw an error if no dialog component is provided', () => { + expect(() => TestBed.createComponent(MatTestDialogOpener)).toThrow( + Error('MatTestDialogOpener does not have a component provided.'), + ); + }); + + it('should pass data to the component', fakeAsync(() => { + const config = {data: 'test'}; + TestBed.createComponent(MatTestDialogOpener.withComponent(ExampleComponent, config)); + flush(); + const dialogContainer = document.querySelector('mat-dialog-container'); + expect(dialogContainer!.innerHTML).toContain('Data: test'); + })); +}); + +/** Simple component for testing MatTestDialogOpener. */ +@Component({template: 'Data: {{data}}'}) +class ExampleComponent { + constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} +} diff --git a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts new file mode 100644 index 000000000000..150d40649241 --- /dev/null +++ b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts @@ -0,0 +1,43 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ComponentType} from '@angular/cdk/overlay'; +import {ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation} from '@angular/core'; +import {_MatTestDialogOpenerBase} from '@angular/material/dialog/testing'; +import { + MatDialog, + MatDialogContainer, + MatDialogModule, + MatDialogConfig, +} from '@angular/material-experimental/mdc-dialog'; + +/** Test component that immediately opens a dialog when bootstrapped. */ +@Component({ + selector: 'mat-test-dialog-opener', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, +}) +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { + constructor(dialog: MatDialog) { + super(dialog); + } + + /** Static method that prepares this class to open the provided component. */ + static withComponent(component: ComponentType, config?: MatDialogConfig) { + _MatTestDialogOpenerBase.component = component; + _MatTestDialogOpenerBase.config = config; + return MatTestDialogOpener; + } +} + +@NgModule({ + declarations: [MatTestDialogOpener], + imports: [MatDialogModule], +}) +export class MatTestDialogOpenerModule {} diff --git a/src/material-experimental/mdc-dialog/testing/public-api.ts b/src/material-experimental/mdc-dialog/testing/public-api.ts index 5472f966e2ba..6e56fd740d06 100644 --- a/src/material-experimental/mdc-dialog/testing/public-api.ts +++ b/src/material-experimental/mdc-dialog/testing/public-api.ts @@ -8,3 +8,4 @@ export {DialogHarnessFilters} from '@angular/material/dialog/testing'; export {MatDialogHarness, MatDialogSection} from './dialog-harness'; +export * from './dialog-opener'; diff --git a/src/material/dialog/testing/BUILD.bazel b/src/material/dialog/testing/BUILD.bazel index 9919caa8b02a..63ab3b14a5e2 100644 --- a/src/material/dialog/testing/BUILD.bazel +++ b/src/material/dialog/testing/BUILD.bazel @@ -10,8 +10,11 @@ ts_library( ), deps = [ "//src/cdk/coercion", + "//src/cdk/overlay", "//src/cdk/testing", "//src/material/dialog", + "@npm//@angular/core", + "@npm//rxjs", ], ) @@ -43,6 +46,7 @@ ng_test_library( ":harness_tests_lib", ":testing", "//src/material/dialog", + "@npm//@angular/platform-browser", ], ) diff --git a/src/material/dialog/testing/dialog-opener.spec.ts b/src/material/dialog/testing/dialog-opener.spec.ts new file mode 100644 index 000000000000..4badb8eac634 --- /dev/null +++ b/src/material/dialog/testing/dialog-opener.spec.ts @@ -0,0 +1,43 @@ +import {Component, Inject} from '@angular/core'; +import {fakeAsync, flush, TestBed} from '@angular/core/testing'; +import {MatTestDialogOpenerModule, MatTestDialogOpener} from '@angular/material/dialog/testing'; +import {MAT_DIALOG_DATA, MatDialogState} from '@angular/material/dialog'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; + +describe('MDC-based MatTestDialogOpener', () => { + beforeEach(fakeAsync(() => { + TestBed.configureTestingModule({ + imports: [MatTestDialogOpenerModule, NoopAnimationsModule], + declarations: [ExampleComponent], + }); + + TestBed.compileComponents(); + })); + + it('should open a dialog when created', fakeAsync(() => { + const fixture = TestBed.createComponent(MatTestDialogOpener.withComponent(ExampleComponent)); + flush(); + expect(fixture.componentInstance.dialogRef.getState()).toBe(MatDialogState.OPEN); + expect(document.querySelector('mat-dialog-container')).toBeTruthy(); + })); + + it('should throw an error if no dialog component is provided', () => { + expect(() => TestBed.createComponent(MatTestDialogOpener)).toThrow( + Error('MatTestDialogOpener does not have a component provided.'), + ); + }); + + it('should pass data to the component', fakeAsync(() => { + const config = {data: 'test'}; + TestBed.createComponent(MatTestDialogOpener.withComponent(ExampleComponent, config)); + flush(); + const dialogContainer = document.querySelector('mat-dialog-container'); + expect(dialogContainer!.innerHTML).toContain('Data: test'); + })); +}); + +/** Simple component for testing MatTestDialogOpener. */ +@Component({template: 'Data: {{data}}'}) +class ExampleComponent { + constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} +} diff --git a/src/material/dialog/testing/dialog-opener.ts b/src/material/dialog/testing/dialog-opener.ts new file mode 100644 index 000000000000..9be654cfba35 --- /dev/null +++ b/src/material/dialog/testing/dialog-opener.ts @@ -0,0 +1,92 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ComponentType} from '@angular/cdk/overlay'; +import { + ChangeDetectionStrategy, + Directive, + Component, + NgModule, + OnDestroy, + ViewEncapsulation, +} from '@angular/core'; +import { + _MatDialogBase, + _MatDialogContainerBase, + MatDialog, + MatDialogConfig, + MatDialogContainer, + MatDialogModule, + MatDialogRef, +} from '@angular/material/dialog'; +import {Subscription} from 'rxjs'; + +/** Base class for a component that immediately opens a dialog when created. */ +@Directive() +export class _MatTestDialogOpenerBase implements OnDestroy { + /** Component that should be opened with the MatDialog `open` method. */ + static component: ComponentType | undefined; + + /** Config that should be provided to the MatDialog `open` method. */ + static config: MatDialogConfig | undefined; + + /** MatDialogRef returned from the MatDialog `open` method. */ + dialogRef: MatDialogRef; + + /** Data passed to the `MatDialog` close method. */ + closedResult: unknown; + + private readonly _afterClosedSubscription: Subscription; + + constructor(public dialog: _MatDialogBase) { + if (!_MatTestDialogOpenerBase.component) { + throw new Error(`MatTestDialogOpener does not have a component provided.`); + } + + this.dialogRef = this.dialog.open( + _MatTestDialogOpenerBase.component, + _MatTestDialogOpenerBase.config || {}, + ); + this._afterClosedSubscription = this.dialogRef.afterClosed().subscribe((result: unknown) => { + this.closedResult = result; + }); + } + + ngOnDestroy() { + this._afterClosedSubscription.unsubscribe(); + _MatTestDialogOpenerBase.component = undefined; + _MatTestDialogOpenerBase.config = undefined; + } +} + +/** Test component that immediately opens a dialog when created. */ +@Component({ + selector: 'mat-test-dialog-opener', + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, +}) +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { + constructor(dialog: MatDialog) { + super(dialog); + } + + /** Static method that prepares this class to open the provided component. */ + static withComponent(component: ComponentType, config?: MatDialogConfig) { + _MatTestDialogOpenerBase.component = component; + _MatTestDialogOpenerBase.config = config; + return MatTestDialogOpener; + } +} + +@NgModule({ + declarations: [MatTestDialogOpener], + imports: [MatDialogModule], + providers: [{provide: _MatDialogBase, useExisting: MatDialog}], +}) +export class MatTestDialogOpenerModule {} diff --git a/src/material/dialog/testing/public-api.ts b/src/material/dialog/testing/public-api.ts index 6426f0d76819..cdda39f93035 100644 --- a/src/material/dialog/testing/public-api.ts +++ b/src/material/dialog/testing/public-api.ts @@ -8,3 +8,4 @@ export * from './dialog-harness'; export * from './dialog-harness-filters'; +export * from './dialog-opener'; From a4a78e9318b7cf2f9dc18860549eb3d8e0e365d4 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 4 Mar 2022 15:28:22 -0700 Subject: [PATCH 2/6] test: update goldens --- .../material/dialog-testing.md | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/tools/public_api_guard/material/dialog-testing.md b/tools/public_api_guard/material/dialog-testing.md index f89983e0dc28..f0615bbd1d4f 100644 --- a/tools/public_api_guard/material/dialog-testing.md +++ b/tools/public_api_guard/material/dialog-testing.md @@ -6,9 +6,17 @@ import { AsyncFactoryFn } from '@angular/cdk/testing'; import { BaseHarnessFilters } from '@angular/cdk/testing'; +import { ComponentType } from '@angular/cdk/overlay'; import { ContentContainerComponentHarness } from '@angular/cdk/testing'; import { DialogRole } from '@angular/material/dialog'; import { HarnessPredicate } from '@angular/cdk/testing'; +import { MatDialog } from '@angular/material/dialog'; +import { _MatDialogBase } from '@angular/material/dialog'; +import { MatDialogConfig } from '@angular/material/dialog'; +import { MatDialogContainer } from '@angular/material/dialog'; +import { _MatDialogContainerBase } from '@angular/material/dialog'; +import { MatDialogRef } from '@angular/material/dialog'; +import { OnDestroy } from '@angular/core'; import { TestElement } from '@angular/cdk/testing'; // @public @@ -51,6 +59,29 @@ export const enum MatDialogSection { TITLE = ".mat-dialog-title" } +// @public +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { + constructor(dialog: MatDialog); + static withComponent(component: ComponentType, config?: MatDialogConfig): typeof MatTestDialogOpener; +} + +// @public +export class _MatTestDialogOpenerBase implements OnDestroy { + constructor(dialog: _MatDialogBase); + closedResult: unknown; + static component: ComponentType | undefined; + static config: MatDialogConfig | undefined; + // (undocumented) + dialog: _MatDialogBase; + dialogRef: MatDialogRef; + // (undocumented) + ngOnDestroy(): void; +} + +// @public (undocumented) +export class MatTestDialogOpenerModule { +} + // (No @packageDocumentation comment for this package) ``` From 1b1e9b69f35c39884fb04fa121600a050da8f726 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 5 Mar 2022 09:45:26 -0700 Subject: [PATCH 3/6] test: protected static, remove DI, noop animations --- src/material-experimental/mdc-dialog/testing/BUILD.bazel | 1 + .../mdc-dialog/testing/dialog-opener.ts | 3 ++- src/material/dialog/testing/BUILD.bazel | 1 + src/material/dialog/testing/dialog-opener.ts | 8 ++++---- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/material-experimental/mdc-dialog/testing/BUILD.bazel b/src/material-experimental/mdc-dialog/testing/BUILD.bazel index 98376b4a6ffb..2771aee7c62a 100644 --- a/src/material-experimental/mdc-dialog/testing/BUILD.bazel +++ b/src/material-experimental/mdc-dialog/testing/BUILD.bazel @@ -14,6 +14,7 @@ ts_library( "//src/material-experimental/mdc-dialog", "//src/material/dialog/testing", "@npm//@angular/core", + "@npm//@angular/platform-browser", ], ) diff --git a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts index 150d40649241..7ed53a9840df 100644 --- a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts +++ b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts @@ -15,6 +15,7 @@ import { MatDialogModule, MatDialogConfig, } from '@angular/material-experimental/mdc-dialog'; +import {NoopAnimationsModule} from "@angular/platform-browser/animations"; /** Test component that immediately opens a dialog when bootstrapped. */ @Component({ @@ -38,6 +39,6 @@ export class MatTestDialogOpener extends _MatTestDialogOpenerBase implements OnDestroy { /** Component that should be opened with the MatDialog `open` method. */ - static component: ComponentType | undefined; + protected static component: ComponentType | undefined; /** Config that should be provided to the MatDialog `open` method. */ - static config: MatDialogConfig | undefined; + protected static config: MatDialogConfig | undefined; /** MatDialogRef returned from the MatDialog `open` method. */ dialogRef: MatDialogRef; @@ -86,7 +87,6 @@ export class MatTestDialogOpener extends _MatTestDialogOpenerBase Date: Sat, 5 Mar 2022 10:08:43 -0700 Subject: [PATCH 4/6] test: add typing --- .../mdc-dialog/testing/dialog-opener.spec.ts | 41 +++++++++++++++++-- .../mdc-dialog/testing/dialog-opener.ts | 8 ++-- .../dialog/testing/dialog-opener.spec.ts | 37 +++++++++++++++-- src/material/dialog/testing/dialog-opener.ts | 22 +++++----- .../material/dialog-testing.md | 14 +++---- 5 files changed, 95 insertions(+), 27 deletions(-) diff --git a/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts b/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts index 77160d15e8a0..8cf84200b022 100644 --- a/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts +++ b/src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts @@ -4,7 +4,11 @@ import { MatTestDialogOpenerModule, MatTestDialogOpener, } from '@angular/material-experimental/mdc-dialog/testing'; -import {MAT_DIALOG_DATA, MatDialogState} from '@angular/material-experimental/mdc-dialog'; +import { + MAT_DIALOG_DATA, + MatDialogRef, + MatDialogState, +} from '@angular/material-experimental/mdc-dialog'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('MDC-based MatTestDialogOpener', () => { @@ -37,10 +41,41 @@ describe('MDC-based MatTestDialogOpener', () => { const dialogContainer = document.querySelector('mat-dialog-container'); expect(dialogContainer!.innerHTML).toContain('Data: test'); })); + + it('should get closed result data', fakeAsync(() => { + const config = {data: 'test'}; + const fixture = TestBed.createComponent( + MatTestDialogOpener.withComponent( + ExampleComponent, + config, + ), + ); + flush(); + const closeButton = document.querySelector('#close-btn') as HTMLElement; + closeButton.click(); + flush(); + expect(fixture.componentInstance.closedResult).toEqual({reason: 'closed'}); + })); }); +interface ExampleDialogResult { + reason: string; +} + /** Simple component for testing MatTestDialogOpener. */ -@Component({template: 'Data: {{data}}'}) +@Component({ + template: ` + Data: {{data}} + + `, +}) class ExampleComponent { - constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any, + ) {} + + close() { + this.dialogRef.close({reason: 'closed'}); + } } diff --git a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts index 7ed53a9840df..f97d29c827b4 100644 --- a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts +++ b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts @@ -15,7 +15,7 @@ import { MatDialogModule, MatDialogConfig, } from '@angular/material-experimental/mdc-dialog'; -import {NoopAnimationsModule} from "@angular/platform-browser/animations"; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; /** Test component that immediately opens a dialog when bootstrapped. */ @Component({ @@ -24,16 +24,16 @@ import {NoopAnimationsModule} from "@angular/platform-browser/animations"; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class MatTestDialogOpener extends _MatTestDialogOpenerBase { +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { constructor(dialog: MatDialog) { super(dialog); } /** Static method that prepares this class to open the provided component. */ - static withComponent(component: ComponentType, config?: MatDialogConfig) { + static withComponent(component: ComponentType, config?: MatDialogConfig) { _MatTestDialogOpenerBase.component = component; _MatTestDialogOpenerBase.config = config; - return MatTestDialogOpener; + return MatTestDialogOpener as ComponentType>; } } diff --git a/src/material/dialog/testing/dialog-opener.spec.ts b/src/material/dialog/testing/dialog-opener.spec.ts index 4badb8eac634..5040f949149e 100644 --- a/src/material/dialog/testing/dialog-opener.spec.ts +++ b/src/material/dialog/testing/dialog-opener.spec.ts @@ -1,7 +1,7 @@ import {Component, Inject} from '@angular/core'; import {fakeAsync, flush, TestBed} from '@angular/core/testing'; import {MatTestDialogOpenerModule, MatTestDialogOpener} from '@angular/material/dialog/testing'; -import {MAT_DIALOG_DATA, MatDialogState} from '@angular/material/dialog'; +import {MAT_DIALOG_DATA, MatDialogRef, MatDialogState} from '@angular/material/dialog'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('MDC-based MatTestDialogOpener', () => { @@ -34,10 +34,41 @@ describe('MDC-based MatTestDialogOpener', () => { const dialogContainer = document.querySelector('mat-dialog-container'); expect(dialogContainer!.innerHTML).toContain('Data: test'); })); + + it('should get closed result data', fakeAsync(() => { + const config = {data: 'test'}; + const fixture = TestBed.createComponent( + MatTestDialogOpener.withComponent( + ExampleComponent, + config, + ), + ); + flush(); + const closeButton = document.querySelector('#close-btn') as HTMLElement; + closeButton.click(); + flush(); + expect(fixture.componentInstance.closedResult).toEqual({reason: 'closed'}); + })); }); +interface ExampleDialogResult { + reason: string; +} + /** Simple component for testing MatTestDialogOpener. */ -@Component({template: 'Data: {{data}}'}) +@Component({ + template: ` + Data: {{data}} + + `, +}) class ExampleComponent { - constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any, + ) {} + + close() { + this.dialogRef.close({reason: 'closed'}); + } } diff --git a/src/material/dialog/testing/dialog-opener.ts b/src/material/dialog/testing/dialog-opener.ts index ef38f31b35e5..d0ecd40c27ac 100644 --- a/src/material/dialog/testing/dialog-opener.ts +++ b/src/material/dialog/testing/dialog-opener.ts @@ -25,11 +25,13 @@ import { MatDialogRef, } from '@angular/material/dialog'; import {Subscription} from 'rxjs'; -import {NoopAnimationsModule} from "@angular/platform-browser/animations"; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; /** Base class for a component that immediately opens a dialog when created. */ @Directive() -export class _MatTestDialogOpenerBase implements OnDestroy { +export class _MatTestDialogOpenerBase + implements OnDestroy +{ /** Component that should be opened with the MatDialog `open` method. */ protected static component: ComponentType | undefined; @@ -37,10 +39,10 @@ export class _MatTestDialogOpenerBase impleme protected static config: MatDialogConfig | undefined; /** MatDialogRef returned from the MatDialog `open` method. */ - dialogRef: MatDialogRef; + dialogRef: MatDialogRef; /** Data passed to the `MatDialog` close method. */ - closedResult: unknown; + closedResult: R | undefined; private readonly _afterClosedSubscription: Subscription; @@ -49,11 +51,11 @@ export class _MatTestDialogOpenerBase impleme throw new Error(`MatTestDialogOpener does not have a component provided.`); } - this.dialogRef = this.dialog.open( - _MatTestDialogOpenerBase.component, + this.dialogRef = this.dialog.open( + _MatTestDialogOpenerBase.component as ComponentType, _MatTestDialogOpenerBase.config || {}, ); - this._afterClosedSubscription = this.dialogRef.afterClosed().subscribe((result: unknown) => { + this._afterClosedSubscription = this.dialogRef.afterClosed().subscribe(result => { this.closedResult = result; }); } @@ -72,16 +74,16 @@ export class _MatTestDialogOpenerBase impleme changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class MatTestDialogOpener extends _MatTestDialogOpenerBase { +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { constructor(dialog: MatDialog) { super(dialog); } /** Static method that prepares this class to open the provided component. */ - static withComponent(component: ComponentType, config?: MatDialogConfig) { + static withComponent(component: ComponentType, config?: MatDialogConfig) { _MatTestDialogOpenerBase.component = component; _MatTestDialogOpenerBase.config = config; - return MatTestDialogOpener; + return MatTestDialogOpener as ComponentType>; } } diff --git a/tools/public_api_guard/material/dialog-testing.md b/tools/public_api_guard/material/dialog-testing.md index f0615bbd1d4f..7a4ab55f8a04 100644 --- a/tools/public_api_guard/material/dialog-testing.md +++ b/tools/public_api_guard/material/dialog-testing.md @@ -60,20 +60,20 @@ export const enum MatDialogSection { } // @public -export class MatTestDialogOpener extends _MatTestDialogOpenerBase { +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { constructor(dialog: MatDialog); - static withComponent(component: ComponentType, config?: MatDialogConfig): typeof MatTestDialogOpener; + static withComponent(component: ComponentType, config?: MatDialogConfig): ComponentType>; } // @public -export class _MatTestDialogOpenerBase implements OnDestroy { +export class _MatTestDialogOpenerBase implements OnDestroy { constructor(dialog: _MatDialogBase); - closedResult: unknown; - static component: ComponentType | undefined; - static config: MatDialogConfig | undefined; + closedResult: R | undefined; + protected static component: ComponentType | undefined; + protected static config: MatDialogConfig | undefined; // (undocumented) dialog: _MatDialogBase; - dialogRef: MatDialogRef; + dialogRef: MatDialogRef; // (undocumented) ngOnDestroy(): void; } From 9155acf9af7f8f01b288a286f64028c4ad617136 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 5 Mar 2022 14:47:13 -0700 Subject: [PATCH 5/6] test: make generics optional --- .../mdc-dialog/testing/dialog-opener.ts | 11 +++++++++-- src/material/dialog/testing/dialog-opener.ts | 11 +++++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts index f97d29c827b4..6d21b1d1e3a8 100644 --- a/src/material-experimental/mdc-dialog/testing/dialog-opener.ts +++ b/src/material-experimental/mdc-dialog/testing/dialog-opener.ts @@ -24,13 +24,20 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class MatTestDialogOpener extends _MatTestDialogOpenerBase { +export class MatTestDialogOpener extends _MatTestDialogOpenerBase< + MatDialogContainer, + T, + R +> { constructor(dialog: MatDialog) { super(dialog); } /** Static method that prepares this class to open the provided component. */ - static withComponent(component: ComponentType, config?: MatDialogConfig) { + static withComponent( + component: ComponentType, + config?: MatDialogConfig, + ) { _MatTestDialogOpenerBase.component = component; _MatTestDialogOpenerBase.config = config; return MatTestDialogOpener as ComponentType>; diff --git a/src/material/dialog/testing/dialog-opener.ts b/src/material/dialog/testing/dialog-opener.ts index d0ecd40c27ac..3c1c03a22a7a 100644 --- a/src/material/dialog/testing/dialog-opener.ts +++ b/src/material/dialog/testing/dialog-opener.ts @@ -74,13 +74,20 @@ export class _MatTestDialogOpenerBase changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class MatTestDialogOpener extends _MatTestDialogOpenerBase { +export class MatTestDialogOpener extends _MatTestDialogOpenerBase< + MatDialogContainer, + T, + R +> { constructor(dialog: MatDialog) { super(dialog); } /** Static method that prepares this class to open the provided component. */ - static withComponent(component: ComponentType, config?: MatDialogConfig) { + static withComponent( + component: ComponentType, + config?: MatDialogConfig, + ) { _MatTestDialogOpenerBase.component = component; _MatTestDialogOpenerBase.config = config; return MatTestDialogOpener as ComponentType>; From d15fe7a7bcf69c9cfac4253cd865fd168cd78c34 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 5 Mar 2022 14:51:24 -0700 Subject: [PATCH 6/6] test: update goldens --- tools/public_api_guard/material/dialog-testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/public_api_guard/material/dialog-testing.md b/tools/public_api_guard/material/dialog-testing.md index 7a4ab55f8a04..e710b8cba903 100644 --- a/tools/public_api_guard/material/dialog-testing.md +++ b/tools/public_api_guard/material/dialog-testing.md @@ -60,9 +60,9 @@ export const enum MatDialogSection { } // @public -export class MatTestDialogOpener extends _MatTestDialogOpenerBase { +export class MatTestDialogOpener extends _MatTestDialogOpenerBase { constructor(dialog: MatDialog); - static withComponent(component: ComponentType, config?: MatDialogConfig): ComponentType>; + static withComponent(component: ComponentType, config?: MatDialogConfig): ComponentType>; } // @public