Angular: How to Mock Matdialogref While Testing

If you use at least one MatDialogRef method, you should create a mock. For example I use the close() method. Without it errors would be generated so I made the below class with an empty method.

export class MatDialogRefMock {
    close(value = '') {

    }
}

and use that instead of an empty value, with useClass

{ provide: MatDialogRef, useClass: MatDialogRefMock },

Import MatDialogModule and MatDialogRef from angular/material/dialog instead of angular/material. Import the ModalDialogModule and provide providers for MatDialogRef in your TestBed.

Import {MatdialogModule,MatDialogRef} from '@angular/material/dialog';

TestBed.configureTestingModule({
declarations: [componentName],
imports: [MatdialogModule],
providers: [{provide : MatDialogRef, useValue : {}}]
});

To solve this problem, you can do the following steps:

1- You used the data as input to the dialog and used it in the constructor to set the variables. (in .ts)

  constructor(public dialogRef: MatDialogRef<any>,
          @Inject(MAT_DIALOG_DATA) public data: any) {
     this.ip= data.ip;
     this.name= data.name;
  }

2- We should create fake data, (in .spec.ts)

const data = {
    ip: '1.1.1.1',
    name: 'test'
 }

3- We define provider as follows And we introduce data, (in .spec.ts)

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

4- full code in .spec.ts

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {CustomDialogComponent} from './backup-list.component';
import {TranslateModule} from '@ngx-translate/core';
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material';
import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
import {NO_ERRORS_SCHEMA} from '@angular/core';

const data = {
    ip: '1.1.1.1',
    name: 'test'
 };

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

    beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [CustomDialogComponent],
        imports: [
            TranslateModule.forRoot(),
            MatDialogModule,
            BrowserDynamicTestingModule
        ],
        providers: [
            {provide: MatDialogRef, useValue: {}},
            {provide: MAT_DIALOG_DATA, useValue: data},
        ],
        schemas: [NO_ERRORS_SCHEMA]
    })
        .compileComponents();
  }));
 });

You can do this by the help of jasmine spy, as follow:

Step 1: Define the mock data

  const data = {
    title: 'title',
    message: 'message',
    summary: 'my summary'
  };

Step 2: Create jasmine spy for MatDialogRef (Write this inside beforeEach block)

const matDialogSpy = jasmine.createSpyObj('MatDialogRef', ['onNoClick', 'closeDialog']);

onNoClick and closeDialog are methods inside MessagePopupComponnet

Step 3: Configure the TestBed as follow:

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

For the ref, I've provided the full code below:

import { DebugElement } from "@angular/core";
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";

import { MessagePopupComponent } from "./message-popup.component";


describe('MessagePopup', () => {
  let fixture: ComponentFixture<MessagePopupComponent>;
  let component: MessagePopupComponent;
  let el: DebugElement;
  let matDialogRef;

  const data = {
    title: 'title',
    message: 'message',
    summary: 'my summary'
  };

  beforeEach(async(() => {

    const matDialogSpy = jasmine.createSpyObj('MatDialogRef', ['onNoClick', 'closeDialog']);

    TestBed.configureTestingModule({
      declarations: [MessagePopupComponent],
      providers: [
        {
          provide: MatDialogRef,
          useValue: matDialogSpy
        },
        {
          provide: MAT_DIALOG_DATA,
          useValue: data
        }
      ]
    }).compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(MessagePopupComponent);
      component = fixture.componentInstance;
      el = fixture.debugElement;
      matDialogRef = TestBed.get(MatDialogRef);
    });

  }));

  fit('should create Message Popup component', () => {
    expect(component).toBeTruthy('Message popup not created')
  });

});