this.dialogRef.close is not a function error

Question

I'm trying to unit test my dialogues. I'm expecting the dialogRef to be closed after action. However I'm getting the error: 'Failed: this.dialogRef.close is not a function TypeError: this.dialogRef.close is not a function'

I've tried mocking but without any results.

I'm trying to unit test my dialogues. I'm expecting the dialogRef to be closed after action. However I'm getting the error: 'Failed: this.dialogRef.close is not a function TypeError: this.dialogRef.close is not a function'

I've tried mocking but without any results.

Any suggestions?

import {async, ComponentFixture, TestBed} from 
'@angular/core/testing';
import {CloneDialogComponent} from "./cloneDialog.component";
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef, 
MatDialogTitle} 
from '@angular/material/dialog';
import {BrowserAnimationsModule} from "@angular/platform- 
browser/animations";

describe('CloneDialogComponent', () => {
    let component: CloneDialogComponent;
    let fixture: ComponentFixture<CloneDialogComponent>;

    const dialogMock = {
    close: () => { }
    };

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          CloneDialogComponent
        ],
      imports: [
        MatDialogModule,
        BrowserAnimationsModule
      ],
        providers: [
        {provide: MatDialogTitle, useValue: {}},
          {provide: MatDialogRef, useValue: {dialogMock}},
          {provide: MAT_DIALOG_DATA, useValue: []}]
    });
    fixture = TestBed.createComponent(CloneDialogComponent);
    component = fixture.componentInstance;
  }));

  it('should be created', () => {
    expect(component).toBeTruthy();
  });

  it('No calls onNoClick()', async(() => {
    spyOn(component, 'onNoClick');
    fixture.detectChanges();
    const button = 
fixture.debugElement.nativeElement.querySelector('#no');
    button.click();
    expect(component.onNoClick).toHaveBeenCalled();
  }));

  it('Yes calls onYesClick()', async(() => {
    spyOn(component, 'onYesClick');
    fixture.detectChanges();
    const button = 
fixture.debugElement.nativeElement.querySelector('#yes');
    button.click();
    expect(component.onYesClick).toHaveBeenCalled();
  }));

  it('dialog should be closed after onYesClick()', async(() => {
    component.onYesClick();
    expect(component.dialogRef.close).toHaveBeenCalled();
  }));

  it('dialog should be closed after onNoClick()', async(() => {
    component.onNoClick();
    expect(component.dialogRef.close).toHaveBeenCalled();
  }));

});

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';

@Component({
  templateUrl: './cloneDialog.component.html',
  styleUrls: ['./cloneDialog.component.sass']
})

export class CloneDialogComponent {

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

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

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

}

Answer 1

You don't need the brackets around dialogMock:

{provide: MatDialogRef, useValue: dialogMock},

And change your tests to use a spy to spy on the close function and then check if it has been called:

it('dialog should be closed after onYesClick()', () => {
  let spy = spyOn(component.dialogRef, 'close').and.callThrough();
  component.onYesClick();
  expect(spy).toHaveBeenCalled(); 
});

it('dialog should be closed after onNoClick()', () => {
  let spy = spyOn(component.dialogRef, 'close').and.callThrough();
  component.onNoClick();
  expect(spy).toHaveBeenCalled();    
});

Working stackblitz is here.