我刚刚开始使用 QUnit 进行 ui 测试，所以我确信我缺少 qunit-fixture 的一些基本用例。我认为它对于测试 DOM 操作很有用，但后来我意识到我的 DOM 操作函数都不知道有关 qunit-fixture 的任何信息（它们也不应该？）。
Example:
<div id="container">
<form id="my-form">
<input type="hidden" name="field1" id="field1">
<input type="hidden" name="field2" id="field2">
</form>
</div>
<div id="qunit-fixture"></div>
我将 URL 参数传递给函数来填充此表单。如果这些参数不存在，我希望删除该字段，以便JQuery.serialize()不捆绑一个空字段。
function populate(params){
if( params.field1 ){
$("#field1").val(params.field1);
} else {
$("#field1").remove();
}
if( params.field2 ){
$("#field2").val(params.field2);
} else {
$("#field2").remove();
}
}
我最初的想法是“哦，酷。我可以使用qunit-fixture反复模仿我的形式！”就像这样：
QUnit.test("populate - field1=text", function(assert){
$("#qunit-fixture").html($("#container").html());
populate( {field1: "text"} );
assert.deepEqual($("#field1").val(), "text");
assert.deepEqual($("#field2").val(), undefined);
});
QUnit.test("populate - field1="text", function(assert){
$("#qunit-fixture").html($("#container").html());
populate( {field1: "text", field2: "text"} );
assert.deepEqual($("#field1").val(), "text");
assert.deepEqual($("#field2").val(), "text");
});
这当然会失败，因为第一个测试调用populate()更改 DOM 并删除#field2除了放入的副本之外，还从页面的主表单中qunit-fixture（非唯一 ID.. 哎呀）。
那么我错过了什么？我真的很喜欢使用 QUnit 测试逻辑模块的能力，并且终于开始看到更多测试驱动的开发风格的优点。我也希望能够测试我的 DOM 操作。
注意：这是一个简化的示例。我的项目中实际的 DOM 操作要复杂得多，因此希望对其进行测试。
