HTML 未通过 QUnit 测试中的敲除更新
HTML isn't updated by knockout in QUnit test
我正在使用 QUnit 编写单元测试以测试网页的 HTML。
该网页使用敲除来改变DOM。
在测试中,敲除没有被触发或加载,所以它应该做的改变没有完成。因此,测试失败。
Index.cshtml
<script>
QUnit.config.autostart = false;
</script>
<div id="qunit-fixture">
<div id="root">
<div class="board" data-bind="click: css: { 'selected': $data === $root.SelectedBoard() }">
</div>
</div>
<script src="~/Scripts/root.js"></script>
<script>
var root = new Root();
$(function ()
{
ko.applyBindings(root, document.getElementById('root'));
QUnit.start(); //Tell QUnit we are ready to launch test
});
</script>
Root.JS
Root = function ()
{
var self = this;
self.Boards = [];
self.SelectedBoard = ko.observable(null);
self.SelectBoard = function (board, event)
{
if (!!board && board != null && self.SelectedBoard() !== board)
{
self.SelectedBoard(board);
self.SelectedBoard().LoadData();
}
};
//Some stuff that build "Boards" array.
}
Test.js
test("Selected board have a visual indicator to display it.", 1, function ()
{
var $Boards= $(".Board");
root.SelectBoard(root.Boards[2]);//Does change root.SelectedBoard
ok($Boards.eq(2).hasClass("selected"), "Second board should be selected");//Fail because knockout didn't add "selected" class yet.
});
我可以更改什么以进行敲除工作并进行测试中应有的修改?
注意:
初始运行测试失败,但是当我在QUnit界面点击"rerun"时,测试通过
由于顺序测试是 运行,所以第一次尝试时测试不成功。随后的 运行 有效,因为失败的测试首先是 运行。所以,我的测试并不是相互独立的,因为我只声明了一次变量 "root" 并应用了敲除绑定。因此,每个测试将变量 "root" 留在不同的状态,以便下一个测试成为 运行。不用说这很糟糕。
为了解决这个问题,我使用 Qunit setup/teardown 创建变量 root 并在每次测试前应用 knockout 绑定。
setup: function ()
{
var divRoot = $('#root')[0];
this.root = new Root();
ko.applyBindings(this.root, divRoot);
},
teardown: function ()
{
var divRoot = $('#root')[0];
ko.cleanNode(divRoot);
this.root = null;
}
一切都按预期工作。所以淘汰赛的行为只是依赖测试的结果。
此外,qunit-fixture 在每次测试后都会重置 DOM,因此当我每次测试只有一个映射时,这也可能会干扰敲除。
我正在使用 QUnit 编写单元测试以测试网页的 HTML。 该网页使用敲除来改变DOM。 在测试中,敲除没有被触发或加载,所以它应该做的改变没有完成。因此,测试失败。
Index.cshtml
<script>
QUnit.config.autostart = false;
</script>
<div id="qunit-fixture">
<div id="root">
<div class="board" data-bind="click: css: { 'selected': $data === $root.SelectedBoard() }">
</div>
</div>
<script src="~/Scripts/root.js"></script>
<script>
var root = new Root();
$(function ()
{
ko.applyBindings(root, document.getElementById('root'));
QUnit.start(); //Tell QUnit we are ready to launch test
});
</script>
Root.JS
Root = function ()
{
var self = this;
self.Boards = [];
self.SelectedBoard = ko.observable(null);
self.SelectBoard = function (board, event)
{
if (!!board && board != null && self.SelectedBoard() !== board)
{
self.SelectedBoard(board);
self.SelectedBoard().LoadData();
}
};
//Some stuff that build "Boards" array.
}
Test.js
test("Selected board have a visual indicator to display it.", 1, function ()
{
var $Boards= $(".Board");
root.SelectBoard(root.Boards[2]);//Does change root.SelectedBoard
ok($Boards.eq(2).hasClass("selected"), "Second board should be selected");//Fail because knockout didn't add "selected" class yet.
});
我可以更改什么以进行敲除工作并进行测试中应有的修改?
注意: 初始运行测试失败,但是当我在QUnit界面点击"rerun"时,测试通过
由于顺序测试是 运行,所以第一次尝试时测试不成功。随后的 运行 有效,因为失败的测试首先是 运行。所以,我的测试并不是相互独立的,因为我只声明了一次变量 "root" 并应用了敲除绑定。因此,每个测试将变量 "root" 留在不同的状态,以便下一个测试成为 运行。不用说这很糟糕。
为了解决这个问题,我使用 Qunit setup/teardown 创建变量 root 并在每次测试前应用 knockout 绑定。
setup: function ()
{
var divRoot = $('#root')[0];
this.root = new Root();
ko.applyBindings(this.root, divRoot);
},
teardown: function ()
{
var divRoot = $('#root')[0];
ko.cleanNode(divRoot);
this.root = null;
}
一切都按预期工作。所以淘汰赛的行为只是依赖测试的结果。
此外,qunit-fixture 在每次测试后都会重置 DOM,因此当我每次测试只有一个映射时,这也可能会干扰敲除。