Test Driven AngularJS Part 1 – Project Setup

This is the first part in a series of posts detailing a process for creating test driven AngularJS applications. The goal of these posts is to create a useful resource to refer to when writing tests for Angular applications.

All the code in these posts is available in the I Heart JS GitHub repository.

Before we get started

What is the goal

I am going to write an AngularJS memo app. The app will use local storage, and will display a searchable and filterable list. I will use controllers, filters, directives and services to achieve this so that we can write tests for all of them.

How to use these posts

You could follow along with me or you could write your own app and follow my process but write your own tests. This will be a learning experience for me too and I would love to get feedback on all aspects of this series and my code. I would also really like to see any examples of apps you create from reading this, and learn about any challenges you faced writing your tests.

A brief introduction to testing

Unit testing is a methodology for designing software by defining the smallest possible units of functionality. These unit definitions are called “unit tests”.

Integration testing is an automated method of running your application as though a user were interacting with it. Integration testing occurs after unit testing.

Create a boilerplate for the app

This project will require you to have installed NodeJS / npm.

If you don’t want to go step by step you can clone the github repo, copy the first folder “Part 1 – Project Setup” and use the following terminal commands.

npm install
npm install -g bower 
bower install

Install dependencies

Karma

Karma is the “Spectacular test runner for JavaScript” written by the AngularJS team. You can use Karma to run your tests OR you can tell Karma to watch your code and it will run your tests for you when your code changes.

//Install Karma:
npm install karma karma-jasmine --save-dev

//Install plugins for any browsers you want to test with:
npm install karma-chrome-launcher --save-dev
npm install karma-firefox-launcher --save-dev
npm install karma-ie-launcher --save-dev
npm install karma-safari-launcher --save-dev

Gulp

Gulp is a task runner to “automate and enhance your workflow”.I will be using it to run a test server and eventually to perform a build process on my code.

//Install gulp
sudo npm install -g gulp
npm install gulp --save-dev

There are gulp plugins for just about everything, for now we will just be installing the one for a web server

npm install --save-dev gulp-webserver

Bower

Bower is “a package manager for the web” and we will use it to install our JavaScript libraries.

//Install bower
sudo npm install -g bower

angular-mocks

Provides support to inject and mock Angular services into unit tests and extends core Angular services to assist with testing.

//Install angular-mocks
bower install angular-mocks --save-dev

AngularJS

The Superheroic JavaScript MVW Framework itself!

//Install angular
bower install angular --save

Bootstrap

Bootstrap is “the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects”. I will be using bootstrap for layout and basic styles.

//Install bootstrap
npm install bootstrap --save

Create files and folders

Inside the project folder create the following empty files and sub-folders

/index.html
/gulpfile.js
/styles
/styles/styles.css
/app
/app/app.module.js

Create project skeleton

I won’t actually be writing any application code now, just the outline. In the next part we will start by writing our controller tests and then the controller code.

/gulpfile.js
/**Plugins */
var gulp = require('gulp')
    webserver = require('gulp-webserver');

/**Configuration */
var configuration = {};

configuration.server = {
    port: 1337,
    host: '0.0.0.0',
    fallback: 'index.html',
    livereload: true    
};

configuration.server.proxies = [{
    source: '/api', 
    target: 'http://' + configuration.server.host + ':' + configuration.server.port + '/api'
}];

/** Tasks */

//Start a server
gulp.task('serve', function() {

    gulp.src('./')
      .pipe(webserver(configuration.server));

});

/index.html
<!doctype html>

    
		
    <!--Stylesheets in the head-->
    

I ♥ Testing Angular

app/app.module.js
angular.module('testingApp', ['ngRoute']);

angular.module('testingApp')
    .config(moduleConfig);
	
moduleConfig.$inject = [];

function moduleConfig(){

}

Test it out

You should now be able to run

gulp serve

from your project folder to run your test server then access the server in a browser at http://0.0.0.0:1337.

Review

In the post we have

  • Installed nodeJS
  • Installed Karma (and plugins) for running our tests
  • Installed Gulp for running a test server
  • Installed Bower for managing JavaScript libraries
  • Installed Angular-Mocks for making Angular more testable
  • Installed AngularJS,  jQuery and Bootstrap
  • Created a basic file structure that will grow into our modular Angular app
  • Created an index.html to run our app in, and an app.module.js for our angular module and configuration
  • Created a gulpfile.js for managing our gulp tasks (which is so far the test server)

In the next part, Test Driven AngularJS Part 2 – Testing Controllers, we will design our controllers in some tests and then write the controllers.