Categories: JavascriptUIUnit Testing

AngularJS – 7 Steps for Unit Testing AngularJS Scripts with Jasmine

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:

Learn Jasmine
Create Unit Tests using Jasmine
Download and install NodeJS
Download & Install Karma
Configure Karma
Place Scripts Appropriately
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

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. For latest updates and blogs, follow us on Twitter. 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. Check out my other blog, Revive-n-Thrive.com