How to write the unit test case for angular material dialog

Question

Question: How to perform unit test in angular on material dialog box. I tried many things but it seems to be not working. I am new to unit testing, please help
Dialog-modal.component.ts

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { DialogUnitTestComponent } from '../dialog-unit-test/dialog-unit-test.component';
@Component({
  selector: 'app-dialog-modal',
  templateUrl: './dialog-modal.component.html',
  styleUrls: ['./dialog-modal.component.scss']
})
export class DialogModalComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  ngOnInit(): void {
  }
  openModal() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {
    id: 1,
    Name: "Keshav Sahu",
    title: 'Angular Dialog Test'
    };
    const dialogRef = this.dialog.open(DialogUnitTestComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(result => {
    console.log("Dialog was closed" );
    console.log(result)
    });
    }

}

Dialog-Unit-Test.component.ts

import { DialogModalComponent } from './../dialog-modal/dialog-modal.component';
import { Component, OnInit , Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
@Component({
  selector: 'app-dialog-unit-test',
  templateUrl: './dialog-unit-test.component.html',
  styleUrls: ['./dialog-unit-test.component.scss']
})
export class DialogUnitTestComponent implements OnInit {

modalTitle: string;
  constructor(@Inject(MAT_DIALOG_DATA) public data: any,public dialogRef: MatDialogRef<DialogUnitTestComponent>) {
    this.modalTitle = data.title;
    console.log(data)
    }

  ngOnInit(): void {
  }

}

Dialog-unit-test.component.html

<h2 mat-dialog-title>{{modalTitle}}</h2>
<mat-dialog-content>Do you wish to continue previous shopping?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]="false">No</button>
<button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>

score 1 · Answer 1 · answered Nov 26 '20 at 12:05

Definitely works with Angular 10+ but should work with 9:

import { OverlayContainer } from '@angular/cdk/overlay';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import { MatDialogHarness } from '@angular/material/dialog/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonHarness } from '@angular/material/button/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DialogModalComponent } from '../dialog-modal/dialog-modal.component';
import { DialogUnitTestComponent } from './dialog-unit-test.component';

describe('DialogUnitTestComponent', () => {
  let component: DialogModalComponent;
  let fixture: ComponentFixture<DialogModalComponent>;
  let rootLoader: HarnessLoader;
  let overlayContainer: OverlayContainer;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [BrowserAnimationsModule, MatDialogModule, MatButtonModule],
      declarations: [DialogModalComponent, DialogUnitTestComponent]
    })
      .overrideModule(BrowserDynamicTestingModule, {
        set: {
          entryComponents: [DialogUnitTestComponent]
        }
      })
      .compileComponents();

    fixture = TestBed.createComponent(DialogModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
    overlayContainer = TestBed.inject(OverlayContainer);

    component.openModal();
  });

  afterEach(async () => {
    const dialogs = await rootLoader.getAllHarnesses(MatDialogHarness);

    await Promise.all(dialogs.map(async (d: MatDialogHarness) => await d.close()));
    overlayContainer.ngOnDestroy();
  });

  it('should close dialog on "Yes" click', async () => {
    const yesButton = await rootLoader.getHarness(
      MatButtonHarness.with({
        text: 'Yes'
      })
    );

    await yesButton.click();

    const dialogs = await rootLoader.getAllHarnesses(MatDialogHarness);

    expect(dialogs.length).toBe(0);
  });
});

How to write the unit test case for angular material dialog

1 Answers1