Setup karma and jasmine for front end unit testing

Jasmine is a great unit testing tool for angular and for javascript. You have the ability to run your unit tests through chrome, firefox, phantomjs and several more.

For this post I’ll be setting up the jasmine environment to run through firefox, chrome and then the ghost browser: phantomjs.

Prerequisites

Make sure you have npm installed

Install karma and karma-cli globally (remove -g if you just want it locally)

npm install -g karma
npm install -g karma-cli

Setup your package.json file

In a new folder create your package.json file by running:

npm install init (insert your project details)

Install packages using npm

npm install karma –save-dev
npm install karma-jasmine –save-dev
npm install karma-firefox-launcher –save-dev
npm install karma-chrome-launcher –save-dev
npm install karma-phantomjs-launcher –save-dev

The –save-dev will indicate to npm that it should add this library as a dependency in your package.json file.

You will see the following content added to package.json

“devDependencies”: {
“jasmine-core”: “^2.3.4”,
“karma”: “^0.13.12”,
“karma-
chrome-launcher”: “^0.2.1”,
“karma-firefox-launcher”: “^0.1.6”,
“karma-jasmine”:
“^0.3.6”,
“karma-phantomjs-launcher”: “^0.2.1”,
“phantomjs”: “^1.9.18”
},

Add the karma configuration file

To generate your karma.conf.js file, run the following command:

karma init karma.conf.js

Then follow the following setup process:

Do you want to capture any browsers automatically?

PhantomJS
Chrome
Firefox

What is the location of your source and test file?

test/unit/**/*Spec.js

 

There is not file matching this pattern. (Add a test/unit/TestSpec.js, make sure you
have the folders test/unit set up)

Test that it runs

in your file, TestSpec.js add:

describe(‘Hello moo’, function () {
it(‘Goes baa’, function() {

});
});

Then run

karma start karma.conf.js

Phantomjs will run, then Chrome broswer will open up, Firefox browser will open up.

Karma should say:
PhantomJS 1.9.8 (Windows 8 0.0.0) is idle
Chrome 46.0.2490 (Windows 8.1 0.0.0) is idle
Firefox 41.0.0 (Windows 8.1 0.0.0) is idle
You will see in your command line: Executed 1 of 1 SUCCESS.

(If there’s no success you may have a typo in your test js file)

Done

You now have your testing environment configured.

Read about the types of tests you can write on the jasmine documentation website, http://jasmine.github.io/.