HTML 未通过 QUnit 测试中的敲除更新

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.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"时，测试通过

Answer 1

由于顺序测试是运行，所以第一次尝试时测试不成功。随后的运行有效，因为失败的测试首先是运行。所以，我的测试并不是相互独立的，因为我只声明了一次变量 "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，因此当我每次测试只有一个映射时，这也可能会干扰敲除。

HTML 未通过 QUnit 测试中的敲除更新

HTML isn't updated by knockout in QUnit test

jquery

html

knockout.js

qunit