Подтвердить что ты не робот

Тестирование Javascript, который манипулирует DOM

Я изучал javascript-тесты, и я нашел QUnit, чтобы быть очень интересным. Я понимаю, как тестировать вычислительный код, но...

Как вы тестируете приложения javascript, написанные в основном для манипуляций с DOM?

кажется, что тестирование позиции/цвета/etc элементов DOM было бы спорным, потому что вы в конечном итоге сделали бы что-то вроде этого:

$("li.my_element").css("background-color", "#f00");

а затем в вашем тесте...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

это просто не кажется правильным, потому что в основном это делает:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

Я орехи? Как это должно быть сделано?

изменить: сердце вопроса:

Я предполагаю, что я получаю, мне нужно убедиться, что код не сломался до развертывания, но подавляющее большинство из них - помощники пользовательского интерфейса и ajax. Как проверить правильность отображения вещей?

Несколько примеров:

  • проверьте, что диалог JQuery UI появляется поверх всех других элементов
  • проверьте, что drag-n-drop работает нормально
  • проверьте, что цвет droppable изменяется при удалении элемента на нем.
  • проверьте, что ajax работает нормально
  • проверьте, что нет посторонних запятых, которые сломают IE
4b9b3361

ОТВЕТЫ

Ответ 1

Я нашел тесты Javascript/DOM, особенно для простых взаимодействий, которые вы описываете, не так полезны. Вы будете проверять, что все настроено правильно, и поскольку jQuery является настолько декларативным, ваши тесты очень похожи на ваш код.

Мое настоящее мышление заключается в том, что если вы пишете более крупные компоненты JS, имеет смысл вытащить набор взаимосвязанных действий как в плагин jQuery, так и в набор тестов для него.

Но из приведенных вами примеров кажется, что вы действительно ищете уровень защиты на своем интегрированном веб-сайте. Инструмент вроде Selenium, вероятно, будет более мощным и подходящим для вас. В частности, он

  • может быть автоматизирован
  • может работать с несколькими браузерами, включая IE
  • работает в контексте вашего веб-приложения и страниц, поэтому drag-n-drop можно протестировать там, где это действительно происходит, а не в какой-либо тестовой среде.
  • AJAX может быть протестирован

Ответ 2

Вместо проверки функции jQuery css. Ваш тест должен высмеять функцию css и убедиться, что он вызывается только один раз с правильным цветом. Проверенный код должен быть вашим, а не фреймворками.

Ответ 3

В дополнение к тому, что говорит Джейсон Харвиг, я бы сказал, что модульное тестирование - это тест, чтобы убедиться, что код запускается, как ожидалось. Если вы хотите проверить это, тогда Джейсон абсолютно прав, как вы должны это делать. Если вы хотите запустить тесты, чтобы проверить, что происходит манипуляция DOM (тестирование UI), а не фактический код, выполняющий манипуляцию DOM (модульное тестирование), тогда вы можете проверить что-то вроде Selenium, WatiN или Watir.

Ответ 4

Я предполагаю, что многие люди проверяют визуально: то есть они смотрят на свой вывод браузера на свой монитор, чтобы увидеть, похоже ли, что DOM управлялся, как ожидалось.

Если это должен быть автоматический тестовый пример (например, для регрессионного тестирования), то, возможно, они записывают вывод (например, захват экрана) и делают что-то вроде сравнения двух скриншотов, чтобы увидеть, одинаковы ли результаты.

Вместо захвата снимка экрана вы можете просто захватить всю DOM и сравнить бок о бок с захваченными деревьями DOM (которые могут быть менее подвержены ошибкам, сравнивая пиксели).

Ответ 5

Я тестирую материал AJAX следующим образом:

  • Сделать вызов AJAX
  • Настройка таймера JavaScript
  • Проверьте DOM, чтобы увидеть, произошли ли ожидаемые изменения.

Теперь может случиться так, что вызов AJAX не был возвращен до вашего чека, но это также полезная тестовая информация; с вызовом AJAX, есть (обычно) некоторое время, после которого мы будем называть его провалом. В качестве примера, если мы делаем всплывающее подсказку, и потребовалось 30 секунд, чтобы вернуться, это не работает.