时间戳

首页 > 解决方案 > 将模拟 DOM 事件传递给 Angular 中的组件方法以进行单元测试

angular - 将模拟 DOM 事件传递给 Angular 中的组件方法以进行单元测试

问题描述

我正在尝试在我的一个组件中测试一种方法，如下所示：

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

我找不到将事件对象传递给单元测试用例中的方法的方法，例如：

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

标签： angularunit-testingjasmine

解决方案

您可以测试是否已通过 Jasmine Spy 调用了 preventDefault。

在使用 SpyOn 方法之前，您必须创建您正在收听的事件。（在以下示例中，它是一个“点击”事件）。创建事件和间谍后，您需要将事件分派给元素。

举个例子：

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

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

希望这会有所帮助！

推荐阅读