QUnit 没有运行外部 JavaScript 文件

Question

我正在尝试修改教程 here 以使用 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();
    });
});

测试失败，结果为真

教程中提供的代码在 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 上的 multiple other places 中提出。基本上发生的事情是 QUnit 2 以不同的方式处理固定装置。您的代码向原始 HTML 添加了一个事件处理程序，但随后 QUnit 会终止该 HTML 并重新构建它，从而删除您的处理程序。解决方案是在您的测试中进行事件绑定inside，而不是在页面加载时。这里是a fiddle 可以玩，但代码如下：

  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);
  });