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,

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, {});
 };

}];

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

Dmitri Algazin · Accepted Answer · 2015-06-12 09:15:06Z

0

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
            });
    });
});

answered Jun 12, 2015 at 9:15

Dmitri Algazin

3,4541 gold badge33 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coding_cs Over a year ago

After this how to validate the directive, will it automatically populate the data in my directive in the place of <div class="count">{{tileRegistry.tileData.tileCount}}</div> Please tell

Dmitri Algazin Over a year ago

sorry, never tested directive, usually directive is calling some controller or service method, so you should test that method, no directive. But! if you type in google "Angular directive testing", you will find that article angular-tips.com/blog/2014/06/… which tells, that passing simple html and scope to $compile('<some html>')(your_controller_scope) will call your directive. Find out more articles, you are not first person trying to test directive. Good luck!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related