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()
}
})
})
})
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
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.