[英]How to mock Custom Dialog in Angular for Unit Testing using Jest
我正在为从localStorage
检索到的在isEdit = 'true'
上打开对话框组件的方法编写单元测试和代码覆盖率的测试用例。
这里的问题是在第一个测试用例中,我设置isEdit = true
并调用方法showMessagesList()
,然后 if 内的行被代码覆盖但测试用例失败并出现异常Cannot read property 'openModalDialog' of undefined
。 但是第二个测试用例并没有失败,因为我正在监视它。 谁能帮我mocking Jest中的Dialog组件以及它如何消除错误
异常 SideBarDrawerComponent › 应在 true 时调用 show Message Items
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()
}
})
})
})
可能是错字问题,但我可以在这里看到一个问题:
this.exampleModalDialog4.openModalDialog()
// --------------------^-----4 added here.
然而,您可以为 Modal 对话框提供一些模拟方法实现:
{
provide: ModalDialogComponent,
useValue: {
openModalDialog: () => {},
// other implementations
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.