如何使用 QUnit 测试事件监听器答案

【问题标题】：How to test event listeners using QUnit如何使用 QUnit 测试事件监听器
【发布时间】：2015-07-07 05:40:29
【问题描述】：

我正在使用纯 Javascript（无 JQuery），我正在尝试让 QUnit 测试我的函数，该函数仅通过事件调用，即它是一个事件侦听器。

所以我想测试的功能是这样的：

(function() {
   function the_one_i_want_to_test() {
      // do stuff
   }

   window.addEventListener('load', function() {
      var some_element = ...;
      some_element.addEventListener('click', the_one_i_want_to_test);
   });
})();

我知道我可以公开该函数来测试它，但它只用作事件侦听器，我不想污染全局命名空间。

这就是为什么我试图通过手动触发“点击”事件然后检查所需效果（在我的测试中）来用一块石头杀死两只鸟。

问题是事件处理程序似乎根本没有执行，要么是因为 QUnit 在执行效果检查之前没有等待它，要么是出于其他原因。

所以我的 QUnit 测试代码如下所示：

QUnit.test('test function', function(assert) {             
   var some_element = ...;
   var event = document.createEvent('Event');
   event.initEvent('click', true, true);
   some_element.dispatchEvent(event);

   assert.ok(...assert one or more effects of running "the_one_i_want_to_test"...);
});

我已经尝试包含 JQuery 只是为了测试使用“.trigger()”，但这似乎没有帮助。

事件侦听器在生产页面上正常/正常执行，只是不在测试中。

关于为什么事件侦听器似乎没有运行的任何想法？

【问题讨论】：

你应该使用异步构造，看here
我对此进行了研究，但我不明白它是如何工作的，因此不明白如何将它应用到我的用例中。您能否为我的场景提供一个示例？更具体地说，在您链接的示例中，为什么将 done() 放在断言之后？
异步测试通常的工作方式（与 QUnit 一样）是您使用某种方法向测试框架指示当前测试已完成。在 QUnit 中，您可以通过调用 assert.async() 来指示 QUnit 应该等待对返回函数的调用 (done())
我明白你想说什么，因为问题很可能是由于测试框架不知道等待事件侦听器完成执行引起的，但我不明白上面的例子您链接的 QUnit 页面以及它是如何实现的。
等一下...您是说事件根本没有处理，或者效果对您的代码“不可见”？您可以尝试在文档中使用 setTimeout 围绕您的 assert.ok 呼叫（确保使用 3 秒超时）

标签： javascript events event-handling qunit

【解决方案1】：

在 Javascript 中，事件处理程序不会在引发事件时立即执行。它们在列表中排队，并在当前代码块完成后执行。到那时，测试结束了。

您必须使用 setTimeout 技巧来排队您的验证代码，以便它在处理程序之后执行。当延迟为 0（或未指定）时，代码将尽快排队等待执行，这意味着在事件处理程序有机会运行之后。

正如 Amit 所说，您还需要使用 assert.async() 方法来获取您将在断言之后调用的 done() 函数。这使得QUnit.test 等到您调用它后再进行下一个测试。

试试这样的：

QUnit.test('test function', function(assert) {             
   var some_element = ...;
   var event = document.createEvent('Event');
   event.initEvent('click', true, true);
   some_element.dispatchEvent(event);

   var done = assert.async();
   setTimeout(function() {
        assert.ok(...assert one or more effects of running "the_one_i_want_to_test"...);
        done();
   });

});

【讨论】：

【解决方案2】：

确保您希望测试的代码实际包含在您的网页中。

我一直在无头环境中运行并且没有收到任何运行时错误（除了失败的断言）。在@Amit 的帮助下（让我清醒过来），我尝试在浏览器中运行测试，发现代码甚至没有包含在页面中。

【讨论】：