пятница, 30 ноября 2012 г.

Libs / UnitTesting для Javascript - Окружение (RU)

Главной особенностью модульного тестирования веб-приложений, -- необходимость воссоздания окружения - т.е. браузера. Это конечно не касается приложений написанных для node.js, там все проще.

Однако бывают ситуации, когда браузер оказывается не нужен, и можно обойтись его упрощенной эмуляцией.

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


Без браузера

PhantomJS



PhantomJS.
Одно из самых популярных решений является phantomjs. Автор заверяет, что веб-приложение в phantomjs выполняются быстрее чем в браузере. Что и не удивительно phantomjs не выводит картинку, однако не смотря на это можно обращаться к dom-у. И делать простое ui-тестирование.

Плюсы:

  • встроен в TravisCI;
  • быстрый;
  • легко добавляется в IDE (Sublime, Webstorm).
  • нет необходимости ставить браузеры;

Минусы:

  • все таки это WebKit и многие проблемы с IE и другими браузерами, пройдут мимо тестов на phantom.js.

Добавить поддержку PhantomJS в Sublime

Sublime
где написать:

{
"cmd": ["<your-path-to-phantomjs>/phantomjs.exe", "$file"]
}

Подключение Jasmine в PhantomJS

в примерах (phantom.js) есть подходящий js-файл, который можно использовать для запуска jasmine тестов
run-jasmine.js
На данный момент coffee версия неактуальна.
larrymyers/jasmine-reporters - альтернатива

Запуск тестов

  1. загрузить;
  2. запустить: phantomjs %filenameSpecs%.js

Узнать больше

ZombieJS



Zombie
"Безумно быстрый, безголовый браузер на Node.js"
Может работать с html5, DOM level3, CSS3 Selectors, XMLHttpRequest, alert, confirm, prompt и т.д..
Написан на Coffee Script и его код автоматически тестируется на TravisCI. Развивается стремительно, и имеет всего лишь в 2-ем меньшую аудиторию чем phantomJS.

Плюсы

  • очень быстр;
  • эффектное название :);
  • частично реализует функционал браузера;

Минусы

  • нужен node.js;
  • "безголовый" - многие фишки браузера не протестируешь;

Запуск тестов

  1. загрузить и поставить Node.js;
  2. загрузить: npm install zombie;
  3. запустить: node %filenameSpecs%.js

Узнать больше

  1. http://omar.gy/how-i-ended-up-enjoying-javascript/ известный flex-разработчик Omar Gonzalez описывает свой опыт работы с ZombieJS в комплекте с Cucumber.js.
  2. Zombie.js vs PhantomJS - имхо: выбор - дело вкуса.

Node.js


Node.js
Если код не работает с DOM, и вы уверены что все функции и конструкции, используемые вами работают нормально, можно запускать тесты в node.js. Для чего хорошо подходят фреймворки вроде Mocha, Jasmine-node.

Плюсы

  • легко настроить если у вас уже есть node.js;
  • есть возможность натравить библиотеку тестирования на папку со скриптами, и не добавлять каждый файл отдельно;

Минусы

  • без дополнительных библиотек нет возможности тестировать код, связанный с DOM;

Узнать больше

Запуск тестов

Настраивается 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/
js test driver
Проект Google, на странице есть короткое, но очень замечательно видео - JsTestDriver in action (en), о составлении простого - helloWorld теста, подключении jsTestDriver локально и подключении его к Eclipse.
Можно использовать адаптеры. Для запуска QUnit и Jasmine.
Так же можно настроить интеграцию с WebStorm, после чего тесты станет удобно запускать прямо из IDE.
js test driver on webstorm
из коробки есть возможность посчитать покрытие тестами, а также включается подсветка протестированных строк.
js test driver on webstorm, highlighting
Потдержка IDE, часто есть весомый аргумент в использовании инструмента, однако Angular.js почему-то разработали свое решение.

Плюсы

  • хорошая документация;
  • зрелая библиотека с устоявшимся API;
  • отлично интегрируется с IDE;

Минусы

  • не на github;
  • говорят работает не стабильно;
  • нужна JVM;

Запуск тестов

  1. загрузить: googlecode;
  2. запустить: java -jar JsTestDriver.jar --port 9876 --browser firefoxpath,chromepath

Узнать больше

Testacular



Testcular
Разработал 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?

Достаточно просто:
  • устанавливаем testacular: npm install -g testacular.
  • создаем config файл: testacular init;
  • выбираем поддержку нужной библиотеки unittest-ов. В моем случае это был jasmine;
  • добавляем наши исходники и тесты в config, files: src/, 'test//Spec.js'.
  • запускаем тесты: testacular start;
Теперь при любом изменении файлов указанных в files у нас будут перезапускаться тесты.

Итог

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

Общий вывод очевиден - для логики приложения хорошо использовать PhantomJS/ZombieJS - т.к. эти тесты запускаются быстрее. Для приложения, работающего с DOM, просто необходимо использовать реальные браузеры, поэтому без jsTestDrive или Testcular не обойтись.

В следующий раз сделаю обзор библиотек для UnitTesting.

Links

Комментариев нет:

Отправить комментарий

Press Any Key...