Angular2 - Open and close mdDialog in Unit Test

Viewed 4385

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!

1 Answers
Related