Однако бывают ситуации, когда браузер оказывается не нужен, и можно обойтись его упрощенной эмуляцией.
Дальше в статье кратко опишу подходы с минимальным окружением или без оного (PhantomJs, ZombieJS, чистый Node.js), а так же подход с запуском тестов в браузере (jsTestDriver, Testacular).
Без браузера
PhantomJS

Одно из самых популярных решений является phantomjs. Автор заверяет, что веб-приложение в phantomjs выполняются быстрее чем в браузере. Что и не удивительно phantomjs не выводит картинку, однако не смотря на это можно обращаться к dom-у. И делать простое ui-тестирование.
Плюсы:
- встроен в TravisCI;
- быстрый;
- легко добавляется в IDE (Sublime, Webstorm).
- нет необходимости ставить браузеры;
Минусы:
- все таки это WebKit и многие проблемы с IE и другими браузерами, пройдут мимо тестов на phantom.js.
Добавить поддержку PhantomJS в Sublime

где написать:
{ "cmd": ["<your-path-to-phantomjs>/phantomjs.exe", "$file"] }
Подключение Jasmine в PhantomJS
в примерах (phantom.js) есть подходящий js-файл, который можно использовать для запуска jasmine тестовrun-jasmine.js
На данный момент coffee версия неактуальна.
larrymyers/jasmine-reporters - альтернатива
Запуск тестов
- загрузить;
- запустить: phantomjs %filenameSpecs%.js
Узнать больше
- http://habrahabr.ru/post/141165/ - Тестирование компонентов и приложений ExtJS/Sencha с использованием движка PhantomJS.
- http://habrahabr.ru/post/135979/ - PhantomJS + JSCoverage + QUnit или консольные JS юнит-тесты с подсчетом покрытия
- http://devnet.jetbrains.net/message/5467095?tstart=0 - подключить Phantom.js к Webstorm.
- http://www.sterlingdemille.com/thumbmaker.html - делать screenshot-ы с сайта.
ZombieJS

"Безумно быстрый, безголовый браузер на Node.js"
Может работать с html5, DOM level3, CSS3 Selectors, XMLHttpRequest, alert, confirm, prompt и т.д..
Написан на Coffee Script и его код автоматически тестируется на TravisCI. Развивается стремительно, и имеет всего лишь в 2-ем меньшую аудиторию чем phantomJS.
Плюсы
- очень быстр;
- эффектное название :);
- частично реализует функционал браузера;
Минусы
- нужен node.js;
- "безголовый" - многие фишки браузера не протестируешь;
Запуск тестов
- загрузить и поставить Node.js;
- загрузить: npm install zombie;
- запустить: node %filenameSpecs%.js
Узнать больше
- http://omar.gy/how-i-ended-up-enjoying-javascript/ известный flex-разработчик Omar Gonzalez описывает свой опыт работы с ZombieJS в комплекте с Cucumber.js.
- Zombie.js vs PhantomJS - имхо: выбор - дело вкуса.
Node.js

Если код не работает с DOM, и вы уверены что все функции и конструкции, используемые вами работают нормально, можно запускать тесты в node.js. Для чего хорошо подходят фреймворки вроде Mocha, Jasmine-node.
Плюсы
- легко настроить если у вас уже есть node.js;
- есть возможность натравить библиотеку тестирования на папку со скриптами, и не добавлять каждый файл отдельно;
Минусы
- без дополнительных библиотек нет возможности тестировать код, связанный с DOM;
Узнать больше
- David Klassen - Web разработка на node.js и express. Глава 2 — тестирование приложения. // используется Mocha.
Запуск тестов
Настраивается package.json (для jasmine-node):{ "devDependencies" : { "grunt" : "0.3", "requirejs" : "2", "jasmine-node" : "*" }, "scripts": { "test": "node test/test.js" } }
После чего тесты запускаются командой:
npm test
Такой подход используется в less.js (самописные функции тестирования), cucumber-js (jasmine-node).
С браузером
Зачем нужно тестировать в браузере?
Javascript очень повезло с DOM, т.к. именно за счет его (DOM) структурированности, в тестах можно проверять поведение кода на реальном UI. И таким образом полнее покрывать код тестами. А также писать тесты в стиле Behavior-driven development, т.е. быть ближе к пользовательским потребностям.JsTestDriver
http://code.google.com/p/js-test-driver/
Проект Google, на странице есть короткое, но очень замечательно видео - JsTestDriver in action (en), о составлении простого - helloWorld теста, подключении jsTestDriver локально и подключении его к Eclipse.
Можно использовать адаптеры. Для запуска QUnit и Jasmine.
Так же можно настроить интеграцию с WebStorm, после чего тесты станет удобно запускать прямо из IDE.

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

Потдержка IDE, часто есть весомый аргумент в использовании инструмента, однако Angular.js почему-то разработали свое решение.
Плюсы
- хорошая документация;
- зрелая библиотека с устоявшимся API;
- отлично интегрируется с IDE;
Минусы
- не на github;
- говорят работает не стабильно;
- нужна JVM;
Запуск тестов
- загрузить: googlecode;
- запустить: java -jar JsTestDriver.jar --port 9876 --browser firefoxpath,chromepath
Узнать больше
- вся необходимая информация есть на официальном сайте;
Testacular

Разработал Vojta Jína из команды AngularJS, т.е. опять же Google. Интересно, что Misko один из авторов Angular.js участвовал так же в разработке jsTestDriver. Главная причина создания testacular - создание стабильной среды тестирования. Не понятно, почему они не смогли улучшить уже существующий JsTestDriver. Кстати в отличии от JsTestDriver, который написан на Java - Testacular написан полностью на javascript.
Плюсы
- "из коробки" следит за изменением файлов, и перезапускает тесты на изменение.
- есть адаптеры для популярных unittest библиотек: Jasmine, Mocha.
- по заверению автора работает очень стабильно;
- поддерживает браузеры: Chrome, Chrome Canary, Firefox, IE, Opera, Safari (не нашел можно ли запускать тесты на мобильном браузере);
- написан на JavaScript и размещен на github - а значит его легко будет исправить дописать;
Минусы
- требует Node.js;
- не устоявшееся API, даже видео-обзор на сайте уже не актуален;
- мало простых примеров;
Узнать больше
- Видео Testacular - JavaScript Test Runner, где можно убедиться, что подключиться Testacular к WebStorm IDE достаточно просто, как впрочем и к Sublime.
- Кратко упоминается в выпуске посвещенном Angular.js в подкасте javascriptjabber.
- https://github.com/vojtajina/testacular/issues/49 - запуск testacular в TravisCI.
Как запустить Testacular?
Достаточно просто:- устанавливаем testacular: npm install -g testacular.
- создаем config файл: testacular init;
- выбираем поддержку нужной библиотеки unittest-ов. В моем случае это был jasmine;
- добавляем наши исходники и тесты в config, files: src/, 'test//Spec.js'.
- запускаем тесты: testacular start;
Итог
Возможно что-то упустил, если не сложно, укажите об этом в комментариях. В обзоре нет Selenium, т.к. его используют для функционального, автоматизированного тестирования.Общий вывод очевиден - для логики приложения хорошо использовать PhantomJS/ZombieJS - т.к. эти тесты запускаются быстрее. Для приложения, работающего с DOM, просто необходимо использовать реальные браузеры, поэтому без jsTestDrive или Testcular не обойтись.
В следующий раз сделаю обзор библиотек для UnitTesting.
Links
- Подкаст JavaScript Jabber (eng) №9 Testing Javascript с Joe Eames.
- кратко на wikipedia
Комментариев нет:
Отправить комментарий