QUnit没有运行外部JavaScript文件

Question

我正在尝试在这里修改教程以使用QUnit v2.x，但它似乎没有拿起我想要测试的JavaScript文件。

的test.html

<div id="qunit"></div>
<div id="qunit-fixture">
  <form>
    <input name="text" />
    <div class="has-error">Error text</div>
  </form>
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="qunit.js"></script>
<script src="../list.js"></script>
<script>

    QUnit.test("errors should be hidden on keypress", function (assert) {
        $('input').trigger('keypress');
        assert.equal($('.has-error').is(':visible'), false);
    });

</script>

list.js

jQuery(document).ready(function ($) {
    $('input').on('keypress', function () {
        $('.has-error').hide();
    });
});

测试失败，结果为true

本教程中提供的代码适用于QUnit 1.23

<script>

/*global $, test, equal */

test("errors should be hidden on keypress", function () {
    $('input').trigger('keypress');
    equal($('.has-error').is(':visible'), false);
});

test("errors not be hidden unless there is a keypress", function () {
    equal($('.has-error').is(':visible'), true);
});

</script>

编辑：使用QUnit v1.23两个版本的测试工作！

Answer 1

所以，这个问题已经出现在SO的其他多个地方 。 基本上发生的事情是QUnit 2以不同的方式处理灯具。 您的代码会向原始HTML添加一个事件处理程序，但随后QUnit会杀死该HTML并重建它，从而删除您的处理程序。 解决方案是在测试中进行事件绑定，而不是在页面加载时进行。 这是一个小提琴 ，但代码如下：

  function init() {
    $('.username').on('keypress', function() {
      console.log('hiding error!');
      $('.has-error').hide();
    });
  }

  QUnit.test("errors should be hidden on keypress", function(assert) {
    init();
    $('.username').trigger('keypress');
    assert.strictEqual($('.has-error').is(':visible'), false);
  });

  QUnit.test("errors not be hidden unless there is a keypress", function(assert) {
    init();
    assert.strictEqual($('.has-error').is(':visible'), true);
  });