Unit-тестирование вашего Ionic-приложения

Это вольный перевод статьи mcgivery.com/unit-testing-ionic-app на тему тестирования мобильных приложений Ionic используя karma test runner и Jasmine test framework.

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

Создание демо-проекта Ionic

Вначале создадим демо-приложение. Я использую один из шаблонов приложения Ionic — tabs. Что бы создать демо-приложение выполните.

ionic start ionic-testing tabs cd ionic-testing 

Подготовка проекта к тестированию

Для тестов нам понадобятся несколько npm-модулей и angular-mocks. Все устанавливается через пакетный менеджеры npm и bower:

npm install karma karma-jasmine karma-phantomjs-launcher --save-dev npm install -g karma-cli npm install  bower install angular-mocks --save-dev 

Теперь создаем папку для теста и инициализируем конфигурационный файл для karma.

mkdir tests cd tests karma init my.conf.js 

Ответим на все вопросы да. В my.conf.js добавим пути к js-файлам проекта и файлам тестов, также добавим PhantomJS в список используемых браузеров.

// list of files / patterns to load in the browser files: [   '../www/lib/angular/angular.js',   '../www/js/*.js',   '../www/lib/angular-mocks/angular-mocks.js',   '**/*tests.js' ],  // Use the PhantomJS browser instead of Chrome browsers: ['PhantomJS'], 

Для удобства запуска тестов, добавим gulp-таск test.

// это пропишем в секции импорта var KarmaServer = require('karma').Server;  // ... другие gulp-таски  // gulp-task для запуска теста gulp.task('test', function(done) {     new KarmaServer({         configFile: __dirname + '/tests/my.conf.js',         singleRun: true,     }, done).start(); }); 

Теперь для запуска тестов мы можем использовать команду gulp test (если мы не укажем параметр singleRun, то тест будет запускаться каждый раз когда изменятся файлы указанные в my.conf.js).

Unit-тестирование контроллеров

Начнем с написания теста для контроллера AccountCtrl уже включенного в стандартный Tabs-проект. Создадим в папке tests новый файл Controllers/controllers.tests.js.

describe('Controllers', function(){     var scope;      // load the controller's module     beforeEach(module('starter.controllers'));      beforeEach(inject(function($rootScope, $controller) {         scope = $rootScope.$new();         $controller('AccountCtrl', {$scope: scope});     }));      // tests start here     it('should have enabled friends to be true', function(){         expect(scope.settings.enableFriends).toEqual(true);     }); }); 

Этот тест проверяет включено ли значение scope.settings.enableFriends в контроллере AccountCtrl. Функция beforeEach будет запущено перед выполнением теста. Она получает информацию о модуле angular, который мы тестируем.

Для написания теста используется Jasmine. Это фреймворк для тестирования JavaScript-кода. С синтаксисом вы можете ознакомиться на официальном сайте.

Что бы запустить тест выполните gulp task

Unit-тестирование сервисов

Второй unit-тест будет тестировать Chats сервис (в оригинале написано Friends, но в новой версии приложения tabs он был переименован). Создайте файл в директории tests Services/services.tests.js.

describe('Chats Unit Tests', function() {     var Chats;      beforeEach(module('starter.services'));     beforeEach(inject(function(_Chats_) {         Chats = _Chats_;     }));      it('can get an instance of my factory', inject(function(Chats) {         expect(Chats).toBeDefined();     }));      it('has 5 charts', inject(function(Chats) {         expect(Chats.all().length).toEqual(5);     }));      it('has Max as friend with id 1', inject(function(Chats) {         var oneFriend = {             id: 1,             name: "Max Lynx",             notes: 'Odd obsession with everything',             face: ''         };          expect(Chats.get(1).name).toEqual(oneFriend.name);     })) }) 

Мы видим все тот же beforeEach выполняющий те же действия, что и в тесте контроллера, только здесь вместо контроллера инициализируется сервис Chats. Мы вызываем метод Chats.all() для проверки числа объектов (должно быть 5).

В дополнение мы получаем один объект по его id и проверяем свойство name.

Запуск тестов происходит также gulp test.

P.S. это моя первая статья на Хабре, да и вообще первый материал, если я что-то не верно описал или есть более простые и лучшие решения, буду рад комментариям!

ссылка на оригинал статьи http://habrahabr.ru/post/270485/