AngularJS unit testing tutorial with karma-jasmine

Unit testing is a critical part of software development, ensuring that individual parts of your codebase work as expected. When working with AngularJS, two popular tools for unit testing are Karma, a test runner, and Jasmine, a behavior-driven development framework. In this tutorial, we will guide you through the process of setting up and writing unit tests for an AngularJS application using Karma and Jasmine.

Setting Up Your Environment

Before we begin, ensure that you have Node.js and AngularJS installed on your machine. If not, you can download Node.js from the official Node.js website and AngularJS from the official AngularJS website.

Next, we’ll need to install Karma, Jasmine, and the Karma-Jasmine adapter. You can install these globally on your machine using npm (Node Package Manager) with the following command:

npm install -g karma jasmine karma-jasmine karma-chrome-launcher

Configuring Karma

To use Karma, we need to create a configuration file. You can generate a default configuration file using the karma init command. This will prompt you with a series of questions about your testing setup. For this tutorial, we’ll be using Jasmine as the testing framework and Chrome as the browser.

Once the configuration file is generated, you should see a karma.conf.js file in your project directory. This file contains the configuration for Karma, including the testing framework, the files to include in the testing environment, the browser to use, and more.

Writing Your First Test

With Karma set up, we can start writing our tests. Jasmine uses a behavior-driven syntax that makes tests easy to read and write. Here’s an example of a simple test for an AngularJS controller:

describe('MyController', function() {
  beforeEach(module('myApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));

  describe('$scope.grade', function() {
    it('sets the strength to "strong" if the password length is >8 chars', function() {
      var $scope = {};
      var controller = $controller('MyController', { $scope: $scope });
      $scope.password = 'longerthaneightchars';
      $scope.grade();
      expect($scope.strength).toEqual('strong');
    });
  });
});

In this test, we’re testing the grade function of MyController. We’re checking that it sets $scope.strength to 'strong' when the password length is greater than 8 characters.

Running Your Tests

With your tests written, you can run them using the karma start command. This will start the Karma server and run your tests in the specified browser. If all tests pass, you should see a success message in your terminal.

Conclusion

Unit testing is a crucial part of maintaining a robust, bug-free codebase. By testing individual parts of your code, you can ensure that they work as expected and prevent bugs from being introduced when changes are made. With Karma and Jasmine, setting up and writing unit tests for AngularJS applications is a straightforward process. Happy testing!

Facebook
Twitter
LinkedIn
Pinterest

Table of Contents

Related posts