单元测试 Angular 4 中的 TriggerEventHandler

Question

我有一个元素

<button class="next-btn" (mouseup)="someMethod()">Next</button>

我想在测试中模拟 mouseup 事件，我这样做

const nextBtnElem = fixture.debugElement.nativeElement;
const elem = nextBtnElem.getElementsByTagName('button')[1]
elem.triggerEventHandler('mouseup', null);

它不起作用，但如果我像这样改变它

const nextBtnElem = fixture.debugElement.query(By.css('.next-btn');
nextBtnElem.triggerEventHandler('mouseup', null);

现在它的工作。我不明白为什么 first optional 不起作用？

Answer 1

triggerEventHandler是一个存在于 Angular 上的函数DebugElement。在您调用的第一个代码片段中triggerEventHandler，DOM 对象不提供此功能。在 DOM 对象上，您可以使用dispatchEvent但您必须fixture.detectChanges();在触发事件和断言之间进行调用。