angular directive with dependencies testing

Question

I am trying to be a good developer & write some tests to cover a directive I have. The directive has a service injected in which makes a call to a webApi endpoint.

When I run the test (which at minute expects 1 to equal 2 so I can prove test is actually running!!) I get an error that an unexpected request GET has been made to my real endpoint even though I thought I had mocked/stubbed out the service so test would execute. My test looks something like the below:

I thought that by calling $provide.service with the name of my service and then mocking the method "getUserHoldings" then this would automatically be injected at test time, have I missed a trick here? The path of the endpoint the unexpected request is contained in the actual getUserHoldings method on the concrete service.

Thanks for any help offered as driving me potty!!!

        describe('directive: spPlanResults', function () {
            var scope;
            var directiveBeingTested = '<sp-plan-results></sp-plan-results>';
            var element;

            beforeEach (module('pages.plans'));

            beforeEach (inject(function ($rootScope,
                                     $compile,
                                     currencyFormatService,
                                     _,
                                     moment,
                                     plansModel,
                                     appConfig,
                                     $timeout,
                                     $q,
                                     $provide) {
                scope = $rootScope.$new();

            $provide.service('plansService', function () {
                return {
                    getUserHoldings: function() {
                        var deferred = $q.defer();
                        return deferred.resolve([
                            {
                                class: 'Class1',
                                classId: 2,
                                award: 'Award1',
                                awardId : 2
                            }]);
                    }
                };
            });
            element = $compile(directiveBeingTested)(scope);
            scope.$digest();
    });

        it ('should be there', inject(function() {
            expect(1).equals(2);
        }));
});

Answer 1

Referencing - http://www.mikeobrien.net/blog/overriding-dependencies-in-angular-tests/ - it would work if you did your '$provide' configuration in the 'module's context i.e. do something like -

describe('directive: spPlanResults', function () {

var scope;
var directiveBeingTested = '<sp-plan-results></sp-plan-results>';
var element;

beforeEach(module('pages.plans', function($provide) {
    $provide.value('plansService', function() {
            return {
                getUserHoldings: function() {
                    var deferred = $q.defer();
                    return deferred.resolve([{
                        class: 'Class1',
                        classId: 2,
                        award: 'Award1',
                        awardId: 2
                    }]);
                }
            };
    });
}));

beforeEach(inject(function($rootScope, $compile, currencyFormatService, _,  moment, plansModel, appConfig,  $timeout, $q) {
    scope = $rootScope.$new();
    element = $compile(directiveBeingTested)(scope);
    scope.$digest();
});

it('should be there', inject(function() {
    expect(1).equals(2);
})); });