Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to test angular material dialog?

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.

like image 562
Fernando Avatar asked Jan 08 '18 18:01

Fernando


People also ask

What is angular material dialog?

MatDialog creates modal dialogs that implements the ARIA role="dialog" pattern by default. You can change the dialog's role to alertdialog via MatDialogConfig . You should provide an accessible label to this root dialog element by setting the ariaLabel or ariaLabelledBy properties of MatDialogConfig .

What is TestBed inject?

TestBed. configureTestingModule() helps you configure the providers. Configuring the providers means you are letting the Angular dependency injection system know about this dependency which later it can inject in to components when requested through a dependency injection token.


1 Answers

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

like image 193
Alex Beugnet Avatar answered Sep 30 '22 13:09

Alex Beugnet