Тестирование Javascript, который управляет DOM - PullRequest
Новая
       8

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

32 голосов
/ 16 сентября 2009

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

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

похоже, что тестирование положения / цвета / и т. Д. Элементов 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;
}

Я чокнутый? Как это должно быть сделано?

edit : суть вопроса:

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

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

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

Ответы [ 5 ]

16 голосов
/ 19 сентября 2009

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

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

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

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

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

3 голосов
/ 17 сентября 2009

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

1 голос
/ 17 сентября 2009

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

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

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

0 голосов
/ 18 декабря 2010

Я тестирую AJAX, как это:

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

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

...