mocking angular service for testing controllers - angularjs

Question

let me present first the scenario.
this is my angular code.
//this is my controller
function viewUserProfile($scope, $http, svcUserInfo) {
svcUserInfo.userInfo(null, function(data) {
$scope.profile = loadProfile(data);
}, function() {
Console.log('Error getting User info.');
});
}
so basically i am just loading a profile object on $scope.profile (e.g first name, last name,etc) using svcUserInfo REST service.
the service is created like this:
anythingHere.factory('svcUserInfo', ['$resource', function($resource) {
return $resource(SVC_USER, null, {
userInfo: {method: 'GET'}
});
}]);
now this one works perfectly so just assume other declarations or initialization before and after those codes.
now i am writing test codes using jasmine-maven-plugin here
what i want to achieve is to mock the service with and populate $scope.profile. and this is what i have so far:
describe('User Profile Controller', function() {
var rootScope, scope,
location = {}, route = {}, http = {}, userProfCtrl,
mockSvcUserInfo, userInfoPromise;
beforeEach(module('myApp'));
beforeEach(module(MOD_USERPROF));
beforeEach(module(function($provide){
$provide.factory('svcUserInfo', ['$q', function($q) {
var profile = {
nameType: 'Personal Name',
firstName: 'Joseph',
lastName: 'Bada',
email: 'email#email.com',
hasReferrer: false,
referrer: null,
country: 'myCountry',
state: 'myState',
city: 'myCIty',
address1: 'this is address1',
address2: 'this is address2',
zipcode: '9999',
phone: '[phone]',
maxProduct: '2'
};
function userInfo(data){
if(userInfoPromise){
return $q.when(profile);
} else {
return $q.reject();
}
}
return{
userInfo: userInfo
};
}]);
}));
beforeEach(inject(function($rootScope, $controller, svcUserInfo){
scope = $rootScope.$new();
rootScope = $rootScope.$new();
mockSvcUserInfo = svcUserInfo;
spyOn(mockSvcUserInfo, 'userInfo').and.callThrough();
userProfCtrl = $controller(CTRL_USERPROF, {
$scope: scope,
svcUserInfo: mockSvcUserInfo,
$rootScope: rootScope
});
}));
it('should call the rest service for User Profile and populate profile', function() {
userInfoPromise = true;
scope.$digest();
rootScope.$digest();
expect(mockSvcUserInfo.userInfo).toHaveBeenCalled();
expect(scope.profile).not.toBe(undefined); // or undefined anything like these
it("profile object: " + JSON.stringify(scope.profile)); // this is for debugging purposes so that i can check if scope.profile has values or not.
});
});
now on the spec i expect that after mockSvcUserInfo.user have been called.
then scope.profile must be populated/initialized since base on my code on the controller is that on successful call of the service, $scope.profile must be populated.
the result of this so far is that scope.profile goes undefined
i based my test codes from here:
http://www.sitepoint.com/mocking-dependencies-angularjs-tests/#mocking-methods-returning-promises
please help me, thanks
EDIT
I have updated the code coming from the first answer
it('should call the rest service for User Profile', inject(function($rootScope,$controller,svcUserInfo) {
scope = $rootScope.$new();
rootScope = $rootScope.$new();
userInfoPromise = true;
mockSvcUserInfo = svcUserInfo;
spyOn(mockSvcUserInfo, 'userInfo').and.callThrough();
userProfCtrl = $controller(CTRL_USERPROF, {
$scope: scope,
svcUserInfo: mockSvcUserInfo,
$rootScope: rootScope
});
scope.$digest();
rootScope.$digest();
expect(mockSvcUserInfo.userInfo).toHaveBeenCalled();
expect(scope.profile).not.toBe([]);
it("hello" + JSON.stringify(scope.profile));
}));
still scope.profile is undefined

Answer 1

I think i know the problem.
You set userInfoPromise to true in your test, but your controller is created in the setup process, and by the time you set the boolean value the service call is done.
Either set userInfoPromise inside beforeeach or move the controller creation itno the test.