javascript - QUnit 不运行外部 JavaScript 文件

Question

我正在尝试改编教程 here使用 QUnit v2.x，但它似乎没有获取我要测试的 JavaScript 文件。

测试.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>

列表.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

所以，这个问题出现在multiple other places所以。本质上发生的事情是 QUnit 2 以不同的方式处理固定装置。您的代码将事件处理程序添加到原始 HTML，但随后 QUnit 会终止该 HTML 并重建它，从而删除您的处理程序。解决方案是在您的测试内部 进行事件绑定(bind)，而不是在页面加载时进行。这是 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);
  });