Question

我正在使用QUnit编写单元测试，以测试网页的HTML。该网页使用knockout来改变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界面中单击“重新运行”时，测试通过。

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

在QUnit测试中，敲除不会更新HTML

1 个答案: