Angular controller promises and testing - javascript

Im writing some unit tests for my controller which uses promises.
Basically this:
UserService.getUser($routeParams.contactId).then(function (data) {
$scope.$apply(function () {
$scope.contacts = data;
});
});
I have mocked my UserService. This is my unit test:
beforeEach(inject(function ($rootScope, $controller, $q, $routeParams) {
$routeParams.contactId = contactId;
window.localStorage.clear();
UserService = {
getUser: function () {
def = $q.defer();
return def.promise;
}
};
spyOn(UserService, 'getUser').andCallThrough();
scope = $rootScope.$new();
ctrl = $controller('ContactDetailController', {
$scope: scope,
UserService:UserService
});
}));
it('should return 1 contact', function () {
expect(scope.contacts).not.toBeDefined();
def.resolve(contact);
scope.$apply();
expect(scope.contacts.surname).toEqual('NAME');
expect(scope.contacts.email).toEqual('EMAIL');
});
This give me the following error:
Error: [$rootScope:inprog] $digest already in progress
Now removing the $scope.$apply in the controller causes the test to pass, like this:
UserService.getUser($routeParams.contactId).then(function (data) {
$scope.contacts = data;
});
However this breaks functionality of my controller... So what should I do here?
Thanks for the replies, the $apply is not happening in the UserService. It's in the controller. Like this:
EDIT:
The $apply is happening in the controller like this.
appController.controller('ContactDetailController', function ($scope, $routeParams, UserService) {
UserService.getUser($routeParams.contactId).then(function (data) {
$scope.$apply(function () {
$scope.contacts = data;
});
});
Real UserService:
function getUser(user) {
if (user === undefined) {
user = getUserId();
}
var deferred = Q.defer();
$http({
method: 'GET',
url: BASE_URL + '/users/' + user
}).success(function (user) {
deferred.resolve(user);
});
return deferred.promise;
}

There are a couple of issues in your UserService.
You're using Q, rather than $q. Hard to know exactly what effect this has, other than it's not typical when using Angular and might have affects with regards to exactly when then callbacks run.
You're actually creating a promise in getUser when you don't really need to (can be seen as an anti-pattern). The success function of the promise returned from $http promise I think is often more trouble than it's worth. In my experience, usually better to just use the standard then function, as then you can return a post-processed value for it and use standard promise chaining:
function getUser(user) {
if (user === undefined) {
user = getUserId();
}
return $http({
method: 'GET',
url: BASE_URL + '/users/' + user
}).then(function(response) {
return response.data;
});
}
Once the above is changed, the controller code can be changed to
UserService.getUser($routeParams.contactId).then(function (data) {
$scope.contacts = data;
});
Then in the test, after resolving the promise call $apply.
def.resolve(contact);
scope.$apply();

Related

Angular 2/4 - Is it possible to initialize a provider only after a promise is resolved?

In my provider's constructor I have something like:
constructor(
public http: Http
) {
this.http.get("api.php").toPromise().then(res=>this.res = res.json());
}
However, I only want this provider to be accessible only after this.http.get("api.php").toPromise() is resolved. Everything else should be the same as a normal provider, such as the way it is injected. Is it possible? How?
What I did with AngularJS :
initialize you attribute with var = $q.defer()
when you meet the requested value, use var.resolve(value)
And until you get the value, you can postpone treatments using var.promise.then(function (data) { ... })
Whole code of a service :
angular.module('myApp')
.service('myService', ['$http', '$q', function ($http, $q) {
s.myVar = $q.defer();
s.loadMyVar = function () {
$http({
method: 'GET',
url: "somewhere"
}).then(function successCallback(response) {
s.myVar.resolve(response.data);
});
};
s.getMyVar = function () {
return s.myVar.promise.then(function (data) {
return data;
});
};
return s;
}]);

Issue with jasmine spies call through

I am having trouble calling through to the actual implementation and I am getting this error:
TypeError: undefined is not an object (evaluating 'GitUser.GetGitUser('test').then') ...
Here are my codes:
app.controller('HomeController', ['$scope', 'GitUser', function ($scope, GitUser) {
$scope.name = "user";
GitUser.GetGitUser('test').then(function (data) {
console.log(data);
if (data) {
$scope.name = data;
}
});
}]);
app.factory('GitUser', function ($http) {
return {
GetGitUser: function (username) {
return $http.get('https://api.github.com/users/' + username)
.then(function success(response) {
return response.data.login;
});
}
};
});
Here is my unit test:
describe('HomeController Unit Test', function () {
var $controllerConstructor, scope;
beforeEach(module("AngularApp"));
beforeEach(inject(function ($controller, $rootScope) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
}));
it('should test if scope.name is test', function () {
// Act
GitUser = {
GetGitUser: function () { }
};
spyOn(GitUser, "GetGitUser").and.callThrough();
GitUser.GetGitUser();
$controllerConstructor('HomeController', {
'$scope': scope,
'GitUser': GitUser
})
// Assert
expect(GitUser.GetGitUser).toHaveBeenCalled();
expect(scope.name).toBe('test');
});
});
The problem is a bit more complex than just a missing inject ...
Here's an adjusted test:
https://plnkr.co/edit/ZMr0J4jmLPtDXKpRvGBm?p=preview
There are a few problems:
1) you are testing a function that returns a promise - so you need to also mock it that way (by using return $q.when(..) for example).
2) you are trying to test code that happens when your controller is created - the
GitUser.GetGitUser('test').then(function (data) {
console.log(data);
if (data) {
$scope.name = data;
}
});
should be wrapped in a function instead:
function init() {
GitUser.GetGitUser('test').then(function (data) {
console.log(data);
if (data) {
$scope.name = data;
}
});
}
and then make that available on your scope:
scope.init= init;
Then in your test call the function and verify your assertions. If you don't wrap it in a function it won't be testable.
Also - the mocking and the callThrough thing ... as you are testing the controller (and not the service) you can use callFake instead - the callFake function can return a Promise with a value (the one that you want to verify later) - then you can ensure that the controller part of the puzzle works.
var name = 'test';
// instead of trying to mock GitUser you can just callFake and be sure to return a promise
spyOn(GitUser, "GetGitUser").and.callFake(function() {
return $q.when(name);
});
I hope this all makes sense - the plunker should make things clear - I will add some more comments there.
I think you just miss something here
beforeEach(inject(function ($controller, $rootScope, _GitUser) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
GitUser = _GitUser;
}));

angular wait for variable is defined

I have 2 controllers and one service:
angular.module('objDescApp', ['ui.router', 'ui.bootstrap']);
angular.module('objDescApp').config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
'use strict';
$urlRouterProvider.otherwise('/');
$stateProvider
.state('object', {
url: '/{name}',
views: {
"body": {
controller: 'ObjectDetailCtrl',
template: '...'
}
});
angular.module('objDescApp').controller('ObjectListCtrl', function ($scope, $state, ConfigService) {
ConfigService.getConfig(function(){//get config from server
$scope.object = ConfigService.fillConfigForObjList(); //use config
}
}
angular.module('objDescApp').controller('ObjectDetailCtrl', ['$scope', '$stateParams', 'ConfigService', function ($scope, $stateParams, ConfigService) {
$scope.current_object = ConfigService.fillConfigForObjDetail(); //use config
}
angular.module('objDescApp').factory('ConfigService', function ($http, $rootScope) {
var jsonConf;
var confTemplate = {"sometemplate" : {}};
function fillConfigForObjList (){
... //use jsonConf variable , and always wait for init because of called only inside callback function of getConfig();
};
function fillConfigForObjDetail(){
... //use jsonConf variable , but doesnt wait for jsonConf initialization, so error var 'is undefined' here.So I need to add some waiting for 'jsonConf' initialization logic here
};
return {
jsonConf: jsonConf,
fillConfigForObjDetail: fillConfigForObjDetail,
fillConfigForObjList: fillConfigForObjList,
getConfig: function(callback){
$http({
method: 'GET',
url: endPointUrl,
transformResponse: undefined
}).then(
function successCallback(response) {
jsonConf = JSON.parse(response.data);
$rootScope.getConfigError = false;
callback();
},
function errorCallback(response) {
if(response.status == "404"){
jsonConf = confTemplate;
}else{
console.log("Get config error");
jsonConf = confTemplate;
$rootScope.getConfigError = true;
}
callback();
}
);
}
}
So, when I load page with main path '/' everything is OK, because 'ObjectListCtrl' controller triggers getConfig() function which sets 'jsonConf' variable after response, so I can naviagte between any states and all works fine cause 'jsonConf' already setted;
But If I re-load page with starting path state like '/{name}' , so 'ObjectListCtrl' controller trigers 'getConfig()' request to server , but in async way 'ObjectDetailCtrl' controller was triggered and its $scope.current_object = ConfigService.fillConfigForObjDetail() expression, which throw jsonConf is undefined error;
So could someone tell me how I can wait inside 'fillConfigForObjDetail()' function till 'jsonConf' variable init by getConfig() function.
Save the promise and chain from the promise.
var jsonConfPromise;
function getConfig() {
//save httpPromise
jsonConfPromise = $http({
method: 'GET',
url: endPointUrl,
transformResponse: undefined
}).then(
function successCallback(response) {
jsonConf = JSON.parse(response.data);
$rootScope.getConfigError = false;
//return for chaining
return jsonConf;
},
function errorCallback(response) {
if(response.status == "404"){
jsonConf = confTemplate;
}else{
console.log("Get config error");
jsonConf = confTemplate;
$rootScope.getConfigError = true;
}
//return for chaining
return jsonConf;
}
);
//return promise
return jsonConfPromise;
};
Your function that had problems can then chain from the promise.
function fillConfigForObjDetail(){
/*
... //use jsonConf variable , but doesnt wait for jsonConf
initialization, so error var 'is undefined' here.
So I need to add some waiting for 'jsonConf' initialization
logic here
*/
//chain from the promise
jsonConfPromise.then(function (jsonConf) {
//use resolved jsonConf
});
};
Also in your controller instead of using a callback, chain from the returned promise.
angular.module('objDescApp').controller('ObjectListCtrl', function ($scope, $state, ConfigService) {
var configPromise = ConfigService.getConfig();
configPromise.then(function() {
$scope.object = ConfigService.fillConfigForObjList();
});
});
The AngularJS framework uses promises instead of callbacks.
For more information on chaining promises, see AngularJS $q Service API Reference -- chaining promises.
Because calling the then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.1

Unittest case using Jasmine for http post method

I have tried to write a unit test case for post method in angular service. I got $http is undefined error. below is my code. any one tell me what i am missing.
i am adding module using separate file.
service code
sample.factory('AddProductTypeService', function () {
return {
exciteText: function (msg) {
return msg + '!!!'
},
saveProductType: function (productType) {
var result = $http({
url: "/Home/AddProductTypes",
method: "POST",
data: { productType: productType }
}).then(function (res) {
return res;
});
return result;
}
};
});
Jasmine
describe("AddProductTypeService UnitTests", function () {
var $rootScope, $scope, $factory, $httpBackend, basicService,createController, authRequestHandler;
beforeEach(function () {
module('sampleApp');
inject(function ($injector) {
basicService = $injector.get('AddProductTypeService');
// Set up the mock http service responses
$httpBackend = $injector.get('$httpBackend');
});
});
// check to see if it does what it's supposed to do.
it('should make text exciting', function () {
var result = basicService.exciteText('bar');
expect(result).toEqual('bar!!!');
});
it('should invoke service with right paramaeters', function () {
$httpBackend.expectPOST('Home/AddProductTypes', {
"productType": "testUser"
}).respond({});
basicService.saveProductType('productType');
$httpBackend.flush();
});
});
error :
ReferenceError: $http is not defined
Thanks in advance
You have to inject the $http service into your service
sample.factory('AddProductTypeService', ['$http' ,function ($http) {
/* ... */
}]);
https://docs.angularjs.org/guide/di

how to return rejected/failure promise to through jasmine spy to an angular controller in a unit test

I am using jasmine for testing my angular controllers.
I am catching errors and success in the .then(successCallback, errorCallback)
Although it is working fine on the bases of live functionality but am confused how to write a spy for returning an error as it is always caught in the successCallback()
Following is the controller :-
angular.module('myApp')
.controller('LoginCtrl', function ($scope, $location, loginService, SessionService) {
$scope.errorMessage = '';
$scope.login = function () {
var credentials = {
email: this.email,
password: this.password
};
SessionService.resetSession();
var request = loginService.login(credentials);
request.then(function(promise){ //successfull callback
if (promise['status'] === 200){
//console.log('login');
$location.path('/afterloginpath');
}
},
function(errors){ //fail call back
// console.log(errors);
$location.path('/login');
});
};
});
My test case :-
'use strict';
describe('Controller: LoginCtrl', function () {
// load the controller's module
beforeEach(module('myApp'));
var LoginCtrl, scope, location, login, loginReturn, session;
var credentials = {'email': 'email#email.com', 'password': 'admin123'};
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope, $location, _loginService_, _SessionService_) {
scope = $rootScope.$new();
LoginCtrl = $controller('LoginCtrl', {
$scope: scope
});
location = $location;
login = _loginService_;
session = _SessionService_;
scope.errorMessage = '';
spyOn(login, "login").andCallFake(
function(){
return {
then: function(response){
response(loginReturn);
}
}
}
);
spyOn(session, "setName").andCallFake(function(){
return true;
});
}));
it('should go to login when login fail', function () {
loginReturn = function(){
return{
successfullyCallback: {throwError:true},
failCallback: {status: 400, 'data' : {'errors' : [{"type":"invalid_data","target":"email,password"}]}}
}
};
var wrong_creds = {email: 'wrong#email.com', password: 'wrong_password'};
scope.email = wrong_creds.email;
scope.password = wrong_creds.password;
scope.login();
expect(location.path()).toBe("/login");
expect(scope.errorMessage).toBe('username or password combination is invalid');
});
});
I find it easier to use actual promises for mocked services as it removes a lot of nested functions and is a lot easier to read.
Relevant snippets ($q needs to be injected in beforeEach):
deferred = $q.defer();
spyOn(login, 'login').andReturn(deferred.promise);
...
deferred.reject({ ... });
After resolving or rejecting the promise you need to call scope.$digest() so angular can process it.

Categories