AngularJS – 7 Steps for Unit Testing AngularJS Scripts with Jasmine

June 19, 2014 by Ajitesh Kumar · 2 Comments
This article presents instructions on what would it take to create a setup and run unit testing for your AngularJS scripts using Jasmine framework. I shall be presenting various samples on my AngularJS website, http://hello-angularjs.appspot.com. Sorry for the typos in this article and please feel free to suggest/add any points if I missed them out.

 

Following are key steps:
  1.  Learn Jasmine
  2. Create Unit Tests using Jasmine
  3. Download and install NodeJS
  4. Download & Install Karma
  5. Configure Karma
  6. Place Scripts Appropriately
  7. Execute Tests

 

Learn Jasmine
Jasmine, one of the very popular Javascript unit testing framework, can be used for unit testing one’s AngularJS scripts. As a matter of fact, Angular developers prefer the syntax of Jasmine’s Behavior-driven Development (BDD) framework when writing tests and hence, wrote wrote all of the tests of their tutorial(https://docs.angularjs.org/tutorial) in Jasmine v1.3. One could learn about Jasmine on the Jasmine home page (http://jasmine.github.io/) and at the Jasmine docs (http://jasmine.github.io/1.3/introduction.html).

 

Create Unit Tests using Jasmine
You could create unit tests for your AngularJS scripts using Jasmine guidelines that could be accessed on this page (http://jasmine.github.io/1.3/introduction.html). These unit tests can be saved with name based on following format: <JavascriptFile>Spec.js where <JavascriptFile> is the file consisting of your custom AngularJS script.

 

Download and install NodeJS
One would require to install NodeJS (http://nodejs.org/) which would then be needed to install Karma, the tool to run the Angular tests.

 

Download & Install Karma
Once NodeJS is downloaded and installed, one can then install Karma based on the instructions on this page ( https://www.npmjs.org/package/karma ). After installation, I went to D:\ and executed the command, npm install karma. This installed Karma and placed it inside “D:\node_modules”.
Following are commands one would want to execute at D:\ to get the installation of Karma and appropriate plugins (Jasmine) done.
  • npm install karma –save-dev
  • npm install karma-jasmine karma-chrome-launcher –save-dev
  • npm install -g karma-cli
Once above is done, you can run Karma simply by executing “karma” command from anywhere and it will always run the local version. Check whether all is done by executing the command, “karma”. Above instructions can also be read on http://karma-runner.github.io/0.12/intro/installation.html page.

 

Configure Karma
The next step is to create a configuration file for running your scripts. Following is configuration that you could copy and paste in a file and name it as “my.conf.js”. Save the file in “D:\”.
module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: 'D:\jstest',
    frameworks: ['jasmine'],
    files: [
      'angular/angular.min.js',
      'angular/angular-route.js',
      'angular/angular-mocks.js',
      'app/*.js',
      'test/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};
You could also create this file using the command, karma init my.conf.js and follow the instructions given on the this page (http://karma-runner.github.io/0.12/intro/configuration.html)
In above configuration, following should be noted:
  • jstest folder is created
  • jstest/app folder is created to contain application JS files
  • jstest/test folder is created to contain tests files
  • jstest/angular folder is created to consists of AngularJS core files (angular.min.js, angular-route.js, angular-mocks.js).

 

Place Scripts Appropriately
  • Download AngularJS files from https://github.com/angular and place it in appropriate folder.
  • Place app and test files in appropriate folders.

 

Execute Tests
And, you are all set. Execute the command such as karma start my.conf.js

…

[adsenseyu1]

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in Javascript, UI, Unit Testing. Tagged with , , .