О том как установить и запустить Protractor уже было в этом посте – Тестируем AngularJS используя Protractor. А сейчас мы сделаем фокус  на том, как мы можем интегрировать Protractor в нашу систему и подкючить к Grunt.

Подключаем Protractor к Grunt

Для подключение нам необходимо поставить специальный таск-плагин grunt-protractor-runner к grunt путем выполнения следующей команды:

$ npm install grunt-protractor-runner

После чего можем дополнить наш конфигурационный файл секцией для него:

[javascript]
protractor: {
options: {
configFile: "protractor.conf.js"
},
all: {}
}
[/javascript]

protractor.conf.js – конфигурационный файл, который уже у нас есть (создание подробно описано в предыдущем посте)

all: {} – grunt требует как минимум один “target”, поэтому, если все параметры уже указаны в конфиге протрактора, то можем просто добавить пустую сецию.

Проверим что мы все правильно настроили и команда выполняется без ошибок:

[bash]
$ grunt protractor:all
[/bash]

PhantomJS и Protractor

В случае, когда мы хотим запускать наши тесты не только локально, но и на сервере, где нет возможности использовать браузер на помощь спешит PhantomJS. Ознакомиться с PhantomJS вы можете в посте – Создаем юнит-тесты с phantomjs, а сейчас мы поговорим о том как его встроить в Protractor.

Теперь вместо вебдрайвера мы должны запустить фантом-сервер:

$ phantomjs --webdriver=4444

а наша секция grunt конфига преобразиться следующим образом:

[javascript]
protractor: {
options: {
configFile: "protractor.conf.js"
},
all: {
options: {
args:{
seleniumAddress: ‘http://localhost:4444’,
capabilities: {
browserName: ‘phantomjs’
}
}
}
}
}
[/javascript]

иногда бывает необходимо специфицировать конкретную версию/путь к phantomjs, тогда добавляем еще одну опцию – phantomjs.binary.path, а аргументы к фантому можем передавать через опцию phantomjs.cli.args; итого получим:

[javascript]
protractor: {
options: {
configFile: "protractor.conf.js"
},
all: {
options: {
args:{
seleniumAddress: ‘http://localhost:4444’,
capabilities: {
browserName: ‘phantomjs’,
‘phantomjs.binary.path’:’./node_modules/.bin/phantomjs’,
‘phantomjs.cli.args’: [‘–ignore-ssl-errors=true’, ‘–web-security=false’]
}
}
}
}
}
[/javascript]

Если мы хотим, чтобы вебдрайвер запустил фантом за нас, то просто не указываем параметр seleniumAddress.

Отладка тест-сценариев в WebStorm

Пару слов о том как можно дебажить тесты в WebStorm. Что для этого нужно сделать:

Открываем настройки Run/Debug:

Добравляем новую конфигурацию для Node.js:

Прописываем следующие ключевые настройки:

• Working directory: корневой путь вашего проекта (например: ‘/Users/stevermeister/workspace/academy-js’)
• JavaScript file: путь к cli.js файлу протрактора (как правило это node_modules\protractor\lib\cli.js)
• Application parameters: путь к файлу конфиг файлу протрактора(например: protractor.conf.js)

Сохраняем. Готово:

Теперь можно проставлять бреймпоинты и дебажить.

Подключение вспомогательных файлов

Иногда возникает необходимость подключить файлы, которые не являются тест сценариями, но, в которых содержится вспомогательный функционал(например логин). Для этого необходимо подключаем файл сделать формата модуля node.js (module.exports), то есть(helpers.js):

[javascript]
function login(){
//…
}
function logout(){
//…
}
var Helper = {};
Helper.login = login;
Helper.logout = logout;
[/javascript]

и потом подключить в файле сценария:

[javascript]
var helpers = require(‘./helpers’);
helpers.login();
[/javascript]

Для тех, кто ранее не работал с таким синтаксисом, подчеркну: расширение “.js” в данном случае не пишется.

Примеры тест сценариев

Авторизация пользователя в приложении:

[javascript]
describe(‘Auth Module’, function() {
var ptor = protractor.getInstance();

it(‘should login user’, function() {
browser.get(‘/login’);
browser.waitForAngular();

element(by.model(‘username’)).sendKeys(browser.params.login.user);
element(by.model(‘password’)).sendKeys(browser.params.login.password);
element.all(by.css(‘.button–primary’)).first().click();

element(by.binding(‘user.name’)).getText().then(function(username) {
expect(username).equal(browser.params.login.username);
});
ptor.getCurrentUrl().then(function(url) {
expect(url.slice(-10)).equal(‘/dashboard’);
});
});
});
[/javascript]

Параметры типа пароля в тестах, понятное дело лучше не держать. Здесь они вынесены в отдельную секцию конфига протрактора (да, согласен, тоже не комильфо, но всеравно лучше, чем прям в тестах):

[javascript]
params: {
login: {
user: ‘stepan@mail.com’,
password: ‘XXXXXXXXX’,
username: ‘Stepan Suvorov’
}
}
[/javascript]

Покупка продукта

[javascript]
describe(‘Purchase item’, function() {
var ptor = protractor.getInstance();

beforeEach(function() {
helpers.logout();
helpers.login();
browser.sleep(3000);
});

it(‘should purchase an item’, function() {

browser.get(‘/items/552/buy’);
browser.sleep(3000);
element(by.css(‘.modal-window__block .button–primary’)).click();

ptor.ignoreSynchronization = true;

element(by.css(‘#mainSubmit’)).click();
element(by.css(‘input[type="submit"]’)).click();

ptor.ignoreSynchronization = false;
});
});
[/javascript]

хотел бы отметить очень важный момент в этом куске кода:

[javascript]
ptor.ignoreSynchronization = true;
[/javascript]

этим мы говорим протрактору, что мы покидаем приложение и переходим на страницу без AngularJS.

Поиск по каталогу

[javascript]
describe(‘Search’, function() {
it(‘should do search’, function() {

browser.get(‘/items’);
element(by.model(‘itemsSearch.query’)).sendKeys(‘iBrick’, protractor.Key.ENTER);

element.all(by.repeater(‘item in items’)).then(function(rows) {
var itemTitleElement = rows[0].element(by.className(‘item-tile__name’));
itemTitleElement.getText().then(function(itemTitle) {
expect(itemTitle).equal(‘iBrick Plus’);
})

});
});
});
[/javascript]

Дополнительно

• Protractor Interactive (видео от Egghead)
• Развернутый ответ на стеке по поводу возможных ошибок

Подготовительные действия

• ставим тест-драйвер Karma
• определяемся и подключаем к проекту тест-фреймворк (варианты Mocha, Jasmine)
• подключаем к проекту вспомогательную библиотеку angular-mocks

Написание сценария

подключаем Angular-модуль:

[javascript]beforeEach(module(‘myapp’));[/javascript]

подключаем шаблон (предварительно скомпилированный с помощью html2js):

[javascript]beforeEach(module(‘path/to/template’));[/javascript]

инжектим сервисы:

[javascript]
var $timeout, $rootScope;
beforeEach(inject(function(_$timeout_, _$rootScope_){
$timeout = _$timeout_;
$rootScope= _$rootScope_;
}));[/javascript]

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

либо инжектим инжектор и с помощью него уже получаем сервисы:

[javascript]
var $timeout, $rootScope;
beforeEach(inject(function($injector){
$timeout = $injector.get(‘$timeout’);
$rootScope= $injector.get(‘$rootScope’);
}));[/javascript]

для создания нового $scope делаем:

[javascript]
var $scope = $rootScope.$new()
[/javascript]

компиляция директивы для тестирования:

[javascript]
var element = $compile(‘<my-directive></my-directive>’)($scope);
[/javascript]

при этом не забываем инжектить сервис $compile

получение изолированного $scope:

[javascript]
var isolatedScope = element.children().scope()
[/javascript]

либо (работает начиная с версии 1.2):

[javascript]
var isolatedScope = element.isolateScope()
[/javascript]

чтобы запустить все колбэки в таймАут-сервисах:

[javascript]
$timeout.flush()
[/javascript]

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

[javascript]
scope.$apply();
[/javascript]

если что-то забыл – пиши в комментариях – дополню.

UPD:

подмена сервисов (замена мок-вариатом):
[javascript]
beforeEach(module(function ($provide){
$provide.service(‘SameNameWithRealService’, function(){
//код вашего мок-сервиса
});
}));
[/javascript]

использование “шпионов” для проверки вызова методов:
[javascript]
//переопределение внутреннего метода
$scope.someMethod = sinon.spy();
//вызов внешнего метода, который должен вызвать первый
$scope.someOtherMethod()
//проверка
expect($scope.someMethod.called).equal(true);
[/javascript]
 

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

* Правильное произношение слова: “мока“.

Установка

Достаточно выполнить следующую команду

$ npm install -g mocha

Проверяем установку

$ mocha --version
1.14.0

Простой пример

По умолчанию Mocha запускает тесты из директории test, поэтому создадим такую директорию, а в ней test.js:

var assert = require("assert")
     describe('#indexOf()', function(){
         it('should return -1 when the value is not present', function(){
             assert.equal(-1, [1,2,3].indexOf(5));
             assert.equal(-1, [1,2,3].indexOf(0));
}) })

Теперь выполним

$ mocha test
1 passing (3ms)

Синтаксис

В базовом синтаксисе тестов на Mocha все стандартно: начинаются с describe();, сами тесты в it(); , которые находятся внутри describe(). Также, в случае большого количества блоков, мы можем группировать describe() друг в друга.

Так же доступны хуки: before(), after(), beforeEach(), и afterEach(). Хуки так же должны быть описаны внутри блока describe().

Asset библиотеки

Mocha позволяет использовать на выбор библиотеку/стиль для сравнений:

• should.js BDD style
• expect.js
• chai expect(), assert() and should style assertions
• better-assert

Асинхронные тесты

Идея ассинхронных тестов на mocha заключается в том, что мы передаем дополнительный callback-параметр done, который выполняем в случае успешного прохождения:

describe('User#save()', function(){
    it('should save without error', function(done){
         var user = new User('Luna');
         user.save(function(){
            done();
         });
    })
})

Все хуки ( before(), after(), beforeEach(), afterEach()  ) также поддерживают асинхронную модель поведения:

beforeEach(function(done){
       db.clear(function(){
         done();
})})

Логирование

Поддерживается стандартный метод console.log(), который выведет параметр на экран консоли при запуске тестов.

Постоянное выполнение тестов

Можно запускать Mocha как одноразово, так и в режиме постоянного тестирования в ожидании изменений. Для второго варианта указываем флажок watch:

$ mocha --watch

Генераторы отчетов

Mocha богат в выборе стиле отчетов:

• Dot Matrix – по умолчанию
• Spec
• Nyan
• TAP
• Landing Strip
• List
• Progress
• JSON
• JSON Stream
• JSONCov
• HTMLCov
• Min
• Doc
• XUnit
• TeamCity
• Markdown
• HTML

Чтобы задать конкретный стиль при запуске тестов используем параметр reporter:

$ mocha --reporter list

Запуск в браузере

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

<html>
<head>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="test.array.js"></script>
<script>
    mocha.checkLeaks();
    mocha.globals(['jQuery']);
    mocha.run();
</script> 
</body>
</html>

В своем проекте мы использовали связку mocha + chai.expect. и запускали через karma.

Компания Microsoft сама создала образы вируальных машин с целью предоставляения возможности вебразработчикам тестировать их сайты на старых версиях IE и/или из другой операционной ситемы(Linux/Mac). Для удобного использования Greg Thornton создал скрипт, который сам все скачивает и устанавливает.

Плюсы: это бесплатно, легально и это не требует лиценизии на каждую Window.

Минусы: если вы захотите поставить себе все версии(это опционально), то займет довольно много места на диске (около 45Гб)

Внимание! Windows обязательно попросит себя активировать. Это нормально. Чтобы снова получить trial необходимо выполнить c правами администратора следующую команду в командной строке(cmd):

slmgr -rearm

Пароль по умолчанию для всех версий Windows – “Password1“.

Запустить скрипт одной сточкой можно так:

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

через параметр IEVMS_VERSIONS можно указать конкретные версии, которые необходимо установить

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="6 8" bash

Спасибо Грегу за скрипт и вам успешного тестирования.

UPD: статься обновлена 21.11.2015. Старое имя утилиты – Testacular

Karma – инструмент на node.js, позволяющий запускать JavaScript код в нескольких браузерах, нацеленная на поддержку TDD подхода.

Karma – это не фреймворк/библиотека для тестирования, поэтому совместно можно использовать:

• Mocha
• Jasmine
• QUnit
• либо же что-то совсем другое, но написав свой адаптер

Браузеры, которые можно использовать:

• Chrome and Chrome Canary (npm install karma-chrome-launcher)
• Firefox (npm install karma-firefox-launcher)
• Safari (npm install karma-safari-launcher)
• PhantomJS (npm install karma-phantomjs-launcher)
• Opera (npm install karma-opera-launcher)
• IE (npm install karma-ie-launcher)
• SauceLabs (npm install karma-sauce-launcher)
• BrowserStack (npm install karma-browserstack-launcher)
• и многие другие

Установка:

$ npm install -g karma

Проверяем что все установилось:

$ karma --version

Так же нам понадобиться тест фреймворк, используем Jasmine:

npm install karma-jasmine

и подключение к браузеру(возьмем Chrome):

npm install karma-chrome-launcher

Настройка:

Все настройки можно задать в конфигурационном файле. Мы можем создать свой файл настроек воспользовавшись мастером инициализации:

$ karma init

Разберем основные моменты karma.config.js:

//в скобках указано значение по умолчанию
basePath('') -
files([]) - список файлов/шаблонов для загрузки
exclude([]) - список исключений для предыдущего пункта
reporters(['progress']) - вариант вывода прогресса
port(8080) - порт веб-сервера(testacular)
runnerPort(9100) - порт клиента
colors(true) - включение/выключение цветов при выводе
logLevel(LOG_INFO) - LOG_DISABLE|LOG_ERROR|LOG_WARN|LOG_INFO|LOG_DEBUG
autoWatch(false) - выполнение тестов при изменении файлов
browsers([]) - Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
captureTimeout(5000) - задание таймаута в миллисекундах
singleRun(false) - для одноразового запуска
preprocessors({}) - список обработчиков, которые будут применены к файлам, до загрузки в браузер, например - CoffeeScript

Итак, у файл настроек есть, теперь можем запускать утилиту:

$ karma start

Т.к. мы еще не добавили сами тесты, то должно вывести что-то типа:

Executed 0 of 0 ERROR (0.006 secs / 0 secs)

Давайте создадим простой тест (на Jasmine):

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
});

сохраним его в файл test.js и подключим этот файл в конфиг:

files: [
  'test.js'
],

после чего снова запустим karma и посмотрим в консоль:

Executed 1 of 1 SUCCESS (0.086 secs / 0.002 secs)

Как видим: тесты прошли успешно, один тест выполнился.

 Подключение в WebStorm

UPD: WebStrom начиная с версии 7 уже добавили поддержку Karma, поэтому не нужно уже выполнять танцы с бубном и настройкой node debug, который были до этого.

Заходим в настройки запуска и отладки:

Добавляем карму:

Из настроек вам нужно только задать имя и убедиться что подхватился правильный путь к файлу конфигурации.

Если мы хотим выполнять тесты после каждого изменения в коде, включим вот эту опцию:

Теперь webstorm будет нас информировать о состоянии тестов, в том числе в бекграунде:

то есть если мы сделаем TDD или просто хотим знать момент, когда мы что-то пошло не так, это довольно удобно: