I am trying to test if a closeModal function in a Modal component is working when clicking a "close button" on the modal, however this test shows my button element as null. I am getting the error "Cannot read property 'triggerEventHandler' of null." How can I resolve this?
modal.component.ts
import { AppComponent } from "./../app.component";
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { ModalComponent } from "./modal.component";
import { By } from '@angular/platform-browser';
describe("ModalComponent", () => {
let component: ModalComponent;
let fixture: ComponentFixture<ModalComponent>;
beforeEach(
async(() => {
TestBed.configureTestingModule({
declarations: [ModalComponent, AppComponent]
}).compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(ModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it("should create", () => {
expect(component).toBeTruthy();
});
it("should test closeModal method on close button", () => {
spyOn(component, "closeModal")
let el = fixture.debugElement.query(By.css('#close'))
el.triggerEventHandler('click', null)
fixture.detectChanges()
fixture.whenStable().then(() => {
expect(component.closeModal).toHaveBeenCalled();
});
});
});
modal.component.html
<div class="ds-c-dialog-wrap"[ngClass]="hideModal ? 'hide' : 'show'">
<div>
<header role="banner">
<h1 id="dialog-title">{{modalTitle}}</h1>
<button
id="button"
(click)="closeModal()"
*ngIf="enableClose">Close</button>
</header>
<main>
<p class="ds-text">
{{modalBody}}
</main>
<aside role="complementary">
<button>Dialog action</button>
<button *ngIf="enableCancel" (click)="closeModal()">Cancel</button>
</aside>
</div>
</div>
I believe your problem is with *ngIf="enableClose">Close</button>
. You will need to set enableClose
to true before you try to to access it. Try something like this:
it("should test closeModal method on close button", () => {
spyOn(component, "closeModal")
component.enableClose = true; // set your variable to true
fixture.detectChanges(); // update everything to reflect the true state
let el = fixture.debugElement.query(By.css('#close'))
el.triggerEventHandler('click', null)
fixture.detectChanges()
fixture.whenStable().then(() => {
expect(component.closeModal).toHaveBeenCalled();
});
});
Also, I noticed in your html the close button has an id of button
, but in your test you are looking for #close
, is that correct which means your button id should be close
?
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.