Jasmine出错 – 预期事件点击已在#DIV_ID上触发

我在这个链接中引用了在Jasmine框架中开发测试工具时触发事件：

http://www.htmlgoodies.com/beyond/javascript/js-ref/testing-dom-events-using-jquery-and-jasmine-2.0.htm l

我试图在Jasmine框架中的#DIV_ID上触发click事件后获取新应用的CSS属性。

我试过这段代码：

spyEvent = spyOnEvent('#DIV_ID', 'click'); $('#DIV_ID').trigger( "click" ); expect('click').toHaveBeenTriggeredOn('#DIV_ID'); expect(spyEvent).toHaveBeenTriggered(); 

但我收到错误： 预期事件点击已在#DIV_ID上触发

任何人帮我解决我的问题。

提前致谢。

Answer 1

您的代码中存在一些语法错误：

  var spyEvent = spyOnEvent($('#DIV_ID'), 'click'); $('#DIV_ID').trigger( "click" ); expect('click').toHaveBeenTriggeredOn($('#DIV_ID')); expect(spyEvent).toHaveBeenTriggered(); 

我希望这有效。

Answer 2

我曾经也有过一样的问题。 在我的情况下，它似乎与加载了两个不同版本的JQuery有关，jQuery是jasmine-jquery（及其匹配器和断言）内部使用的版本，也是我测试的系统使用的版本。

在我的例子中，将此代码放在Jasmine测试中：

  setFixtures(''); var spyEvent = spyOnEvent('#hello', 'click'); $('#hello').trigger('click'); expect(spyEvent).toHaveBeenTriggered(); 

使断言失败。 问题似乎是“$”没有引用jasmine-jquery的“spyOnEvent”使用的jQuery版本。 如果将“$”更改为“$ j”以触发事件，则捕获事件并断言成功：

  setFixtures(''); var spyEvent = spyOnEvent('#hello', 'click'); $j('#hello').trigger('click'); expect(spyEvent).toHaveBeenTriggered(); 

问题是，如果您在测试代码中使用“$”注册事件处理程序，则在使用“$ j”触发事件时将不会执行它们。 因此，如果您执行以下代码：

  setFixtures(''); $('#hello').on('click', function () { console.log("CLICK EVENT"); }); var spyEvent = spyOnEvent('#hello', 'click'); $j('#hello').trigger('click'); expect(spyEvent).toHaveBeenTriggered(); 

，控制台上不会打印任何消息。 显然，如果您通过“$ j.on”更改“$ .on”，则会显示该消息。

更有趣的是，如果您将灯具更改为“按钮”并尝试测试其点击事件的触发，则“$”和“$ j”这两个版本将完全兼容。 也就是代码：

  setFixtures(''); $('#hello').on('click', function () { console.log("CLICK EVENT"); }); var spyEvent = spyOnEvent('#hello', 'click'); $j('#hello').trigger('click'); expect(spyEvent).toHaveBeenTriggered(); 

即使您使用“$ j”而不是“$”注册处理程序，或者使用“$”而不是“$ J”触发事件，或者更改它将断言为true并且’click’处理程序正在执行，它将完美地工作他们可以任意组合。

最后，另一个看起来有效且更简单的解决方案是使用jquery-simulate库，如我如何模仿本机浏览器事件中所述 。 此代码仅将“.trigger”更改为“.simulate”：

  setFixtures(''); $('#hello').on('click', function () { console.log("CLICK EVENT"); }); var spyEvent = spyOnEvent('#hello', 'click'); $('#hello').simulate('click'); expect(spyEvent).toHaveBeenTriggered(); 

，并且工作得很好。 必须在“$”对象上调用“.simulate”方法，因为在我的情况下，库被注入到“$”的jQuery版本中。 相反，“。on”处理程序注册可以通过具有相同行为的“$”或“$ j”调用。 此外，“。模拟”方法允许您模拟单独使用jQuery的“本机浏览器事件”。