Как протестировать объект DOM в qUnit?

Ответ 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");
});

Ответ 2

У меня была такая ситуация, когда я хотел создать unit test для плагина JQuery, который я написал, который обеспечивает простое базовое расширение дерева. Я нашел способ создания фиктивной позиции (элемент "LI" ) с помощью метода QUnit "ok" и вставить тестовую DOM в качестве дочернего элемента этого элемента списка, таким образом полученный обработанный DOM можно проверить, расширив тест. Кроме того, если тест завершился неудачно, управляемые элементы DOM будут автоматически отображаться системой QUnit. Результат 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();
}