Currently, I am in the process of creating test cases for unit tests and ensuring code coverage for a method that triggers a dialog component when isEdit = 'true' which is retrieved from localStorage.
The issue arises with the first test case where I am setting isEdit = true and invoking the method showMessagesList(). The lines within the if statement are covered in code coverage but the test case fails with an exception stating
Cannot read property 'openModalDialog' of undefinedError Message 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 | }
Method in Component
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()
}
})
})
})