Creating a Ionic project using Karma, Jasmine, Snap CI and Ionic View

Introduction

Every day, more companies adopt mobile strategies for achieving larger shares of their consumers, and new applications for various platforms (Android, iOS, Windows) are created. But the cost of developing for multiple platforms quickly becomes unviable due to the high cost of maintaining multiple teams, multiple codes, etc. With that in mind, hybrid technologies have emerged. With some knowledge of CSS, HTML and Javascript, applications can be developed only once and that code can be ported to the various existing platforms. Two examples of these technologies are PhoneGap and Titanium.

What is Ionic?

Ionic is a SDK for developing hybrid applications using technologies like HTML, CSS, Javascript, AngularJS and Apache Cordova.

Installing the Dependencies

Before anything, you need to install Node.js and Git, Ionic uses Git to manage plugins and other resources that are hosted on GitHub.

After installing the Node.js and Git, you must install Cordova and Ionic, open the terminal and type the following command:

$ npm install -g cordova ionic

NPM is a package manager for Node.js and the argument -g used next to the command will install Ionic and Cordova globally on your machine.

Creating an Ionic Project

With the terminal opened, we will create the basic structure for a Ionic project. There are many templates you can use to create your first project. In our case we will use the blank template which creates nothing but an empty structure for our project. Run the following command:

$ ionic start ionic-basic-project blank

After running the command, a message similar to the following should appear:

To run your project go the directory that was created and run the command:

$ ionic serve

A new browser page will open with our application.

Setting Up the Test Environment with Karma and Jasmine

Karma

Karma is a JavaScript test runner that runs with Node.js. You can use Karma to run tests using popular test suites like Jasmine, QUnit and Mocha.

Jasmine

Jasmine is a BDD framework used to test JavaScript code; it has a very clean syntax that facilitates the test creation.

Configuring the Test Environment

Let’s install Karma, Jasmine, PhantomJS (browser that Karma will utilize) and Karma Coverage (for test coverage). To do this, go to the directory of your application and run the following command:

$ npm install karma karma-jasmine karma-phantomjs-launcher karma-coverage — save-dev

After the installation is complete open the file package.json and check if the new dependencies were installed:

To keep our project organized, we will create a folder named tests and add the Karma configuration file. Run the following commands:

$ mkdir tests $ cd tests $ karma init karma.conf.js

After running the command karma init you will see an interactive terminal where you have to answer some questions. For now, only respond according to the image below:

Now we need to create a gulp task. When executed, the gulp task will ask karma to execute the tests, open thegulpfile.js file and import the karma adding the following line in its beginning:

var Server = require(‘karma’).Server;

At the end of the file, add the following task that will be responsible to run the tests:

gulp.task(‘test’, function(done) { new Server({ configFile: __dirname + ‘/tests/karma.conf.js’, singleRun: true }, done).start(); });

Let’s create another task to run the tests and compile sass:

gulp.task(‘build’, [‘test’, ‘sass’]);

Now we need to define the files that needs to be loaded in the test browser, open the file karma.config.js and modify the line that contains the attribute files changing to:

files: [ ‘../www/lib/ionic/js/ionic.bundle.js’, ‘../www/js/**/*.js’, ‘../www/lib/angular-mocks/angular-mocks.js’, ‘**/*.test.js’ ],

Now we will configure the test coverage. With the file karma.conf.js opened, modify the following lines:

preprocessors: { ‘../www/js/*/**/*.js’: ‘coverage’, ‘**/*.test.js’: ‘coverage’ }, reporters: [‘progress’, ‘coverage’],

And add a new line with the path and the type of the generated file after the test coverage:

coverageReporter: { type: ‘html’, dir: ‘../coverage/’ },

Now search for the line browsers and check its contents. If it is something other than PhantomJS change to:

browsers: [‘PhantomJS’],

To clean up the configuration file, it’s recommended to remove all comments.

You can check the final version of the file here.

To leave the code organized, it’s a good practice to have separate controllers, services and directives (and their tests) in different files and separate folders. Thus in the tests folder, we could have the following structure:

Testing 1, 2, 3 …

In the folder tests/controllers we will create our first controller test. Create a file called main.ctrl.test.js with this structure:

`describe(‘MainCtrl’, function() { var ctrl;

beforeEach(function() {
    module('starter');
    inject(function($controller) {
        ctrl = $controller('MainCtrl');
    });
});
it('should create controller', function() {
    expect(ctrl).not.toBeUndefined();
}); });`

If you run the command gulp test on terminal the test will fail because the controller that we are testing doesn’t exists yet. For test work, let’s create a file called main.ctrl.js inside the folder www/js/controllers with this structure:

`(function() { angular .module(‘starter’) .controller(‘MainCtrl’, MainCtrl);

function MainCtrl() {
        var ctrl = this;
        return ctrl;
    } })();`

Service tests have a very similar structure to that of the controllers, so I will not address them in this tutorial.

Continuous Integration with Snap CI and Ionic View

Now we will create a continuous deployment pipeline with Snap CI and Ionic View.

What is Snap CI?

Snap CI is a hosted continuous delivery server developed by the product division of ThoughtWorks. Snap CI helps you to evolve one continuous integration process for continuous delivery, with native support for deployment pipelines. Developer Danilo Sato has blogged about using Snap CI previously and I have used some of his advice. You can read his blog post about using Snap CI and AWS to deploy to a static website here.

What is Ionic View?

Ionic View works as your application portfolio. It allows you to share and test applications built with Ionic Framework easily across platforms Android and iOS.

Deployment pipeline in Ionic View

Before starting, you need to create a account in Ionic View to start distributing your application. Let’s create a gulp task that will be responsible for uploading your application. You will need to set up two environment variables: one with the email account and a second with the password of the Ionic View account. Now open gulpfile.js file and add the following task:

`gulp.task(‘upload’, function() { var ionicEmail = process.env.IONIC_EMAIL; var ionicPassword = process.env.IONIC_PASSWORD;

var ionicCommand = ‘ionic upload -e ‘ + ionicEmail + ‘ -p ‘ + ionicPassword; return gulp.src(‘’) .pipe(exec(ionicCommand)) .pipe(exec.reporter(reportOptions)) });`

Also add the report configuration:

var reportOptions = { err: true, stderr: true, stdout: true };

At the beginning of the file, add the following line:

var exec = require(‘gulp-exec’);

And in the package.json file in devDependencies the following line:

“gulp-exec”: “^2.1.1”

Then we need to create a pipeline in Snap CI. To understand the basic concepts and how to create a delivery pipeline, I recommend an excellent article posted by Danilo Sato on ThoughtWorks’ Insights blog.

After reading the Danilo Sato article, you will need to create a pipeline similar to mine: it will download the dependencies, run the tests and upload the files to Ionic View:

You can download the full project at my Github page.

Conclusion

Now that you have a basic Ionic project structure created, with working tests and a continuous integration pipeline, I suggest you to read Ionic’s official documentation. It will help you with the next steps in creating your application.

This post was originally published on Adriano Lisboa’s Blog.