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

Does the directive have a templateUrl ? It's probably looking for it and that's the unexpected GET request you're seeing. — Omri Aharon
– Omri Aharon, Commented Oct 21, 2015 at 14:02
It does have a template url yes. Although the error referes to a GET for a path which is only specified in the service, the method I am trying to mock out, getUserHoldings.????? — CheGuevarasBeret
– CheGuevarasBeret, Commented Oct 21, 2015 at 14:12
I've added the path to the template html in another beforeEach, beforeEach (module('app/pages/plans/directive/templates/sp-plan-results.html')); but error still referring to the api endpoint path which is in my method on the concrete service. — CheGuevarasBeret
– CheGuevarasBeret, Commented Oct 21, 2015 at 14:18
Not sure about this way of mocking since I never tried it, I usually use spyOn(plansService, 'getUserHoldings').and.returnValue(deferred.promise);. After that I'm performing scope.$digest(); — Omri Aharon
– Omri Aharon, Commented Oct 21, 2015 at 14:25
Yeah tried spying on as well, still seems to be getting the concrete service injected in and not the spied on version. I'm definitely missing something :( — CheGuevarasBeret
– CheGuevarasBeret, Commented Oct 21, 2015 at 14:31

FrailWords · Accepted Answer · 2015-10-21 15:11:12Z

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

Collectives™ on Stack Overflow

angular directive with dependencies testing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related