Angular Typescript：如何在 Jasmine 测试中将数据传递给 CustomEvent答案

【问题标题】：Angular Typescript: How to pass data to CustomEvent in Jasmine testAngular Typescript：如何在 Jasmine 测试中将数据传递给 CustomEvent
【发布时间】：2019-10-03 17:45:36
【问题描述】：

这个类似问题的答案似乎已经过时了。 Can't modify CustomEvent data

我正在编写一个 jasmine 测试，我试图在其中传递数据。

在实际应用中当onSelect事件被发送到监听函数时，

console.log('here', JSON.stringify(evt))

显示数据符合预期。例如：

{ "id" : "31", "date_inserted" : "2018-05-12T13:36:32" }

但是，当我编写我的 jasmine 测试时，我无法在 CustomEvent 中传递数据。一些研究表明“详细信息”是只读属性。

下面的代码片段获取了一个附加了 onSelect 侦听器的 HTML 元素。 Console.log 按预期触发，但唯一返回的是 {"isTrusted":false}

it('should see the data' () => {
    const myButton = nativeElement.querySelector('#myButton');
    expect(myButton).not.toBeNull();
    myButton.dispatchEvent(new CustomEvent('onSelect', {"detail: {"foo": "bar"}});
});

一定有办法做到这一点。有什么建议吗？

【问题讨论】：

标签： angular events jasmine

【解决方案1】：

JSON.stringify() 仅对自己的属性进行字符串化。原型中的所有内容 - 没有被字符串化。尝试直接寻址所需的数据。

例如通常的'resize' 事件在执行JSON.stringify(e) 时显示'{"isTrusted":true}'。但包含所有必需的数据

【讨论】：

对不起...这是我在提出问题时的拼写错误。在编译器本身中，如果括号丢失，它会抱怨。 :) 感谢您的关注！

【解决方案2】：

我终于想出了如何做到这一点。

无论出于何种原因，Alex 好心建议的 javascript 版本似乎不适用于 typescript 的 jasmine 测试。

以下是有效的：

const selectEvent: any = document.createEvent('CustomEvent');
selectEvent.id = '1';
selectEvent.initEvent('onSelect', true, true);
myButton.dispatchEvent(selectEvent);

【讨论】：

是的。在这种情况下您不使用原型，而是直接分配属性的区别。原因就在于 JSON.stringify() 行为。您也可以使用初始实现，但直接检查数据，例如 expect(event.id).toEqual(1) 而不是使用 JSON.stringify