Déclencher programmatiquement un événement DOM sur un élément (triggerEventHandler)

Dans un test unitaire, on veut souvent simuler les actions de l’utilisateur avec l’application. Cela nécessite de déclencher programmatiquement certains événement DOM comme click ou keydown.XXX.

L’API de testing Angular propose une méthode triggerEventHandler qui permet de déclencher aussi bien un événement DOM qu’un événement Angular (aka “output”) :

// Événément DOM
fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
// Événément Angular / "Output"
deDate.triggerEventHandler('ngModelChange', { year: 1976, month: 4, day: 20 });

Voir la liste des listeners d’événement disponibles sur un élément :

const listeners = fixture.debugElement.query(By.css('button')).listeners;

S’il n’y a pas de listener pour l’événement ciblé, la doc dit qu’on peut utiliser nativeElement.dispatchEvent(eventObject) :

const des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
const input = des[2].nativeElement as HTMLInputElement;
// Dispatch a DOM event so that Angular
// learns of input value change.
input.value = 'green';
input.dispatchEvent(newEvent('input'));
fixture.detectChanges();  // Tell Angular to update the UI