I have a custom dialog component class which I am trying to test. Specifically my close function which is this

  close(): void {
    this.dialogRef.close();
  }

dialogRef is injected in that classes constructor as shown below

 constructor(public dialogRef: MatDialogRef<CustomDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) {
  }

So my question would be, how could I mock dialogRef in my spec test file and test its close function?

My project is using angular 5, and angular material 5.

I have a custom dialog component class which I am trying to test. Specifically my close function which is this

  close(): void {
    this.dialogRef.close();
  }

dialogRef is injected in that classes constructor as shown below

 constructor(public dialogRef: MatDialogRef<CustomDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) {
  }

So my question would be, how could I mock dialogRef in my spec test file and test its close function?

My project is using angular 5, and angular material 5.

• javascript
• angular
• typescript
• angular-material

2 Answers 2

Assuming that you are asking about testing components that use dialog and not dialog itself, In your test case, add

providers: [
     { provide: MAT_DIALOG_DATA, useValue: {} },
     { provide: MatDialogRef, useValue: {} }
 ]

That should provide neccessary dependencies.

You shouldn't need to test this because the library you are using should already test its own component (which is not always the case).

But if you need a specific test which uses the close dialog reference, have a look at their test on this component which should help you write yours :

https://github.com/angular/components/blob/master/src/material/dialog/dialog.spec.ts#L186