How to write test cases for controllers in Angular js

Question

Recently we started writing test cases for our application , we need help in writing test cases for controllers. We are using Mocha, chai and Snion libraries for writing test cases.

Here is the plunker link which contains our controller code in it. Can anyone help us how to write test cases for this controller? We will implement for the rest based on this. We need the initial push with this controller.

http://plnkr.co/edit/oginuqO0afxnWbVMos0f?p=info

Here is the code:

angular.module( 'ngBoilerplate.account', [
    'ui.router','ngAnimate', 'ui.bootstrap','ngBoilerplate.contact','ngResource','jcs-autoValidate','ngCookies','ngTagsInput'
])
.controller('addAccount', function($scope,industryService,$http,$state,LoggedUser){
    $scope.industry = [];
    industryService.query().$promise.then(function(data) {
        $scope.industry = data;
    });

    window.onbeforeunload = function (event) {

        if ($scope.addAccountForm.$dirty) {

            var message = 'If you leave this page you are going to lose all the unsaved changes.';

            if (typeof event == 'undefined') {
                event = window.event;
            }
            if (event) {  
                event.returnValue = message;
            }

            return message;
        }
    };

    $scope.insertAccount = function(){
        $scope.address = {
            'line1':$scope.line1,
            'line2':$scope.line2,
            'city':$scope.city,
            'zipCode':$scope.zipCode,
            'state':$scope.state,
            'country':$scope.country
        };

        console.log($scope.industryId);

        if($scope.industryId!== undefined) {

            $scope.industry = {
                'id' : $scope.industryId
            };
        }

        $http.post('/rest/users/'+LoggedUser.getUserName()+'/accounts',{
            'name' : $scope.name,
            'industryBean': $scope.industry,
            'email' :$scope.email,
            'phone' : $scope.phone,
            'fax' : $scope.fax,
            'website' : $scope.website,
            'headquarters' : $scope.headquarters,
            'dbaName' : $scope.dbaName,
            'numberOfEmployees' : $scope.numberOfEmployees,
            'annualRevenue':$scope.annualRevenue,
            'logo' : $scope.logo,
            'primaryContact': $scope.contact,
            'addressBean':$scope.address
        }).success(function(data){
            $scope.account=data;
            $state.go('main.account', {}, {reload: true});
        });
    };
})
.factory("loggedInUser", function($resource) {
    return $resource("/rest/users/:username");
})
 .factory("industryService", function($resource) {
    return $resource("/rest/accounts/industry");
})

Any help is really appreciated.

Thanks in advance, let me know if you have any questions on the same.

Answer 1

I love mocha chai and Sinon and use them for testing Node code. Never used them with Angular.

The typical Angular setup is Karma, Jasmine (unit testing) and Protractor (E2E testing).

Looking at your controller code, I would say you have too much logic in the controller. You need to relegate some code to a service.

In respect of testing $http you need to use ng-mock's $httpBackend.

You should use the Angular Controller As syntax too in your code.