Тестирование вашего приложения внутри iframe может работать.

Я обнаружил, что это Лучше придерживаться парадигмы Model-View-Presenter (MVP) (только на стороне клиента) вместе с разбивкой компонентов пользовательского интерфейса на удобоваримые фрагменты, чтобы иметь возможность тестировать каждый компонент внутри его собственной страницы «драйвера». Большая часть логики находится внутри Presenter (s), которые представляют собой чистый JavaScript и поэтому могут быть протестированы с помощью модульных тестов на чистом JavaScript. Отдельные компоненты пользовательского интерфейса можно протестировать с помощью фреймворка, такого как Selenium, и их тестирование будет просто гарантировать, что они отправляют правильные события в Presenter. Модель также можно сделать тестируемой как чистый JavaScript, если часть доступа к бэкэнду вставлена ​​в какой-то класс Fetcher.

Возможно, стоит рассмотреть Selenium и запустить несколько автоматических тестов на уровне браузера.

Конечно, в идеальном мире вы бы работали с фреймворком модульного тестирования на уровне кода, но, учитывая, что это может включать в себя много предварительной доработки, надежным компромиссом может быть проверка того, что javascript действительно делает то, что вам нужно, чтобы использовать Selenium или аналогичный фреймворк.

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

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

Вот эта идея в очень простом примере.

test('My tests', function () {
    var testSubj = $('<div>This <b>is</b> my <span>test subject</span></div>');

    ok(testSubj.children('span') == 'test subject', 'Span is correct');
});

В зависимости от кода вам могут потребоваться два подхода:

1. Код, который может быть протестирован модулем. Есть некоторый Javascript, который достаточно независим, чтобы вы могли использовать JSUnit для его тестирования с минимальным количеством HTML-разметки. В некотором смысле эта разметка является данными вашего тестового прибора.

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

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

Их недостатком является то, что они, как правило, медленнее работают, их труднее обслуживать или они хрупкие.

Ссылка на браузер visibone предлагает нечто, что они называют «напористостью». В основном это дает предложение о том, как реализовать модульное тестирование для JavaScript. На самом деле это довольно просто.

См. Нижнюю правую часть ссылки на следующее изображение:

http://www.visibone.com/products/ebk8-9_850.jpg

Подведем итог:

Создайте function assert ():

function assert(fact, details){
    if (!fact) alert("Assert failure: " + details);
}

И вы могли бы назвать это примерно так:

assert((parseInt("1") == 1), "Check string '1' is equal to integer 1");

Или, возможно, с лучшим сравнением ===:

assert((parseInt("1") === 1), "Check string '1' is equal to integer 1");

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

Я выполнил поиск в Google по запросу «JavaScript assert» и получил довольно много ссылок, так что, возможно, стоит проверить себя.

Итак, вы, кажется, спрашиваете о двух видах тестов. Один из них - это модульное тестирование написанного вами кода, который использует jquery. Ответ на этот вопрос намного проще, чем все думают. Просто имитируйте jquery в своих модульных тестах. Это действительно просто и работает почти так же, как вы делаете насмешки на любом другом языке программирования. За исключением того, что легко обойтись даже без фреймворка в javascript. На самом деле я запускаю такие тесты в автоматизированном наборе тестов, используя Test.TAP и rhino для своих проектов. Браузер не требуется.

Другой вид теста - это интеграционный или регрессионный тест. Здесь на помощь приходит такой инструмент, как селен. Эти тесты проводятся в вашем реальном приложении и предназначены для того, чтобы убедиться, что все части работают вместе так, как вы ожидаете. Браузер, JQuery, ваш javascript и веб-сервер. Разделение этих двух видов тестов в уме - ключ к созданию набора тестов для кода javascript. В идеале вы должны запустить эти тесты в нескольких браузерах (возможно, даже в нескольких конфигурациях браузеров).

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

Теперь, когда вы установили механизм шаблонов , вы можете использовать исходный макет и добавить небольшой маркер, куда вы можете вставить тег