How to test event handler with multiple parameters

Question

I have a component with a click handler that takes two parameters:

onClick(row, $event): void {
    $event.stopPropagation();
    console.log(row);
}

<div>
    <button mat-icon-button (click)="onClick(row,$event)"></button>
</div>

How would I trigger the event with both parameters in my unit test? I would normally use triggerEventHandler('click', {}), but it only seems to allow providing one parameter?

Answer 1

One way is to make a real click on the DOM element instead of calling the event handler yourself.

let buton = fixture.debugElement.query(By.css('button')).nativeElement.click();

But I think your code should work, the event handler you call with triggerEventHandler is the method you declare in your template, not the one in the component.

Answer 2

Turns out this was because I was stubbing the component to test it and forgot to add a row property to the stub.