vendredi 5 août 2016

jasmine mocking service inside service

I'm testing a directive ('planListing') that has a dependency on a service called 'planListingService'. This service has a dependency to another service called 'ajax' (don't shoot the messenger for the bad names).

I'm able to compile the directive, load its scope and get the controller WITH A CAVEAT. As of now I am being forced to mock both services 'planListingService' and 'ajax' otherwise I will get an error like this:

Error: [$injector:unpr] Unknown provider: ajaxProvider <- ajax <- planListingService http://ift.tt/2aHthcM$injector/unpr?p0=ajaxProvider%20%3C-%20ajax%20%3C-%20planListingService

I thought that because I was mocking up the 'planListingService' that I wouldn't have to actually bother with any implementation nor any dependencies of this service. Am I expecting too much?

Here is the code in a nutshell:

planListing.js

angular.module('myApp')
    .directive('planListing', planListing)
    .controller('planListingCtrl', PlanListingCtrl);

 function planListing() {
    var varDirective = {
        restrict: 'E',
        controller: PlanListingCtrl,
        controllerAs: 'vm',
        templateUrl: "scripts/directives/planListing/planListing.html";
        }
    };
    return varDirective;
}
PlanListingCtrl.$inject = ['planListingService'];
function PlanListingCtrl(planListingService) {
    ...
}

planListingService.js

angular.module('myApp')
    .factory('planListingService', planListingService);
planListingService.$inject = ['$q', 'ajax'];
function planListingService($q, ajax) {
    ...
}

ajax.js

angular.module('myApp')
    .factory('ajax', ['backend', '$browser', 'settings', '$http', '$log',
  function (backend, $browser, settings, $http, $log) {
    ...

planListing.spec.js

describe('testing planListing.js',function(){

    var el,ctrl,scope,vm;
    var service;

    module('myApp');
    module('my.templates');

    beforeEach(module(function ($provide){
        // This seems to have no effect at all, why?
        $provide.service('planListingService', function () {
            this.getAllPricePlans=function(){};
        });
        // I don't get the error if I uncomment this:
        // $provide.service('ajax', function ($q) {
        //  this.getAllPricePlans=function(){};
        // });
    }));

    beforeEach(angular.mock.inject(function (_$compile_,_$rootScope_,_$controller_){
        $compile=_$compile_;
        $rootScope = _$rootScope_;
        $controller = _$controller_;
        el = angular.element('<plan-listing></plan-listing>');
        scope = $rootScope.$new();
        $compile(el)(scope);
        scope.$digest();

        ctrl = el.controller('planListing');
        scope = el.isolateScope() || el.scope();
        vm = scope.vm;
    }));

    describe('testing compilation / linking', function (){
        it('should have found directive and compiled template', function () {
            expect(el).toBeDefined();
            expect(el.html()).not.toEqual('');
            expect(el.html()).toContain("plan-listing-section");
        });
    });
    it('should have a defined controller',function(){
        expect(ctrl).toBeDefined();
    });
    it('should have a defined scope',function(){
        expect(ctrl).toBeDefined();
    });
});

So why is that I need to mock up the 'ajax' service even though I am mocking up 'planListingService' which is the one calling the 'ajax' service?

Thanks!

Aucun commentaire:

Enregistrer un commentaire