AngularJS Hello World Unit Testing Code Example

Controllers.js

Following represents the AngularJS code representing Hello world app consisting of one function named as addProfile. The demo apps could be found on following pages:

• http://hello-angularjs.appspot.com/helloworld
• http://hello-angularjs.appspot.com/addtablerow

var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
 $scope.name = "Calvin Hobbes";
 $scope.profiles = [];

 $scope.addProfile = function(){
  var profile = {firstname:$scope.firstname,lastname:$scope.lastname,email:$scope.email};
  $scope.profiles.push( profile );
 }
});

ControllersSpecs.js

Following represents the Jasmine code sample used to test the above code. Pay attention to “BeforeEach” setup function which initializes the HelloApp and create a controller with name “HelloCtrl”. Note that the HTML page should consist of directives such as ng-app=”helloApp” and ng-controller=”HelloCtrl” appropriately.

describe( "HelloWorld Controller", function() {
    //
    // Defining the scope variable to be accessed within "it" function
    // blocks
    //
    var $scope;
    //
    // Setup function called prior to each "it" function block
    //
    beforeEach(function(){
       // Module helloApp initialized
       //
       module("helloApp");
       // Controller and rootScope injected for initializing
       // the controller and working with scope object in "it" function blocks
       //
       inject(function($controller, $rootScope){
   $scope = $rootScope.$new();
       $controller( "HelloCtrl", {$scope:$scope});
       });
    });

    it( "should have default name set to Calvin Hobbes", function() {
        expect($scope.name).toEqual("Calvin Hobbes");
 });

 it( "should have an empty profiles array to store profiles", function() {
     expect($scope.profiles.length).toEqual(0);
 });

 it( "should add a profile to profiles store", function(){
     $scope.firstname = "Chris";
     $scope.lastname = "Johnson";
     $scope.email = "chris.johnson@gmail.com";

     $scope.addProfile();
     //
     // Expectations
     //
     expect( $scope.profiles.length ).toEqual(1);
     expect( $scope.profiles[0].firstname ).toEqual( "Chris" );
     expect( $scope.profiles[0].lastname ).toEqual( "Johnson" );
     expect( $scope.profiles[0].email ).toEqual( "chris.johnson@gmail.com" );
 });
});

How to Run Above Tests

We recommend you to get setup with Karma & Jasmine using instructions that could be found on following page: http://vitalflux.com/angularjs-7-steps-unit-testing-angularjs-scripts-jasmine/