javascript - 如何在 qUnit 中针对 DOM 对象进行测试？

Question

我正在用 qUnit 测试一些 JavaScript。在一个对象中，我传递了一个 DOM 元素，一些方法会改变元素的一些属性。

如何在 qUnit 中模拟 DOM 对象？

我想使用独立于浏览器的解决方案，因为我还测试了 XUL 应用程序。

Answer 1

您始终可以在 JavaScript 中创建元素。如果您不附加它（例如附加到正文），它将不可见，因此您可以将其称为模拟元素：

document.createElement('div'); // 'div' will create a '<div>'

所以你也可以在 qUnit 测试函数中使用它：http: //jsfiddle.net/LeMFH/。

test("test", function() {
    expect(1);

    var elem = document.createElement("div");

    elem.style.position = "absolute";

    equals(elem.style.position, "absolute");
});

Answer 2

我有这种情况，我想为我编写的提供简单的基本树扩展功能的 JQuery 插件创建一个单元测试。我找到了一种使用 QUnit “ok” 方法创建虚拟行项目（“LI”元素）并将测试 DOM 作为此列表项的子项注入的方法，这样可以通过扩展测试来检查生成的操纵 DOM。此外，如果测试失败，QUnit 系统将自动显示被操作的 DOM 元素。生成的 QUnit 输出如下所示：

我对这个问题的解决方案是创建一个名为“testSpace”的函数，其中可以定义行项目文本和测试 HTML，以便 QUnit 测试命令可以检查生成的 DOM。以下是使用此功能的测试代码：

test("$.fn.tocControl", function () {
    var sTest =
          "<div>"
            + "<ul>"
                + "<li>item1</li>"
                + "<li>item2"
                    + "<ul>"
                        + "<li>s1item1</li>"
                        + "<li>s1item2"
                        + "<ul>"
                            + "<li>s2item1</li>"
                            + "<li>s2item2"
                            + "</li>"
                            + "<li>s2item3</li>"
                            + "<li>s2item4</li>"
                        + "</ul>"
                        + "</li>"
                        + "<li>s1item3</li>"
                        + "<li>s1item4</li>"
                    + "</ul>"
                + "</li>"
                + "<li>item3</li>"
                + "<li>item4</li>"
                + "<li>item5</li>"
            + "</ul>"
        + "</div>";

    // Create the test HTML here.
    var jqTest = testSpace("$.fn.tocControl.test", sTest);

    // Invoke the JQuery method to test.
    jqTest.find("ul").tocControl();

    // QUnit tests check if DOM resulting object is as expected.
    equal(jqTest.find("ul.ea-toc-control").length, 1, '$("div#testSpace ul.tocControl").length');
    equal(jqTest.find("ul:first").hasClass("ea-toc-control"), true, '$("div#testSpace ul:first").hasClass("tocControl")');
});

“testSpace” 函数使用 QUnit “ok” 方法定义行项目，但最初在临时位置构造 DOM 对象，直到 QUnit 系统定义行项目。该函数定义如下：

function testSpace(sName, sHTML) {
    ok(true, sName);

    var jqTestItem = $("ol#qunit-tests > li:last");
    jqTestItem.append('<div id="testSpaceContainer" style="display:none;">' + sHTML + '</div>');

    var jqTestSpace = jqTestItem.children("div#testSpaceContainer:first");

    var moveTestSpaceStart = $.TimeStamp();
    var moveTestSpace = function () {
        var jqTestArea = jqTestItem.find("ol > li:contains(" + sName + ")").filter(function () { return $(this).text() == sName; });
        if (jqTestArea.length <= 0) {
            if (!$.HasTimedOut(moveTestSpaceStart, 5000)) setTimeout(moveTestSpace, 200);
            return false;
        }
        var oTestSpace = jqTestSpace.detach();
        jqTestArea.append(oTestSpace);
        jqTestArea.find("div#testSpaceContainer").show();
        return true;
    }
    moveTestSpace();

    return jqTestSpace.children().first();
}