Writing Testable Application in AngularJS – Part 1

This will be a 5-Part series to showcase how easy and fun it is to write an AngularJS application. It is a first article of the series where I’m going to give you an overview of the whole application and the utilities we’ll need to get going.

Application Overview

The application we’ll build is called an eLearning player – a building block for more conventional eLearning courses to be run on created with authoring tools. You can learn more about it on upsidelearning and wikipedia. Such players basically consist of different kinds of templates/activities backed by XML/JSON data (produced by Authoring Tools).

LIVE DEMO

Application Overview

Prerequisites

These are some of the tools we’ll use to make the development more enjoyable and sexy. I’m not going to fill this post with all the installation stuff so visit below sites and have it installed for you.

• Node.js – Server side Javascript that below tools are based on
• Yeoman – The Workflow Tool
• Karma Runner – Spectacular Test Runner for JavaScript

Scaffolding

I assume that you have setup above mentioned tools so lets create a scaffold for our application. Type following commands in a terminal:

$ mkdir eShell && cd eShell
$ yo angular
Error angular 

Invalid namespace: angular (or not yet registered).
 Registered: 4 namespace(s). Run with the `--help` option to list them.

In case you get above error, run following commands:

$ sudo npm install generator-angular
$ sudo npm install generator-karma
$ yo angular
Would you like to include Twitter Bootstrap? (Y/n) Y
If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? (Y/n) Y
Would you like to include angular-resource.js? (Y/n) Y
Would you like to include angular-cookies.js? (Y/n) n
Would you like to include angular-sanitize.js? (Y/n) Y

Finally, run following command as per the instruction to install the required dependencies.

$ sudo npm install && bower install
$ grunt server

If you see, Allo, Allo in a browser that means we’ve achieved our first target. Good Job!!!

Karma Testrunner Setup

In case you want Karma to suit your need, you can simply edit karma.conf.js and karma-e2e.conf.js. Mainly we need to change a port, runnerPort (if ports are in use) and browsers to run tests against. By default, it’s Chrome.

// Karma configuration

// base path, that will be used to resolve files and exclude
basePath = './';

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

Finally, run below command which should capture browsers for testing as per karma.conf and will evaluate all tests on every file save (in your choice of IDE).

$ karma start

Checkout Part 2.

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.

Advertisement