test: provide a test component that opens components in a dialog (#24522)

* test: provide a test component that opens components in a dialog

* test: update goldens

* test: protected static, remove DI, noop animations

* test: add typing

* test: make generics optional

* test: update goldens

Author: andrewseguin

src/material-experimental/mdc-dialog/testing/BUILD.bazel

@@ -9,8 +9,12 @@ ts_library(
         exclude = ["**/*.spec.ts"],
     ),
     deps = [
+        "//src/cdk/overlay",
         "//src/cdk/testing",
+        "//src/material-experimental/mdc-dialog",
         "//src/material/dialog/testing",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
     ],
 )
 
@@ -29,6 +33,7 @@ ng_test_library(
         ":testing",
         "//src/material-experimental/mdc-dialog",
         "//src/material/dialog/testing:harness_tests_lib",
+        "@npm//@angular/platform-browser",
     ],
 )
 

src/material-experimental/mdc-dialog/testing/dialog-opener.spec.ts

@@ -0,0 +1,81 @@
+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,
+  MatDialogRef,
+  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');
+  }));
+
+  it('should get closed result data', fakeAsync(() => {
+    const config = {data: 'test'};
+    const fixture = TestBed.createComponent(
+      MatTestDialogOpener.withComponent<ExampleComponent, ExampleDialogResult>(
+        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}}
+    <button id="close-btn" (click)="close()">Close</button>
+  `,
+})
+class ExampleComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ExampleComponent, ExampleDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  close() {
+    this.dialogRef.close({reason: 'closed'});
+  }
+}

src/material-experimental/mdc-dialog/testing/dialog-opener.ts

@@ -0,0 +1,51 @@
+/**
+ * @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';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+/** 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<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<
+  MatDialogContainer,
+  T,
+  R
+> {
+  constructor(dialog: MatDialog) {
+    super(dialog);
+  }
+
+  /** Static method that prepares this class to open the provided component. */
+  static withComponent<T = unknown, R = unknown>(
+    component: ComponentType<T>,
+    config?: MatDialogConfig,
+  ) {
+    _MatTestDialogOpenerBase.component = component;
+    _MatTestDialogOpenerBase.config = config;
+    return MatTestDialogOpener as ComponentType<MatTestDialogOpener<T, R>>;
+  }
+}
+
+@NgModule({
+  declarations: [MatTestDialogOpener],
+  imports: [MatDialogModule, NoopAnimationsModule],
+})
+export class MatTestDialogOpenerModule {}

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';

src/material/dialog/testing/BUILD.bazel

@@ -10,8 +10,12 @@ ts_library(
     ),
     deps = [
         "//src/cdk/coercion",
+        "//src/cdk/overlay",
         "//src/cdk/testing",
         "//src/material/dialog",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "@npm//rxjs",
     ],
 )
 
@@ -43,6 +47,7 @@ ng_test_library(
         ":harness_tests_lib",
         ":testing",
         "//src/material/dialog",
+        "@npm//@angular/platform-browser",
     ],
 )
 

src/material/dialog/testing/dialog-opener.spec.ts

@@ -0,0 +1,74 @@
+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, MatDialogRef, 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');
+  }));
+
+  it('should get closed result data', fakeAsync(() => {
+    const config = {data: 'test'};
+    const fixture = TestBed.createComponent(
+      MatTestDialogOpener.withComponent<ExampleComponent, ExampleDialogResult>(
+        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}}
+    <button id="close-btn" (click)="close()">Close</button>
+  `,
+})
+class ExampleComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ExampleComponent, ExampleDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  close() {
+    this.dialogRef.close({reason: 'closed'});
+  }
+}

src/material/dialog/testing/dialog-opener.ts

@@ -0,0 +1,101 @@
+/**
+ * @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';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+/** Base class for a component that immediately opens a dialog when created. */
+@Directive()
+export class _MatTestDialogOpenerBase<C extends _MatDialogContainerBase, T, R>
+  implements OnDestroy
+{
+  /** Component that should be opened with the MatDialog `open` method. */
+  protected static component: ComponentType<unknown> | undefined;
+
+  /** Config that should be provided to the MatDialog `open` method. */
+  protected static config: MatDialogConfig | undefined;
+
+  /** MatDialogRef returned from the MatDialog `open` method. */
+  dialogRef: MatDialogRef<T, R>;
+
+  /** Data passed to the `MatDialog` close method. */
+  closedResult: R | undefined;
+
+  private readonly _afterClosedSubscription: Subscription;
+
+  constructor(public dialog: _MatDialogBase<C>) {
+    if (!_MatTestDialogOpenerBase.component) {
+      throw new Error(`MatTestDialogOpener does not have a component provided.`);
+    }
+
+    this.dialogRef = this.dialog.open<T, R>(
+      _MatTestDialogOpenerBase.component as ComponentType<T>,
+      _MatTestDialogOpenerBase.config || {},
+    );
+    this._afterClosedSubscription = this.dialogRef.afterClosed().subscribe(result => {
+      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<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<
+  MatDialogContainer,
+  T,
+  R
+> {
+  constructor(dialog: MatDialog) {
+    super(dialog);
+  }
+
+  /** Static method that prepares this class to open the provided component. */
+  static withComponent<T = unknown, R = unknown>(
+    component: ComponentType<T>,
+    config?: MatDialogConfig,
+  ) {
+    _MatTestDialogOpenerBase.component = component;
+    _MatTestDialogOpenerBase.config = config;
+    return MatTestDialogOpener as ComponentType<MatTestDialogOpener<T, R>>;
+  }
+}
+
+@NgModule({
+  declarations: [MatTestDialogOpener],
+  imports: [MatDialogModule, NoopAnimationsModule],
+})
+export class MatTestDialogOpenerModule {}

src/material/dialog/testing/public-api.ts

@@ -8,3 +8,4 @@
 
 export * from './dialog-harness';
 export * from './dialog-harness-filters';
+export * from './dialog-opener';