AngularJS Protractor - How Do You Test an AJAX Login Call?

Question

I have a button that once clicked sends out an AJAX call in Angular's $promise format. When the login is successful, a $scope variable is changed and an element that looks like:

<section id="logged-in-section" ng-if="auth.user !== null">
    // Section to display if logged in
</section> 

is displayed. I am currently testing the above with the following:

loginButton.click();
browser.sleep(2000);
expect($("#logged-in-section").isDisplayed()).toBeTruthy();

browser.sleep(2000) idles the browser for two seconds before Protractor checks to see if logged-in-section has been displayed. If I take out browser.sleep(2000), the test fails since there is a lag between hitting the login button and the response returned from the server.

What's the syntax to chain the login button to the expect statement so that Protractor is only checking for #logged-in-section after the $promise is returned?

Answer 1

You can do this:

loginButton.click().then(function(){
   browser.waitForAngular().then(function (){ //this should wait for the angular digest process to finish
      expect($("#logged-in-section").isDisplayed()).toBeTruthy();
   })
});

or this should works to:

loginButton.click().then(function(){
   browser.wait(element(by.id("logged-in-section")).isDisplayed);
   expect($("#logged-in-section").isDisplayed()).toBeTruthy();
});