Qunit 数据已删除

Question

有人可以解释为什么第三个控制台日志中的数据为空吗？

这是我在测试中遇到的问题的简化版本。我注意到我的测试函数中缺少数据，插入 "QUnit.test (...)"。一些由事件触发的功能使用此数据并且发生错误。

可以在 JsBin

上找到可执行代码

$(document).ready(function() {
  $("p").data("thedata", 1);
  console.log("First", $("p").data());
});

QUnit.config.autostart = false;
setTimeout(function() {
  QUnit.start();
  console.log("Second", $("p").data());
}, 1000);

setTimeout(function() {
  console.log("Third", $("p").data());
}, 2000);

<html>

<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link href="http://code.jquery.com/qunit/qunit-2.1.1.css" rel="stylesheet" />
  <script src="http://code.jquery.com/qunit/qunit-2.1.1.js"></script>
</head>

<body>
  <div id="qunit"></div>
  <div id="qunit-fixture">
    <p>content</p>
  </div>
</body>

</html>

Answer 1

好的，在看到您的 JSBin 之后，我明白了问题所在。部分原因是在上面的代码中您实际上根本没有使用 QUnit（没有测试），但真正的问题是 QUnit "fixtures" 在每次测试后（有意）被重置。前两个工作是因为 QUnit 必须考虑第一个测试，但是第三个控制台日志的 2000 ms 超时必须发生在 "test" 之后，这意味着 fixture 被重置为其原始 HTML。请注意，您在 JS 中添加数据，而不是在 HTML 中。

所以...这是您的选择：将数据放在实际的 HTML (<p data-thedata='1'>content</p>) 中，或者您可以使用 beforeEach 挂钩设置适当的 QUnit 测试 (这是我的首选）。这是选项二的代码，以及 working JSBin.

$(document).ready(function() {
  console.log("First", $("p").data());
});

QUnit.config.autostart = false;

QUnit.module('data', {
  beforeEach: function() {
    $("p").data("thedata", 1);
    console.log("before each", $("p").data());
  }
});

QUnit.test('data delay', function(assert) {
  let done = assert.async();

  setTimeout(function() {  
    console.log("Second", $("p").data());
  }, 1000);

  setTimeout(function() {
    console.log("Third", $("p").data());
    assert.ok($("p").data());
    assert.equal($("p").data().thedata, 1);
    done();
  }, 2000);
});

QUnit.start();

Qunit 数据已删除

Qunit data erased

javascript

jquery

qunit