$http request not running test for service - angularjs

Question

I have the following test for a service object and the promise doesn't return and neither does the http request get called from inside the service, but it works in browser testing.
'use strict';
describe('Service: AuthService', function () {
// load the controller's module
beforeEach(module('adminPanelAngularApp'));
var AuthService, AuthService, $rootScope;
// Initialize the controller and a mock scope
beforeEach(inject(function (_AuthService_, _$rootScope_) {
AuthService = _AuthService_;
$rootScope = _$rootScope_;
}));
it('it auths', function () {
AuthService.login(SOMECREDENTIALS).then(function(){
console.log('this doesnt output in log');
});
expect(3).toBe(3);
});
});
this is my service
angular.module('adminPanelAngularApp').factory('AuthService', ['$http', '$cookieStore', '$rootScope', '$location', '$q', function ($http, $cookieStore, $rootScope, $location, $q) {
var authService = {};
....
authService.get_current_user = function(){
return $rootScope.current_user;
}
authService.login = function (credentials) {
var url = REDACTED;
return $http.post(server+url).then(function (res) {
if (!res.data){
return false;
}
if (res.data.error){
$rootScope.login_error = res.data.error;
}
var user = {
email: res.data.email,
session: res.data.session,
uid: res.data.uid
}
$cookieStore.put('loginData', user);
$rootScope.current_user = user;
return user;
});
};
...
what am I doing wrong with the tests?
I know my code is pretty bad too, but if I can test this then i'm halfway there.

Answer 1

If you don't want to mock $http, I suggest you to use $httpBackend.
With $httpBackend you can mock the calls you make with $http.
Imagine this service:
app.factory('Auth', function($http) {
return {
login: function() {
return $http.post('/login');
}
};
});
The goal is to test that you make your $http.post and it returns successfully, so the idea is like:
describe('Service: Auth', function() {
var Auth, $httpBackend;
beforeEach(function() {
module('app');
inject(function(_Auth_, _$httpBackend_) {
Auth = _Auth_;
$httpBackend = _$httpBackend_;
$httpBackend.whenPOST('/login').respond(200);
});
});
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should do a proper login', function() {
var foo;
Auth.login().then(function() {
foo = "success";
});
$httpBackend.flush();
expect(foo).toBe("success");
});
});
So, for starters, we inject what we need (Auth and $httpBackend)
And then, we call the whenPOST of $httpBackend. Basically it does something like:
When someone does a POST to /login, respond it with 200
Then on the test, we call login which is going to do the $http.post. To process this $http.post, since it is async, we can simulate the real call doing a $httpBackend.flush() which is going to "process" the call.
After that, we can verify that the .then was executed.
What about the afterEach? We don't really need it for this example, but when you want to assert yes or yes that a call was made, you can change the whenPOST to expectPOST, to make a test fail if that POST is never made. The afterEach is basically checking the status of the $httpBackend to see if any of those expectation weren't matched.
On the other hand, you don't need to create a promise by hand. $http returns a promise for you, so you can return the $http call directly, and on the $http then you can:
return user;
That will simplify the implementation a little bit.
Demo here