We Keep Coding

access variables declared outside $q resolve function, inside the resolve function

I have a function(uploadOne) inside fileUpload service that uses $q and returns a promise:
function uploadOne(some input)
{
var deferred = $q.defer();
if (everything is OK) deferred.resolve(some Data);
else deferred.reject(some error);
return deferred.promise;
}
I inject fileUpload service and call uploadOne function inside my controller:
.controller('myController', ['$scope', 'lessonsService', 'fileUpload',
function ($scope, lessonsService, fileUpload) {
//outside variable
$scope.lessonData = {};
fileUpload.uploadOne(some input data).then(function (some response data) {
console.log($scope.lessonData); //is undefined
lessonsService; //is undefined
}, function (err) {
//some code here
});
}])
The problem is that the variable declared outside the success function ($scope.lessonData) is undefined. In addition, I cannot even use my other service (lessonsService) there since it is also undefined! I've seen the same behavior in other posts but none of them help. What mistake am I making?
As you noticed the code above is a simplified version of my real code.
Here is my real code. I'm using ng-file-upload to upload a photo in my mongoDB database. When the image is stored in the database, the id of the image is returned from the server:
.controller('UserPanelPostsController', ['$scope', 'lessonsService', 'fileUpload',
function ($scope, lessonsService, fileUpload) {
//outside variable
$scope.lessonData = {};
$scope.submitLesson = function () {
fileUpload.uploadOne($scope.file).then(function (imgData) {
imgData; //is OK
console.log($scope.lessonData); //is undefined
lessonsService; //is also undefined
}, function (err) {
//some code here
});
};
}])
Here is my service:
.service('fileUpload', ['$resource', '$http', 'baseURL', 'Upload', '$q',
function ($resource, $http, baseURL, Upload, $q) {
var deferred = $q.defer();
this.uploadOne = function (file) {
Upload.upload({
url: baseURL + 'pictures',
data: {file: file}
}).then(function (resp) {
deferred.resolve(resp.data);
}, function (resp) {
deferred.reject(resp.status);
}, function (evt) {
//some code here
});
return deferred.promise;
};
}])

Testing angular $http inside promise chain with mocha

I have jsdom/mocha/chai set up for backend angular testing.
I have a service that essentially does this (intentionally no post data):
app.service('testService', ['config', '$http', function(config, $http) {
function getSpecificConfig(type) {
return config.getConfig()
.then(function(config) {
// config is coming back defined;
// $http timesout
return $http({method: 'post', url: 'http://localhost:2222/some/path', withCredentials: true});
})
.then(function(res) {
return res.data.config[type];
})
.catch(function(err) {
//handles err
});
};
return {
getConfig: getConfig
}
}]);
my test is:
/* jshint node: true */
/* jshint esversion: 6 */
let helpers = require(bootstrapTest),
inject = helpers.inject,
config,
specificConfig,
mockResponse,
$httpBackend,
$rootScope;
//config service
require('config.js');
//testService I'm testing
require('testService');
beforeEach(inject(function($injector, _$httpBackend_) {
config = $injector.get('config');
specificConfig = $injector.get('testService');
$rootScope = $injector.get('$rootScope');
$httpBackend = _$httpBackend_;
$httpBackend.when('POST', 'http://localhost:2222/some/path')
.response(function(data) {
//would like this to fire
console.log('something happened');
mockResponse = {data: 'some data'};
return mockResponse;
});
}));
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectations();
$httpBackend.verifyNoOutstandingRequest();
});
describe ('this service', function() {
beforeEach(function() {
$httpBackend.expect('POST', 'http://localhost:2222/some/path');
$rootScope.$apply(function() {
return specificConfig('something');
});
});
it ('returns the specific config', function() {
expect(mockResponse).to.equal('some data');
})
});
Problem:
When the test is run, the config.getConfig() is resolving properly but the $http leads to a mocha timeout (2000ms) and the afterEach hook throws an Unsatisfied request.
My understanding of this may be completely incorrect so please feel free to educate me on the correct approach (here was my approach):
1) require all necessary dependencies.
2)inject them and set up a $httpBackend listener which fires the test response when the real http is fired.
3) $rootScope.$apply() any promises as the resolution of them is tied to the angular lifecycle.
4) the first before each sets the listener, the second before each fires the service which fires the $http allowing $httpBackend to fire and set the mockResponse.
5) test mock response.

If you need to return promises in your mocked HTTP requests you can use angular-mocks-async like so:
var app = ng.module( 'mockApp', [
'ngMockE2E',
'ngMockE2EAsync'
]);
app.run( [ '$httpBackend', '$q', function( $httpBackend, $q ) {
$httpBackend.whenAsync(
'GET',
new RegExp( 'http://api.example.com/user/.+$' )
).respond( function( method, url, data, config ) {
var re = /.*\/user\/(\w+)/;
var userId = parseInt(url.replace(re, '$1'), 10);
var response = $q.defer();
setTimeout( function() {
var data = {
userId: userId
};
response.resolve( [ 200, "mock response", data ] );
}, 1000 );
return response.promise;
});
}]);

service promise not resolving with karma

I have a service factory that connects and interacts with an api for data. Here is the service:
angular.module('dbRequest', [])
.factory('Request', ['$http', 'localConfig', function($http, localConfig){
return {
getDataRevision: function(){
return $http({
url: localConfig.dbDataUrl,
method: "GET",
crossDomain: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
}
}
}]);
Taking cues from this answer, This is how I am testing the method:
describe('Service: Request', function () {
var $scope, srvMock, $q, lc, $httpBackend;
beforeEach(module('webApp'));
beforeEach(inject(function($rootScope, Request, _$q_, _$httpBackend_, localConfig){
$scope = $rootScope.$new();
srvMock = Request;
$q = _$q_;
$httpBackend = _$httpBackend_;
lc = localConfig;
$httpBackend.expect('GET', lc.dbDataUrl);
$httpBackend.when('GET', lc.dbDataUrl).respond({
success: ["d1","d2", "d3"]
});
}));
it('should return a promise', function(){
expect(srvMock.getDataRevision().then).toBeDefined();
});
it('should resolve with data', function(){
var data;
var deferred = $q.defer();
var promise = deferred.promise;
promise.then(function(res){
data = res.success;
});
srvMock.getDataRevision().then(function(res){
deferred.resolve(res);
});
$scope.$digest();
expect(data).toEqual(["d1","d2", "d3"]);
})
});
should return a promise passes, but the next should resolve with data fails with this error:
Expected undefined to equal [ 'd1', 'd2', 'd3' ].
However, the service method getDataRevision is getting called, but not getting resolved by the mock promise in the test. How do I make the correction?

Currently you are expecting mocked data to be there in data variable without flushing httpRequests, but that won't happen till you flush all the httpRequests. What $httpBackend.flush() does is, it returns mock data to that particular request that you have did using $httpBackend.when('GET', lc.dbDataUrl).respond.
Additionally you don't need to create extra promise which would be an overhead. Instead of having custom promise you could have utilize service function returned promise itself like below.
Code
it('should resolve with data', function(){
var data;
srvMock.getDataRevision().then(function(res){
data = res.success;
});
$scope.$digest();
$httpBackend.flush(); //making sure mocked response has been return
//after .then evaluation only below code will get called.
expect(data).toEqual(["d1","d2", "d3"]);
})

Angular JS Method GET inside RUN after CONFIG

I need to do a request inside the RUN method to retrieve de user data from an api.
The first page (home), depends on the user data.
This is the sequence of dispatchs in my console:
CONFIG
RUN
INIT GET USER DATA
SIDEBAR
HOME
SUCCESS GET USER DATA
My problem is, i need to wait user data before call sidebar and home (controller and view) and i don't know how can i do this.
UPDATE
I have this until now:
MY CONFIG:
extranet.config(['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
// My ROUTE CONFIG
console.log('CONFIG');
}]);
My RUN:
extranet.run(function($rootScope, $location, $http, Cookie, Auth, Session) {
console.log('RUN');
var token = Cookie.get('token');
// The login is done
var success = function (data) {
Session.create(data);
console.log('USER DATA SUCCESS');
};
var error = function () {
$location.path('/login');
};
// GET USER DATA
Auth.isAuthenticated().success(success).error(error);
});
MY CONTROLLER MAIN:
extranet.controller('MainCtrl', function ($scope, $location) {
console.log('MAIN CONTROLLER');
});

By using resolver
extranet.config(['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
// My ROUTE CONFIG
$routeProvider.when('/', {
templateUrl: "/app/templates/sidebar.html",
controller: "siderbarController",
title: "EventList",
resolve: {
events: function ($q, Cookie,Session) {
var deffered = $q.defer();
Cookie.get('token').$promise
.then(function (events) {
Session.create(data);
console.log('USER DATA SUCCESS');
deffered.resolve(events);
}, function (status) {
deffered.reject(status);
});
return deffered.promise;
}
}
}]);
I hope you get some idea.

If you are using AngularJS methods for server requests you will get a promise. A promise gets resolved as soon as the response is recieved. All defined callbacks "wait" until the resolve.
Naive solution
So, you will use $http or even $resource if you have a REST-like backend:
var promise = $http.get(userDataUrl, params)
$rootScope.userDataPromise = promise;
After that you can use that promise whereever you need the data:
$rootScope.userDataPromise.then(myCallback)
Better solution
Using $rootScope for that purpose is not an elegant solution though. You should encapsulate the Userdata stuff in a service and inject it whereever you need it.
app.factory('UserData', ['$http',
function($http) {
var fetch = function() {
return $http.get(userDataUrl, params)
};
return {
fetch: fetch
};
}
]);
Now you can use that service in other modules:
app.controller('MainCtrl', ['$scope', 'UserService',
function ($scope, UserService) {
var update = function(response) {
$scope.userData = response.userData;
}
var promise = UserService.fetch();
promise.then(update)
}
);

Angular controller promises and testing

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();