QUnit未运行外部JavaScript文件

QUnit not running external JavaScript file

本文关键字：JavaScript 文件 外部 运行 QUnit      更新时间：2023-09-26

我试图调整这里的教程以使用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两个版本的测试工作！

所以，这个问题在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);
  });
相关文章：