Это вольный перевод статьи 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. это моя первая статья на Хабре, да и вообще первый материал, если я что-то не верно описал или есть более простые и лучшие решения, буду рад комментариям!