We Keep Coding

Get function return value inside promise on spyOn service - Jasmine Angularjs

I'm testing a function that receives a value from a promise, and concat this value (string) to an url. The implementation of the function it's ok.
var resp = {"payment": {
"additional_information": {
"skuSeatIds": "[{\"sku\":\"5234\",\"Description\":\"Advanced\",\"seatId\":792}]"
}}};
var promise = Promise.resolve(JSON.parse(resp.payment.additional_information.skuSeatIds));
var update = spyOn(doneService, 'getOrderInfo').and.returnValue(promise);
var url = controller.setSeatIdLink();
expect(url).toBe('http://localhost:4000/#!/search?type=Selector&seatId=792');
});
Then i have the function that call doneService.getOrderInfo()
function setSeatIdLink () {
doneService.getOrderInfo(store.get('orderId')).then(function(resp){
var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
vm.modalSelectorUrl = stri;
return vm.modalSelectorUrl;
});
}
vm.modalSelectorUrl is set with the url correctly. The spyOn returns the value fine. If i log "vm.modalSelectorUrl", the url it's ok. But i get undefined on the expect(url)...
If i hardcode the return outside the scope of .then(function(){ ... , the return works.
Any idea? Thanks!

Here your function setSeatIdLinkis not returning anything.
Return statement is inside then function and not in setSeatIdLink function.
And that's the reason it is returning undefined which gets stored in url.
Try asserting vm.modalSelectorUrl instead.
function setSeatIdLink () {
doneService.getOrderInfo(store.get('orderId')).then(function(resp){
var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
vm.modalSelectorUrl = stri;
return vm.modalSelectorUrl;
});
}
UPDATES
Change your function like this
function setSeatIdLink() {
var defer = $q.defer();
doneService.getOrderInfo(store.get('orderId')).then(function (resp) {
var stri = vm.modalSelectorUrl.concat(resp[0].seatId);
vm.modalSelectorUrl = stri;
defer.resolve(vm.modalSelectorUrl);
});
return defer.promise;
}
And test case like this
it('testcase', function (done) {
//your code
var url = controller.setSeatIdLink().then(function (url) {
expect(url).toBe('http://localhost:4000/#!/search?type=Selector&seatId=792');
done();
});
$scope.$apply();
});

You need to return a function that returns the promise. If you're using AngularJS best to stick with $q, although I'm sure it would work fine either way.
var mock_func = function(data) {
return $q.resolve(data);
};
spyOn(func, 'method').and.callFake(mock_func({
data: 'to_return'
}));

Nesting promises with $http in AngularJS 1.0.7

I´m trying to understand how promises work in Angular 1.0.7, but the syntax and the concept are difficult to me. I created a related previous post Nesting promises with $resources in AngularJS 1.0.7 that is working fine. However, when I try to do the same but replacing the $resource with an $http service, then it´s not working for me as expected.
The code never wait for the promise to come and I don´t get any result.
I attach the code:
// URL has to be parsed to get the destination, language and boatType
var parseURL = function() {
var language = $routeParams.language;
var url = $location.path();
var deferred = $q.defer();
var promise = deferred.promise;
promise.then(function success(result) {
var destination = result;
console.log("destination:" + destination);
searchBoats(destination);
});
parseDestination(url, language).then(deferred.resolve);
};
parseURL();
var parseDestination = function(url, language) {
console.log("parseDestination.begin");
var departure = UrlService.parseUrlDeparture(url);
var deferred = $q.defer(),
promise = deferred.promise;
TranslationService.getTranslatedDeparture(departure, language, API_SERVER_URL, deferred.resolve, deferred.reject);
return promise;
};
// The function in the service
getTranslatedDeparture: function(destination, language, api) {
var defered = $q.defer();
var destinationPromise = defered.promise;
$http.get("http://" + api + "/translatedDepartures?departure=" + destination + ";lang=" + language + ";matchStart=" + true).then(
//var destination = result.data.map(function (source) { return source.element_translation; });
defered.resolve
);
return destinationPromise;
}

You are using promises wrong in just about every way imaginable. Promises are intended to be chained and create new promises using .then(). And doing this will fix your bugs and cut the length of your code in half. As long as you have a promise to start with (which you do because $http.get returns a promise), you don't need, and shouldn't use, $q.defer():
// URL has to be parsed to get the destination, language and boatType
var parseURL = function() {
var language = $routeParams.language;
var url = $location.path();
parseDestination(url, language)
.then(function (result) {
var destination = result;
console.log("destination:", destination);
searchBoats(destination);
});
};
parseURL();
var parseDestination = function(url, language) {
console.log("parseDestination.begin");
var departure = UrlService.parseUrlDeparture(url);
return TranslationService.getTranslatedDeparture(departure, language, API_SERVER_URL);
};
// The function in the service
getTranslatedDeparture: function(destination, language, api) {
var url = "http://" + api + "/translatedDepartures?departure=" + destination + ";lang=" + language + ";matchStart=" + true;
return $http.get(url)
.then(function (result) { return result.data; });
}

How can I pass the value of a Promise to another Function?

I'm a little new to Javascript, and am having a hard time with the asynchronous aspect of it. My program checks values of two objects, where the second object doesn't have a vital property I need in order to complete the check. So I made a promise to get that value/property (the ID), and now I need to pass that ID value along to a check function. The check function should simply return a true/false to see if the ID's match. The value of the check function is passed to another function which then acts appropriately and edits the thing if necessary. So I basically can't access the value of tick outside it's brackets. I've included the snippet of my code where all of this is happening, as all of this is easier to visualize with it. Can someone provide me with a solution to this issue? Any advice would help immensely! I want to minimize the modification of the script as much as possible.
var Q = require('q');
getID = function(instance, person, callback){
var = deferred = Q.defer();
var url = 'www.blah.com';
var options = {
'url': url
};
request.get(options, function(error, response, body){
if (error) {
deferred.reject(error);
}else{
var res = body;
var obj = JSON.parse(res);
var id = obj.id;
deferred.resolve(id);
} else deferred(obj);
});
check = function(instance, thing1, thing2){
var tick = true;
getID(instance, thing2).then(function(id)){
var id_1 = thing1.id; // thing1 passed into check with ID
var id_2 = thing2.id; // thing 2 now has id attached to it
if( id_1 == id_2 ){
tick = true; // VALUE 1
}else{
tick = false; // VALUE 2
});
// NEED VALUE 1 OR 2 OF TICK HERE
if(thing1.name == thing2.name){
tick = true;
else{
tick = false;
}
// similar checks to name but with ADDRESS, EMAIL, PHONE NUMBER
// these properties are already appended to thing1 and thing 2 so no need to call for them
};
editThing = function(instance, thing, callback){
var checked = check(instance, thing1, thing2);
if(checked){
// edit thing
}else{
// don't edit thing
};

Since you're making a promise of work to be done, and you need output from that work, you'll need pass that promise along to the code who's wanting the final output.
I'm not going to try to rewrite the code from your post, so allow me to paraphrase:
getThing = function(thing){
var deferred = Q.defer();
...
request.get(options, function(error, response, body){
if (error) {
deferred.reject(error);
} else {
...
deferred.resolve(thingMadeFromResponse);
}
});
return deferred;
}
check = function(thingWeHave, thingWeNeedFetched){
return getThing(thingWeNeedFetched).then(function(thingWeFetched)){
// check logic
checked = thingWeHave.id == thingWeFetched.id;
...
return checked;
});
};
editThing = function(instance, thing, callback){
check(thingWeHave, thingWeNeedFetched).then(function(checked) {
if(checked){
// edit thing
}else{
// don't edit thing
}
});
};

Promises
“thenable” is an object or function that defines a then method.
p.then(function(value) {
// fulfillment
console.log(value + ' is now available and passable via function argument');
}, function(reason) {
// rejection
});

Promises in angularjs don't work

I have an factory that gets data from my backend:
as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams,$q) { //$q = promise
var deffered = $q.defer();
var data = [];
var abbdata = {};
abbdata.async = function () {
$http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
data = d.abbData;
deffered.resolve();
});
return deffered.promise;
};
abbdata.data = function() {
return data;
};
return abbdata;
});
A call my factory like this in my controller:
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
});
When I do a console.log($scope.abbData) outside my service call, just underneath, the result Is undifined. Why? Should not the $scope.abbData contain the data from my service after I call it?
EDIT:

You need to pass the data that should be returned into the resolve function like this:
deffered.resolve(data);
EDIT:
To get the data in the controller do this:
abbdata.async().then(function(data) {
$scope.abbData = data; //Contains data
});

Why don't you simply return that value from the async call in the first place?
You can chain promises so by attaching a success handler in your factory and returning a value from that you can simplify your code to:
as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams) {
return {
async: function () {
return $http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
return d.data.abbData;
});
}
}
});
And then use it like
abbdata.async().then(function(data) {
$scope.abbData = data; //Contains data
});

if you console.log($scope.abbData) outside the service call it should show undefined, since the call is asynchronous.
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
});
console.log($scope.abbData) // this should show undefined
The console.log($scope.abbData) just after setting the abbData should show the data
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
console.log($scope.abbData) // this should show the data
});
EDIT
you can use abbData from your service call like for example
angular.module('myApp', []).controller('HomeCtrl', function($scope, abbdata){
var updateUI;
$scope.abbData = [];
abbdata.async().then(function() {
$scope.abbData = abbdata.data(); //Contains data
updateUI();
});
updateUI = function(){
//do something with $scope.abbData
}
});
EDIT 2
On response to your query, I would do something like,
angular.module('myApp', [])
.controller('JobsCtrl', function($scope, $jobService) {
$scope.jobs = [];
$jobService.all().then(function(jobs) {
$scope.jobs = jobs;
});
})
.service('$jobService', function ($q, $http) {
return {
all: function () {
var deferred = $q.defer();
$http({
url: 'http://url',
method: "GET"
}).success(function (data) {
deferred.resolve(data);
}).error(function () {
deferred.reject("connection issue");
});
return deferred.promise;
}
}
});
associated view
<body ng-app = "myApp">
<div ng-controller = "JobsCtrl">
<div ng-repeat="job in jobs track by job.id">
<a href="#/tab/jobs/{{job.id}}" class="item item-icon-right">
<h2>{{job.job_name}}</h2>
<p>DUE DATE: {{job.job_due_date}}</p>
</a>
</div>
<div>
</body>
Here the service an all function which returns a promise, i.e. it will notify when data is fetched.
in the controller the service is called and as soon the service call is resolved the $scope.jobs is assigned by the resolved data.
the $scope.jobs is used in the angular view. as soon as the jobs data are resolved, i.e. $scope.jobs is assigned, the view is updated.
hope this helps

I had a quick look, I have 2 ideas:
First theory: your service is returning undefined.
Second theory: you need to run $scope.$apply();
See this fiddler: https://jsfiddle.net/Lgfxtfm2/1/
'use strict';
var GetAbbData = function($q) {
//$q = promise
var deffered = $q.defer();
var data = [];
var abbdata = {};
abbdata.async = function () {
setTimeout(function() {
//1: set dummy data
//data = [200, 201];
//2: do nothing
//
//3: set data as undefined
//data = undefined;
deffered.resolve();
}, 100);
return deffered.promise;
};
abbdata.data = function() {
return data;
};
return abbdata;
};
var abbdata = GetAbbData(Q)
abbdata.async().then(function() {
console.log(abbdata.data()); //Contains data
});
I have stripped away a lot of dependencies and replaced $q with Q just for my own ease.
In the above example, I first attempted to run the code with dummy data, the console output the expected data, then I tried to not assign the data, and I get an empty array. This is why I assume that if you are seeing 'undefined' you must be explicitly setting the value to 'undefined'.
That aside, I also noticed that you were testing the result by reading directly from $scope. I know that when not inside the angular scope, doing operations on the $scope object does not necessarily happen in a timely manner, and typing $scope.$apply() usually fixes this. Usually, when using $http, angular keeps you in the appropriate scope, but you are creating your own promise using $q so this could be another potential issue.
Finally, the other two answers have pointed out that you are not using promises in the standard way. Although your code works fine, it is not normal to set your data directly onto your service and retrieve it from there. You can keep your service stateless by simply resolving your promise with the data that you want to process in the then method as shown by the answers by Anzeo and Markus.
I hope I was able to find the solution, good luck.
Dipun

as.factory("abbdata", function GetAbbData($http,$rootScope,$routeParams,$q) { //$q = promise
var deffered = $q.defer();
var data = [];
var abbdata = {};
abbdata.async = function () {
$http.get($rootScope.appUrl + '/nao/summary/' + $routeParams['id']).success(function(d) {
data = d.abbData;
deffered.resolve(data);
});
return deffered.promise;
};
abbdata.data = function() {
return data;
};
return abbdata;
});

How to implement asynchronous computed observable with multiple $.ajax calls?

I'm attempting to implement an asynchronous computed observable as show here.
I can do it successfully for one ajax call. The challenge I have at the moment is how to perform various ajax calls in a loop building an array asynchronously and then returning the array to my computed observable array using jQuery promises.
Basically the HTML form works in the following way:
This a student course form.
For each row, users type the person number and on another column they'll type a list of course ids separated by commas. Eg 100, 200, 300.
The purpose of the computed observable is to store an array
containing course details for the courses entered in step 2.
The details are obtained by firing ajax calls for each course and storing HTTP response in the array.
I don't want users to wait for the result, thus the reason to implement an async computed observable.
My problem: I'm having problem returning the value of the final array to the observable. It's always undefined. The ajax calls work fine but perhaps I'm still not handling the promises correctly.
Here's the code for my class:
function asyncComputed(evaluator, owner) {
var result = ko.observable(), currentDeferred;
result.inProgress = ko.observable(false); // Track whether we're waiting for a result
ko.computed(function () {
// Abort any in-flight evaluation to ensure we only notify with the latest value
if (currentDeferred) { currentDeferred.reject(); }
var evaluatorResult = evaluator.call(owner);
// Cope with both asynchronous and synchronous values
if (evaluatorResult && (typeof evaluatorResult.done == "function")) { // Async
result.inProgress(true);
currentDeferred = $.Deferred().done(function (data) {
result.inProgress(false);
result(data);
});
evaluatorResult.done(currentDeferred.resolve);
} else // Sync
result(evaluatorResult);
});
return result;
}
function personDetails(id, personNumber, courseIds) {
var self = this;
self.id = ko.observable(id);
self.personNumber = ko.observable(personNumber);
self.courseIds = ko.observable(courseIds);
// Computed property to extract PIC details for additional PICs.
// This is computed observable which returns response asynchronously
self.courseDetails = asyncComputed(function () {
var courseIdsArray = self.courseIds().split(",");
var arr = [];
var arr_promises = [];
function getCourseDetails(courseId) {
var dfrd = $.Deferred();
var content = {};
content.searchString = courseId;
var url = 'MyURL';
return $.ajax(url, {
type: 'POST',
dataType: 'json',
data: requestData, // content of requestData is irrelevant. The ajax call works fine.
processdata: true,
cache: false,
async: true,
contentType: "application/json"
}).done(function (data) {
arr.push(new PicDetails(data.GenericIdentifierSearchResult[0]));
}).fail(function () {
alert("Could not retrieve PIC details");
}).then(function () {
dfrd.resolve();
});
}
if (courseIdsArray.length > 0) {
$.each(courseIdsArray, function (index, courseId) {
if (courseId.length > 0) {
arr_promises.push(getCourseDetails(courseId));
}
});
};
$.when.apply($, arr_promises).done(function () {
return arr;
})
}, this);
}

I think you dont really need a separate api/code for this.
You could just create observables for every input/value that changes on your site, and create a computed observable based on those.
e.g in rough pseudo code
self.id = ko.observable(id);
self.personNumber = ko.observable(personNumber);
self.courseIds = ko.observable(courseIds);
self.courseDetailsArray = ko.observableArray([]);
self.courseDetails = ko.computed(function() {
//computed the course details based on other observables
//whenever user types in more course ids, start loading them
$.get( yoururl, {self.courseIds and self.id}).success(data) {
when finished async loading, parse the data and push the new course details into final array
self.courseDetailsArray.push( your loaded and parsed data );
//since courseDetailsArray is observableArray, you can have further computed observables using and re-formatting it.
}
});

I have something a bit different from your approach, but you can build something like an asyncComputed out of it if you prefer:
make a simple observable that will hold the result
make a dictionary of promises that you'll basically keep in sync with the array of course ids
when the array of course ids change, add / remove from the dictionary of promises
wrap all your promises in a when (like you're doing) and set the result when they're all done
Basic idea:
var results = ko.observable([]);
var loadingPromises = {};
var watcher = ko.computed(function () {
var ids = ko.unwrap(listOfIds);
if (ids && ids.length) {
ids.forEach(function (id) {
if (!loadingPromises.hasOwnProperty(id)) {
loadingPromises[id] = $.get(url, {...id...});
}
});
var stillApplicablePromises = {};
var promises = []; // we could delete from loadingPromises but v8 optimizes delete poorly
Object.getOwnPropertyNames(loadingPromises).forEach(function (id) {
if (ids.indexOf(id) >= 0) {
stillApplicablePromises[id] = loadingPromises[id];
promises.push(loadingPromises[id]);
}
});
loadingPromises = stillApplicablePromises;
$.when.apply(this, promises).then(function () {
// process arguments here however you like, they're the responses to your promises
results(arguments);
});
} else {
loadingPromises = {};
results([]);
}
}, this);
This is the file (that may change) where you can see this "in real life": https://github.com/wikimedia/analytics-dashiki/blob/master/src/components/wikimetrics-visualizer/wikimetrics-visualizer.js
And the basic fiddle: http://jsfiddle.net/xtsekb20/1/