AngularJS: How to test isolated directive with controller and multiple services

Question

I have an Angular JS directive which has a controller and that controller internally calls many services. How to test this using Karma.

Here is my code structure,

1. In my directive I am displaying the data from service which internally gets data from controller. It is as below.

   <div class='tile'>

   <div class="count">{{tileRegistry.tileData.tileCount}}</div>

   </div>

Here tileRegistry is getting data from controller service as below

var commonController =  ['$scope','$filter','tileSvc','navSvc','appSetting',  function ($scope,$filter, tileSvc,navSvc,applSettig) {

 function commonController() {
    var tileType = $scope.tile.id;
    $scope.tileRegistry=tileSvc.getRegistry(tileType);
    $scope.limit=6;
 }
 commonController();
 $scope.link = function(){       
     var url = $scope.tile.uriLink;     
     applSetting.setpatientListActive(false);
     navSvc.navigateToSegment(url, {});
 };

}];

4. tileSvc is the service called from controller like below

   angular module('app').service('tileSvc',['pblmSvc','procSvc','allgSvc',
       function(pblmSvc,procSvc,allgSvc){
       this.getRegistry = function(tileType){
           switch(tileType){
           case 'ALG': return allgSvc.registry; break;
           case 'PROB: return pblmSvc.registry; break;
           default: return null;
      }
   };
   }]);
   

please can anyone tell me how I can mock this controller and service in order to test my directive.

Thanks

Answer 1

pass mock json objects to $controller() and override necessary service calls:

beforeEach(function () {
    module('you_app_module');

    var $scope;
    inject(function ($injector, $controller, $rootScope, $filter) {
        $scope = $rootScope.$new();

        var tileSvcMock = {
            getRegistry: function (tileType) {
                return "some mock data";
            }
        };
        var navSvcMock = {
            navigateToSegment: function (param1, param2) {
                return "some mock data";
            }
        };
        var appSettingMock = {

        };
        $controller(commonController,
            {
                $scope: $scope,
                $filter: $filter,
                tileSvc: tileSvcMock,
                navSvc: navSvcMock,
                appSetting: appSettingMock
            });
    });
});