Angular 2單元測試：如何測試上下文菜單和雙擊事件？

Question

我只是想這個工作

let fixture: any = TestBed.createComponent(ComponentBeingTested); 
     fixture.detectChanges(); 
     const contextMenuEl: DebugElement[] = fixture.debugElement.queryAll(By.css("td"); 
     contextMenuEl[0].nativeElement.oncontextmenu(); 
     const doubleClickEl: DebugElement[] = fixture.debugElement.queryAll(By.css("li"); 
     doubleClickEl[0].nativeElement.ondblclick(); 

如果是這種成分的模板：

<td (contextmenu)="contextMenuFunction">Context Menu</td> 
<li (dblclick)="dblClickFunction">Double click</li> 

我得到的錯誤contextMenuEl [0] .nativeElement.oncontextmenu不是一個函數和doubleClickEl [ 0] .nativeElement.ondblclick不是函數

應用功能按預期工作。是的，如果我更改這些事件以在模板中和測試中單擊，它都可以在測試中使用。

Answer 1

這是如何觸發一個上下文菜單的變化：

contextMenuEl[0].triggerEventHandler("contextmenu", new MouseEvent("contextmenu")); 
fixture.detectChanges(); 

這是如何觸發雙擊變化：

doubleClickEl[0].triggerEventHandler("dblclick", new MouseEvent("dblclick")); 
fixture.detectChanges();