Angular: How to mock MatDialogRef while testing

Question

I have a DialogComponent that has the following constructor where Dialog is a custom object:

constructor(
    public dialogRef: MatDialogRef

        

Answer 1

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,
          @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;

    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();
  }));
 });