Angular單元測試-事件觸發

在angular項目中時常有一些click、input、focusout等事件操做，那麼如何在單元測試中觸發這些事件呢？

1、觸發Click事件

// 方法一
const ele = fixture.debugElement.query(By.css("#id"));
ele.triggerEventHandler('click', null)
fixture.detectChanges(); // 更新視圖

// 方法二
const ele = fixture.nativeElement.querySelector("#id");
ele.click();
fixture.detectChanges(); // 更新視圖

2、觸發input事件

觸發input事件，須要在獲取到input元素後，先給輸入框綁定值，而後去觸發輸入事件，最後更新視圖。

const input = fixture.nativeElement.querySelector("#input");
input.value = 'abc';
input.dispatchEvent(new Event('input'));
fixture.detectChanges(); // 更新視圖

2、觸發focusout事件

const input = fixture.nativeElement.querySelector("#input");
input.dispatchEvent(new Event('focusout'));
fixture.detectChanges(); // 更新視圖