Error 'Cannot read property 'triggerEventHandler' of null' in Karma unit testing

Question

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>

Answer 1

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?