Как проверить объект DOM в qUnit? - PullRequest
Новая
       12

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

11 голосов
/ 01 октября 2011

Я тестирую немного JavaScript с помощью qUnit. В одном объекте я передаю элемент DOM, и некоторые методы изменят некоторые свойства элемента.

Как я могу смоделировать объект DOM в qUnit?

Я бы хотел использовать независимое от браузера решение, так как я тестирую также приложения XUL.

Ответы [ 2 ]

7 голосов
/ 01 октября 2011

Вы всегда можете создать элемент в 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");
});
3 голосов
/ 01 апреля 2012

У меня была такая ситуация, когда я хотел создать модульный тест для написанного мной плагина JQuery, который обеспечивает простую базовую возможность расширения дерева. Я нашел способ создания фиктивной позиции (элемент «LI») с помощью метода «ОК» QUnit и вставки тестового DOM как дочернего элемента этого элемента списка. Таким образом, получающийся в результате манипулированный DOM можно исследовать путем расширения теста. Также, если тест не пройден, управляемые элементы DOM будут автоматически отображаться системой QUnit. Результирующий вывод QUnit выглядит следующим образом:

QUnit test output

Мое решение этой проблемы состояло в том, чтобы создать функцию под названием «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» определяет позицию с использованием метода «ok» QUnit, но изначально создает объекты 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();
}
...