Unit testing your Ionic application

This is a free translation of the article mcgivery.com/unit-testing-ionic-app on testing Ionic mobile applications using the karma test runner and the Jasmine test framework .

About the ionic framework in Habré there were already articles . But I didn’t find in just one bit of testing about all this. Therefore, I decided to post here my translation of an article that once helped me a lot. I hope that it will also be useful for someone to start writing tests for an ionic application.

Creating an Ionic demo project

First, create a demo application. I use one of the Ionic application templates - tabs. To create a demo application, run.

ionic start ionic-testing tabs cd ionic-testing 

')

Preparation of the project for testing

For the tests, we need several npm-modules and angular-mocks. Everything is installed through the npm and bower package managers:

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

Now we create a folder for the test and initialize the configuration file for karma.

 mkdir tests cd tests karma init my.conf.js 

We will answer all the questions, yes. In my.conf.js we will add paths to the js-files of the project and test files, we will also add PhantomJS to the list of browsers used.

 // 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'], 

For the convenience of running tests, add gulp-task 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(); }); 

Now, to run the tests, we can use the gulp test command (if we do not specify the singleRun parameter, the test will run every time the files specified in my.conf.js change).

Unit testing of controllers

Let's start by writing a test for the AccountCtrl controller already included in the standard Tabs project. Create a new file Controllers / controllers.tests.js in the tests folder.

 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); }); }); 

This test checks whether the scope.settings.enableFriends value is enabled in the AccountCtrl controller. The beforeEach function will be run before the test runs. It receives information about the angular module that we are testing.

For writing the test is used Jasmine. This is a framework for testing javascript code. The syntax can be found on the official site.

To run the test run gulp task

Unit testing services

The second unit test will test the Chats service (originally written by Friends, but in the new version of the tabs application it was renamed). Create a file in the tests Services / services.tests.js directory.

 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); })) }) 

We see all the same beforeEach performing the same actions as in the controller test, only here the Chats service is initialized instead of the controller. We call Chats.all () to check the number of objects (should be 5).

In addition, we get one object by its id and check the name property.

Running tests also gulp test .

PS This is my first article on Habré, and indeed the first material, if I haven’t correctly described something or there are simpler and better solutions, I’ll be happy to comment!