Testing an event while an ajax call is in progress using Protractor + Angular

Question

I am using protractor 1.7.0 and angular 1.2.

I have a functionality that when i click a button say 'Load Results' an ajax request is fired, meanwhile the results are coming back I see a button say 'Cancel Request' (to cancel the ongoing ajax request, this button gets hidden when ajax response is received).

Now to test it in protractor I am wirting something like this

//to load the results
element(by.css('#load-results')).click();

//to cancel ongoing ajax request to load results    
element(by.css('.search-cancelled')).then(function(){
  element(by.css('.search-cancelled')).click();
});

it gives me an error saying that element is not visible.

As far as i know protractor waits for angular to resolve its promises before executing the next statement. So till the time it reaches this code

element(by.css('.search-cancelled')).then(function(){
      element(by.css('.search-cancelled')).click();
    }); 

the ajax call has returned and thats why the element gets hidden.

Is there a way i can make protractor not wait for the angular promise and execute my code when the ajax request is going on?

Answer 1

Looks like you could do it this way:

$('#load-results').click();
waitElementToBeShown($('.search-cancelled'));
$('.search-cancelled').click();

Here is the code for help function:

var waitElementToBeShown = function (elm) {
    browser.wait(function () {
        return elm.isPresent();
    },15000);
    browser.wait(function () {
        return elm.isDisplayed();
    },15000);
};