如何在 Angular 中模拟自定义对话框以使用 Jest 进行单元测试

Question

I am writing test cases for unit tests and code coverage for a method that opens a dialog component on isEdit = 'true' which is retrieved from localStorage .

The issue here is in the first test case, I am setting the isEdit = true and calling the method showMessagesList() , then the lines inside the if are getting covered under code coverage but test case is failing with an exception Cannot read property 'openModalDialog' of undefined . But the second test case is not failing because I am Spying On it. Can anyone please help me mocking the Dialog component in Jest and how it eliminate the error

Exception SideBarDrawerComponent › should call show Message Items when true

    TypeError: Cannot read property 'openModalDialog' of undefined

      49 |     this.isEdit = localStorage.getItem('isEditMode').toString()
      50 |     if (this.isEdit === 'true') {
    > 51 |       this.modalDialog.openModalDialog()
         |                                ^
      52 |     } else {
      53 |       this.toggleComponent.emit(componentTypes.LIST)
      54 |     }

Component Method

showMessagesList() {
    // Check if the compose componenet is in edit mode;
    this.isEdit = localStorage.getItem('isEdit').toString()
    if (this.isEdit === 'true') {
      this.modalDialog.openModalDialog() // exception when isEdit is set to 'true' in the test case
    } else {
      this.toggleComponent.emit("true")
    }
  }

Spect.ts file

import { ComponentFixture, TestBed } from '@angular/core/testing'
import { By } from '@angular/platform-browser'
import {
  ModalDialogComponent,
  ModalDialogModule,
} from 'modal-dialog'

import { ContentModel } from '../../model/content.model'
import * as componentTypes from '../componentTypes'
import { ComposeComponent } from '../compose-message/compose.component'
import { MessageItemsComponent } from '../message-list/message-item.component'
import { SideBarDrawerComponent } from './side-bar-drawer.component'
import spyOn = jest.spyOn


window.ResizeObserver =
  window.ResizeObserver ||
  jest.fn().mockImplementation(() => ({
    disconnect: jest.fn(),
    observe: jest.fn(),
    unobserve: jest.fn(),
  }))

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ModalDialogModule],
      declarations: [
        SideBarDrawerComponent,
        MessageItemsComponent ,
        ComposeComponent,
        ModalDialogComponent, // <-- Dialog Component
      ],
      providers: [
        { provide: Window, useValue: window },
        { provide: ModalDialogComponent, useValue: {} },
      ],
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(SideBarDrawerComponent)
        component = fixture.componentInstance
      })
  })

  beforeEach(() => {
    component.content = mockContent
  })

  it('should call show Message Items when true', () => {
    localStorage.setItem('isEditMode', 'true')
    component.showMessagesList()
    component.isEdit = localStorage.getItem('isEditMode') ?? ''
    fixture.detectChanges()
    expect(component.isEdit).toBe('true')
  })

  it('should check open dialog', () => {
    const isEdit = 'true'
    component.isEdit = isEdit.toString()
    expect(component.isEdit).toBe('true')
    jest.spyOn(component, 'showMessagesList').mockImplementationOnce(() => {
      if (isEdit === 'true') {
        expect(component.modalDialog.openModalDialog).toBeCalled()
      }
    })
  })
})

Answer 1

May be it could be a typo issue but I can see one issue here:

this.exampleModalDialog4.openModalDialog()
// --------------------^-----4 added here.

Yet you can provide some mock method implemetations for the Modal dialog:

{ 
  provide: ModalDialogComponent, 
  useValue: {
     openModalDialog: () => {},
     // other implementations
  } 
},