如何從輸入的角度-cli 4單元測試

Question

在香草JS您可以通過模擬按鍵了對輸入模擬鍵向上事件：

testComponent.dispatchEvent(new Event("keyup")) 

但是這樣做在angular- CLI單元測試或控制檯沒有在我的component觸發這個功能，它通過響應關鍵事件：

@HostListener('keyup', ['$event']) 
    onKeyUp(event: KeyboardEvent) { 

任何想法？

Answer 1

你應該創建一個事件

const event = new KeyboardEvent('keyup', { 
     bubbles : true, cancelable : true, shiftKey : false 
}); 

，然後使用CSS選擇器獲得debugElement的參考

const input = debugElement.query(By.css('#id_of_element')); 

然後從以前的一個

const inputElement = input.nativeElement; 

本地的HTML元素的引用

將本地元素的值指定爲現在的文本字段值c ontains 12.

inputElement.value = 12; 

終於派遣關鍵了事件

inputElement.dispatchEvent(event); 

就會觸發功能

不要忘記每一個之前添加以下行，並確保您定義debugElement

debugElement = fixture.debugElement; 

希望它有幫助