在QUnit测试中无法通过剔除来更新HTML

Question

我正在使用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 = 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界面中单击“重新运行”时，测试通过。

Answer 1

由于已运行订单测试，因此该测试无法进行首次尝试。 后续运行成功，因为首先运行了失败的测试。 因此，我的测试不是彼此独立的，因为我只声明了一次变量“ root”并应用了敲除绑定。 因此，每个测试都会使变量“ root”处于不同的状态，以便下次运行测试。 不用说这是不好的。

为了解决这个问题，我使用Qunit设置/拆卸来创建变量root，并在每次测试之前应用敲除绑定。

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，因此当我对每个测试只有一个映射时，这也可能会干扰淘汰。