Тестирование Javascript на стороне клиента

Question

я написал в реальное время приложения, которое расслоение плотного имеет следующий стек:

1. Node.js для сервера
2. Socket.io как слой связи
3. JQuery на переднем конце манипулировать dom и т. д.

Для № 1 у меня нет проблем с тестированием. В настоящее время я использую nodeunit, который выполняет фантастическую работу.

Для # 3 у меня есть небольшая проблема, пытаясь выяснить мой подход к тестированию.

Моя сторона браузера код, как правило, что-то вроде этого:

var user = { 
    // Rendered by html 
    id: null, 
    roomId: null, 
    foo: null, 

    // Set by node server. 
    socket: null, 
    clientId: null, 
    ... 
} 

$('button#ready').click(function() { 
    socket.emit('READY'); 
}); 

socket.on('INIT', function(clientId, userIds, serverName) { 
    user.clientId = clientId; 
    user.foo = (serverName == 'bar') ? 'bar' : 'baz'; 
}); 

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

т.е. user.foo = (serverName == 'bar')? «бар»: «база»;

Какие-либо хорошие рекомендации о том, как подойти к этому?

Answer 1

Как и поддержка Pivotal для жасмина, это бит и промах (минимальная новая разработка, множество неотвеченных проблем/pull-запросов на их github), Jasmine - действительно хороший инструмент для тестирования клиентского кода, главным образом потому, от jasmine-jquery.

Общий подход Jasmine довольно прочный, и Jasmine-Jquery имеет множество отличных помощников для тестирования DOM, а также великолепную песочницу DOM.

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

Как правило, вы должны подходить к тестированию на стороне клиента как нечто «нечеткое», так как тестирование иерархии DOM - это путь к аду. Протестируйте такие вещи, как «Содержит ли страница эти слова» над «Имеет ли div id # my-div содержимое ul с 3 li с содержимым, которое соответствует этому регулярному выражению»

Последнее, что я начал делать тесты, но нашел его невероятно трудоемкий и хрупкий; если дизайнер (я) захочет возиться со структурой, он мог бы излишне разбить многие тесты. Единственный способ обойти это - создать «виджеты» для каждого компонента, что было бы идеальным, но, как я уже сказал, очень много времени, на самом деле это стало шуткой в ​​моем офисе: «Сколько тестов вы сделали на этой неделе Тим? 2? 3? Вау 3 теста. Хорошая работа ».

Во всяком случае ...

Вы можете получить 90% в пользу делать на стороне клиента тестирования путем тестирования свободно, и сосредоточиться на том, что важно, например, процесса и данных «присутствия» над конкретным содержанием в определенном месте иерархию на странице.

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

Редактирование 2: Вы можете посмотреть, как мир Rails делает это с помощью Capybara/Cucumber или Selenium.

Answer 2

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

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

YMMV однако, поскольку Zombie полагается на JSDOM (повторная реализация DOM в Javascript). Есть грубые края на еще исправлены/исправлены, перерывы в работе. Если это проблема, запустите Mocha в браузере, используя настоящие браузеры (возможно, используя Selenium).