Protractor E2E test - async Rest API call - angularjs

Question

I want to test a simple end to end flow - create a new account - using Protractor.
I have an AngularJS application contains a create account page where the user needs to fill a simple form and click submit.
Clicking submit triggers a method that is calling to an async method to create the account in my server.
When that function returns, the user is directed to a different page.
Here is my test (creatAccount.spec.js):
describe('Create Account Page Tests', function() {
it('createAccount success', function(){
browser.get('http://localhost:9001/#/createAccount');
element(by.model('user.organizationName')).sendKeys('Westeros');
element(by.model('user.firstName')).sendKeys('John');
element(by.model('user.lastName')).sendKeys('Snow');
element(by.model('user.email')).sendKeys('johnSnow#westeros.com');
element(by.model('user.password')).sendKeys('123');
element(by.model('confirmPassword')).sendKeys('123');
element(by.id('submitBtn')).click();
expect(browser.getCurrentUrl()).toEqual('http://localhost:9001/#/userManagement');
});
});
Here is my submit method:
$scope.submit = function() {
$scope.submitted = true;
UserService.createAccount($scope.user)
.then(function success(){
$state.go('userManagement');
}, function failure(){
$log.error("something went wrong");
});
};
Here is my UserService.createAccount method:
function createAccount(user){
var deferred = $q.defer();
APIService.sendRequest(APIService.ACTION().createAccount, undefined, user)
.then(function success(res) {
deferred.resolve();
}, function failure(reason){
$log.debug('create account failed. reason: ', reason);
deferred.reject(reason);
});
return deferred.promise;
}
And here is my APIService.sendRequest method:
function sendRequest(action, params, data){
var defferd = $q.defer();
var request = $resource(action.url, {}, {send: {method: action.method, isArray: action.isArray ? action.isArray : false, withCredentials: true}});
if (!params){
params = {};
}
request.send(params, data, function(res) {
defferd.resolve(res);
}, function(error) {
defferd.reject(getErrorReponseListError(error));
});
return defferd.promise;
}
My test is failing all the time since the page is not directed to the next page. It seems to me like the test does not wait for the async method to return even thought it should...
I've tried to call browser.waitForAngular() or browser.wait(5000) but nothing helps...

Answer 1

This line:
expect(browser.getCurrentUrl()).toEqual('http://localhost:9001/#/userManagement');
expects the browser URL to be that value right away. It does not wait for the URL to change. The click before that line completes, but all that means is that the click was delivered to the browser, not that the handler in the browser has completed (and its async anyway).
You need to teach your Protractor test to wait for the browser to reach an expected state. Something like this should work:
browser.wait(function() {
return browser.getCurrentUrl().then(function(url) {
return url === 'http://localhost:9001/#/userManagement';
});
});
So, instead of expecting the url to be what you say, this waits for the url to be what you want. After most interactions with the browser (e.g., submitting anything or any other interaction with the server) you need to wait for the page to get to its new state.