将模拟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();

希望这有帮助!