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

Question

我正在为一个方法编写单元测试的测试用例和代码覆盖率，该方法在isEdit = 'true'上打开从localStorage检索的对话框组件。

这里的问题是在第一个测试用例中，我设置isEdit = true并调用方法showMessagesList()，然后if中的行被代码覆盖，但测试用例失败，出现异常Cannot read property 'openModalDialog' of undefined。但第二个测试用例并没有失败，因为我正在监视它。有人能帮我嘲笑Jest中的Dialog组件吗？以及它是如何消除错误的

例外SideBarDrawerComponent›应在真正时调用显示消息项目

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 |     }

组件方法

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文件

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

可能是打字错误问题，但我可以在这里看到一个问题：

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

然而，您可以为模态对话框提供一些模拟方法实现：

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