I am currently trying to open and close an angular material 2 dialog in one of my unit tests. The opening seems fine, but I spy on a function which should be called after the closing, and it is never called, which I assume happens because the dialog does not close as I wanted it to.
My code which I want to test:
openDialog() {
this.dialogRef = this.dialog.open( ConfirmationDialogComponent, {
height: '210px',
width: '335px',
disableClose: true
});
this.dialogRef.componentInstance.title = 'Delete Selected Intents?';
this.dialogRef.componentInstance.content = 'All corresponding data will be deleted';
this.dialogRef.componentInstance.option1 = 'Cancel';
this.dialogRef.componentInstance.option2 = 'Delete';
this.dialogRef.afterClosed().subscribe( result => {
this.afterDialogClose(result);
});
}
My test so far (which is failing as afterDialogClose is not called as expected):
it('should call afterDialogClose when the dialog closing event triggered', fakeAsync(() => {
spyOn(component, 'afterDialogClose');
component.openDialog();
fixture.detectChanges();
tick();
component.dialog.closeAll();
fixture.detectChanges();
tick();
expect(component.afterDialogClose).toHaveBeenCalled();
}));
Can anyone tell me what I am doing wrong and how I can force my dialog to close and call the afterDialogClose() function? Thanks!