How to mock services in directive tests? - angularjs

Question

i have a directive with the injected apiService which is a wrapper around $http and others custom services.
when I try to test the directive, I don't know how to mock the service:
app.directive('coreMenu', ['apiService', function (apiService) {
return {
restrict : 'E',
replace : true,
templateUrl : 'Directives/CoreMenu.tpl.html',
link: function (scope) {
apiService.get({
module: 'Core',
route: 'Menu'
}).then(function (response) {
scope.menuItems = response.data;
}, function (response) {
// error: no menu available
});
}
};
}]);
Test:
describe('coreMenu directive', function() {
var $compile, $rootScope;
beforeEach(function () {
module('AdminTechPortal');
module('CoreLeftMenu.tpl.html');
inject(function (_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
});
it('replaces the element with the appropriate content', function() {
var element = $compile("<core-menu></core-menu>")($rootScope);
$rootScope.$digest();
expect(element.html()).toContain('id="core-menu"');
});
});
This test throws ( which is normal):
Error: Unexpected request: GET /Core/Menu/
Is it possible to mock apiService and not just the xhr call using $httpbackend ?

Answer 1

What I do in such cases follows... Bear in mind that testing promises (this way) has a bit of work and will fail if the promise needs to be chained!
describe('coreMenu directive', function() {
var $compile, $rootScope, apiServiceMock;
// BIG WARNING:
// This beforeEach() block MUST run before using any inject()
beforeEach(function () {
apiServiceMock = {};
apiServiceMock.get = jasmine.createSpy('apiServiceMock.get').and.callFake(function() {
return { // mock the promise
then: function(successCb, errorCb) {
// keep the callbacks to call them at our convenience
apiServiceMock._successCb = successCb;
apiServiceMock._errorCb = errorCb;
}
};
});
module(function($provide) {
// override the apiService in the DI container
$provide.value('apiService', apiServiceMock);
});
});
beforeEach(function () {
module('AdminTechPortal');
module('CoreLeftMenu.tpl.html');
inject(function (_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
});
});
it('replaces the element with the appropriate content', function() {
var element = $compile("<core-menu></core-menu>")($rootScope);
$rootScope.$digest();
// SAMPLE TESTS
expect(apiServiceMock.get).toHaveBeenCalledWith(...);
// test success
apiServiceMock._successCb(...);
expect(...) // things to expect on success
// test failure - probably in another it()
apiServiceMock._errorCb(...);
expect(...) // things to expect on error
});
});

Answer 2

Follow these steps:
add $httpBackend variable:
var $compile, $rootScope, $httpBackend;
Inject and assign on beforeEach
inject(function (_$compile_, _$rootScope_, _$httpBackend_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$httpBackend = _$httpBackend_;
});
Create an afterEach
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
test
it('replaces the element with the appropriate content', function() {
$httpBackend.expectGET('/Core/Menu/');
var element = $compile("<core-menu></core-menu>")($rootScope);
$httpBackend.flush();
$rootScope.$digest(); // Not sure if still needed
expect(element.html()).toContain('id="core-menu"');
});