Написание "единичного тестируемого" кода jQuery?

До сих пор я был использован для записи всего своего кода внутри функции ready(), например:

$(document).ready(function() {
  // all my code
});

Теперь я вижу, что при таком подходе мой код не является "единичным тестируемым", например. Я не могу получить доступ к материалам внутри ready() из QUnit.

Каков правильный способ структурирования кода jQuery, который совместим с использованием функции ready() и может быть протестирован?

Есть ли хорошая база исходного кода или проект для изучения и изучения?

Ответ 1

Попросите свой код в готовом обработчике просто вызвать функции вне готового обработчика:

$(document).ready(function() {
  // call some functions outside of handler
});

// most of my code

Таким образом, вы можете также вызвать эти функции для модульного тестирования.

NB, есть короткий заголовок для $(document).ready:

$(function() {
  // call some functions outside of handler
});

// most of my code

Ответ 2

Я вижу два подхода.

Поместите код QUnit внутри документа, готового к запуску после вашего собственного кода.
Поместите свой код в модуль.

Вариант № 2 выглядит следующим образом:

var MyModule = (function() {
    // Your code
}());

$(document).ready(function() {
    // Quit tests, referring to MyModule.xxx
});

В опции №2 верно, что вы не получаете доступ к закрытым элементам модуля.

Бен Черри говорил об этом некоторое время назад в http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript, где он фактически сделал спорный комментарий о конфиденциальности на закрытии из-за его влияния на модульное тестирование.

Ответ 3

Одним из наиболее эффективных подходов является структурирование вашего кодирования с использованием JS " namespaces", и действительно, вы можете получить отличный пример из ядро jQuery.