Introduction
In this tip, I will demonstrate how to set up jasmine and karma to unit test our angular app.
Background
I assume you already have a basic understanding of angularjs and a little bit of jasmine. We will concentrate on setting up karma to run our unit test in this tip.
Let's Get In
First, build our sample angular app which does nothing other than showing a simple hello world message.
I am using bower to get my dependencies. If you don't have bower installed already on your machine, go ahead and run "npm install -g bower" in the command line.
Create a project directory on your hard drive. I would name it "angular-karma-demo". Feel free to name it as you wish.
Then, to get dependencies, run the below two commands:
bower install angular
bower install angular-mocks
My project structure would look something like this:
angular-karma-demo
--bower_components
--src
--module.js
--controller.js
--test
--controllerSpec.js
--index.html
In short, I have a src folder where all of my source files reside. I got a test folder where I will have my tests and finally I have an html document (index.html).
My module.js file has code to create an angularjs module.
angular.module('app',[]);
controller.js file will look something like this:
angular.module('app')
.controller('myController', function ($scope) {
$scope.message = "Hello angular";
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/module.js"></script>
<script src="src/controller.js"></script>
</head>
<body ng-controller="myController">
{{message}}
</body>
</html>
When you run this index.html file, if everything goes good, you will see "Hello angular" message on the web page.
Let's go ahead and set up karma and write tests for our controller.
Step 1
Get dependencies first by running the below commands:
npm install karma-cli -g
npm install karma
npm install karma-phantomjs-launcher
npm install karma-jasmine
Above commands install karma globally and install jasmine and phantomjs launchers as project dependencies.
Step 2
Create a configuration file for karma. This is important, where we need to specify configuration information. Creation of karma.conf.js file is mostly automated, you just need to run the below command:
karma init
Once you hit enter, it will ask you a bunch of questions, accept defaults for now by hitting enter.
Step 3
Open up karma.conf.js file and specify all the dependent files. For our project, the files array in configuration file would look like:
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/module.js',
'src/service.js',
'src/controller.js',
'test/*.js'
],
angular-mocks library is needed to mock our dependencies while writing tests.
Step 4
We are pretty much done setting up karma and jasmine. Now let's go ahead and write our first test in controllerSpec.js file.
describe('My Controller', function () {
var scope;
beforeEach(module('app'));
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
ctrl = $controller('myController', {'$scope': scope});
}));
describe('message', function () {
it('should have message property defined', function () {
expect(scope.message).toBeDefined();
});
it('should have message property to say hello', function () {
expect(scope.message).toBe('Hello angular');
});
});
});
I am importing my app module and creating an instance of myController by injecting the required dependencies. Then, I have written a couple of tests to make sure message property has the expected value.
Running Tests
karma start
Points of Interest
In this tip, we have seen how to set up karma and run tests using it. We haven't discussed jasmine and its capabilities in detail.
