Как мы можем выполнить Unit Tests против DOM-манипуляции?

Вступление к QUnit над netTuts.com порождает интересный обмен (никогда не разрешенный) по поводу применения модульных тестов против действий, которые манипулируют DOM. Следующая цитата (Alex York) попадает в суть:

Что было бы хорошо, если бы вы такая функция:

function add (a, b) {var result = a + б; $( "Вход # ResultTestBox" ) Вал (результат);.

В вышеприведенном тесте я хотел бы проверьте две вещи: добавление a и b, и результат, правильно поставленный в элемент DOM. мне бы очень хотелось проверьте второе, предоставив некоторый макет HTML. Возможно ли это?

Но, как я сказал... неразрешен. Разрешимы?

Ответ 1

Последняя версия QUnit поддерживает элемент #qunit-fixture, который позволяет добавлять HTML на веб-страницу QUnit.

Например, в вашем HTML:

<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>

и в вашем JavaScript:

$('<input id="ResultTestBox" type="text"/>').appendTo('#qunit-fixture');
var result = add(a, b);

equals(result, $('input#ResultTestBox').val(), "testing result box value");

Ответ 2

Несомненно, вам действительно нужно, чтобы метод val вызывался на возвращаемое значение $("input#ResultTestBox") - вам не нужно проверять функциональность самого метода jQuery. Почему бы не ввести макетную реализацию объекта jQuery и не протестировать его?

Ответ 3

Вы можете запустить их в env.js, если вам не нужны проблемы с созданием песочниц html-страниц для всех ваших тестов.