Setting up Karma with Mocha, PhantomJS and Chai

bower.json

{
  "name": null,
  "description": null,
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.x",
    "angular-mocks": "~1.2.x"
  }
}

e2e.js

'use strict';

describe('Homepage', function() {

    it('should redirect to homepage', inject(function ($location) {

        $location.path('/');

        expect($location.url()).to.equal('/');
    }));

});

describe('addSong()', function(){
	it('should add songs', inject(function($controller) {
		var scope = {};
		var myController = $controller('MyController', {
			$scope: scope
		});

		scope.addSong('While My Guitar Gently Weeps');

		scope.songs.should.contain('While My Guitar Gently Weeps');
	}));
});

describe('get-instruments result', function(){
	it('should be added to scope', inject(function($controller, $httpBackend){
		var scope = {};
		$httpBackend
			.when('GET', 'api/get-instruments')
			.respond([
				'vocals', 'guitar', 'sitar'
			]);
		var myController = $controller('MyController', {
			$scope: scope
		});

		$httpBackend.flush();

		scope.instruments.should.contain('guitar');
	}));
});

//To simulate the error, you can just tell the $httpBackend to respond with an error code (500):

describe('get-instruments with error', function(){
	it('should have a status with error', inject(function($controller, $httpBackend){
		var scope = {};
		$httpBackend
			.when('GET', 'api/get-instruments')
			.respond(500, '');
		var myController = $controller('MyController', {
			$scope: scope
		});

		$httpBackend.flush();

		scope.status.should.equal('ERROR');
	}));
});

karma.conf.js

// Karma configuration
// Generated on Thu May 21 2015 12:02:34 GMT+0530 (IST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha','chai'],


    // list of files / patterns to load in the browser
    files: [
        'source/js/vendor/jquery-1.11.2.min.js',
        'source/js/vendor/underscore.js',
        'source/js/vendor/angular.js',
        'source/js/vendor/angular-route.js',
        'source/js/vendor/angular-cookies.js',
        'source/js/vendor/angular-mocks.js',
        'source/js/app/common/app.js',
        'source/js/app/common/config.js',
        'source/js/app/common/route.js',
        'source/js/test/e2e/common/home-page.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'source/js/app/*/*/*.js' : ['coverage']
    },

    coverageReporter: {
        reporters: [
            { type: 'html', dir: 'build/coverage' },
            { type: 'text-summary', dir: '/' }
        ]
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

package.json

{
  "README": "README.md",
  "description": null,
  "author": null,
  "dependencies": {
  },
  "devDependencies": {
    "chai": "^2.3.0",
    "karma": "^0.12.32",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^0.3.1",
    "karma-mocha": "^0.1.10",
    "karma-phantomjs-launcher": "^0.1.4",
    "mocha": "^2.2.5"
  }
}

Setting up Karma with Mocha, PhantomJS and Chai

# Setting up Karma with Mocha, PhantomJS and Chai

setup

First up, install Karma:

    npm install --save-dev karma
    
Karma is a test runner. Much like how NUnit has a test runner .exe which can run test assemblies that use the NUnit test framework assemblies. In this case the test runner can run tests based on different test frameworks - in this case. Mocha. Because I’m setting up tests for client-side JavaScript - in particular, I’m going to use AngularJS - the tests need to be run inside a browser environment so that there is a usable DOM. PhantomJS is a WebKit based headless browser that will allow tests to run without opening a browser window.

So now the Karma plugins for Mocha and PhantomJS need to be installed. The plugins have Mocha and PhantomJS as dependencies, so only the plugins need to be installed. I also want to use Chai as the assertion library.

    npm install --save-dev karma-mocha
    npm install --save-dev karma-phantomjs-launcher
    npm install --save-dev karma-chai

For code coverage

    npm install --save-dev karma-coverage
    
To make it easier to run karma from the command line you can install karma-cli globally, which will run the local version without having to specify the path to karma    

    npm install -g karma-cli
    
Karma needs a configuration file. Generate it using 'karma init' and answer the questions. For this demo all of my code is going to live in ./source-and-tests. If I were using a Gulp build chain this would probably need to be tweaked.

Which testing framework do you want to use ?
-mocha
Do you want to use Require.js ?
-no
Do you want to capture any browsers automatically ?
-PhantomJS
What is the location of your source and test files ?
-source-and-tests/**/*.js
Should any of the files included by the previous patterns be excluded ?
-leave blank
Do you want Karma to watch all the files and run the tests on change ?
-yes   

To get Chai included in the test pipeline, we need to edit karma-conf.js and add it to the frameworks setting:
    frameworks: ['mocha', 'chai'],
    
Running 'karma start' will execute the default karma-conf.js 

***Adding AngularJS to the mix***

I’ll use Bower to install AngularJS.

    npm install --save-dev bower 
    npm install -g bower
    
To create a configuration file for Bower    
    bower init  
    
Angular dependancies    
    bower install --save angular
    bower install --save angular-mocks