將模擬DOM事件傳遞給Angular中的組件方法以進行單元測試

Question

我試圖在我的一個組件中測試一個方法如下：

toggle(event: Event): void {
    event.stopPropagation();
    this.isCollapsed = !this.isCollapsed;
}

我找不到將事件對象傳遞給單元測試用例中的方法的方法，例如：

test('it should call stop propagation when toggled', () => {
    testHostComponent.toggleLineBreakDown(mockEventGoesHere, 0);
});

Answer 1

您可以測試是否已通過Jasmine Spy調用preventDefault。

在使用SpyOn方法之前，您必須創建要監聽的事件。 （在以下示例中，它是'click'事件）。 創建事件和間諜后，您將需要將事件分派給元素。

舉個例子：

const event = new MouseEvent('click'); 
spyOn(event, 'preventDefault');

element.dispatchEvent(event);
expect(event.preventDefault).toHaveBeenCalled();

希望這有幫助！