Question

我在这个链接中引用了在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

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

在我的情况下，将此代码放入Jasmine测试中：

    setFixtures('<a id="hello"></a>');
    var spyEvent = spyOnEvent('#hello', 'click');
    $('#hello').trigger('click');
    expect(spyEvent).toHaveBeenTriggered();

使断言失败。问题似乎是＆＃34; $＆＃34;没有引用jasmine-jquery＆＃34; spyOnEvent＆＃34;所使用的jQuery版本。如果你改变＆＃34; $＆＃34;进入＆＃34; $ j＆＃34;触发事件，捕获事件并断言成功：

    setFixtures('<a id="hello"></a>');
    var spyEvent = spyOnEvent('#hello', 'click');
    $j('#hello').trigger('click');
    expect(spyEvent).toHaveBeenTriggered();

问题在于，如果您在测试代码中使用＆＃34; $＆＃34;注册事件处理程序当用＆＃34; $ j＆＃34;触发事件时，它们不会被执行。因此，如果您执行以下代码：

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

，控制台上不会打印任何消息。显然，如果你改变＆＃34; $。on＆＃34;通过＆＃34; $ j.on＆＃34;消息将显示。

更有趣的是，如果您将灯具更改为＆＃34;按钮＆＃34;并且您尝试测试其click事件的触发，＆＃34; $＆＃34;的两个版本和＆＃34; $ j＆＃34;将是完全兼容的。也就是代码：

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

将完美地宣称其主张是真实的并且点击＆＃39;处理程序执行，即使您使用＆＃34; $ j＆＃34;注册处理程序而不是＆＃34; $＆＃34;，或使用＆＃34; $＆＃34;触发事件而不是＆＃34; $ J＆＃34;，或以您想要的任何组合更改它们。

最后，另一个似乎有效的解决方案是使用jquery-simulate库，如How can I mimic a native browser event中所述。此代码仅更改＆＃34; .trigger＆＃34;通过＆＃34; .simulate＆＃34;：

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

，效果很好。＆＃34; .simulate＆＃34;必须在＆＃34; $＆＃34;上调用方法。对象，因为在我的情况下，库被注入＆＃34; $＆＃34;的jQuery版本。相反＆＃34; .on＆＃34;处理程序注册可以通过＆＃34; $＆＃34;或＆＃34; $ j＆＃34;具有相同的行为。而且，＆＃34; .simulate＆＃34;方法允许您模拟＆＃34;原生浏览器事件＆＃34;单凭jQuery就可以了。

Answer 2

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

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

我希望这有效。

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

2 个答案: