Question

我有一个我要测试的javascript函数，包含.load。该函数如下所示：

function getPane(divId) {
    $("#" + divId).load(
                    "Pane.html",
                    function () {
                        //do some work here
                        });
                    });
}

我想使用Qunit对此进行测试，但我不确定如何模仿此行为。

我也不知道如何模拟同时包含.load和.get -

的函数

 function getPane(divId) {
    $("#" + divId).load("Pane.html", function () {
            $.get("/Config/Pane", function (data) {
                //do work here
                }
            });
        });
    }

我只使用QUnit，没有Mockjax或Sinon.js或任何东西（我知道，我知道我应该）。任何帮助，将不胜感激。感谢。

Answer 1

由于OP建议他们可能会使用Mockjax，我想我会添加该解决方案。请注意，我在设置方法中添加了模拟并在之后将其删除。这允许每个测试是幂等的。此外，您的getPane()函数需要回调，因此您可以在测试中添加断言。

function getPane(divId, cb) {
    $("#" + divId).load("Pane.html", function () {
        $.get("/Config/Pane", function (data) {
            // do work here

            cb(); // callback executed for any additional actions (like tests)
                  // you may want to add some error handling with callback as well
        });
    });
}

然后在qunit测试文件的#qunit-fixture中添加div以将内容放入：

<html>
    ...
    <body>
        <div id="qunit"></div>
        <div id="qunit-fixture">
            <div id="foobar"></div> <!-- our test element -->
        </div>
    ...
    </body>
</html>

现在编写你的模拟和测试：

QUnit.module("some tests", {
    setup: function() {
        $.mockjax({
            url: "Pane.html",
            responseText: "<div>Some HTML content</div>"
        });
    },
    teardown: function() {
        $.mockjax.clear(); // new in 1.6
    }
});

QUnit.asyncTest("test it out", function(assert) {
    getPane("foobar", function() {
        assert.equal($("#foobar div").length, 0, "A new div was added to the page!");
        QUnit.start();
    });
});

如何在Qunit中模拟.load函数？

1 个答案: