browser.wait() for ng-if directive

Question

I have this test:

it('should get alert', function() {
    browser.wait(element(by.css('[ng-if="alert"]')).isPresent());

    var alert = element(by.binding('alert'));
    expect(alert.getText()).toBe('Copy clicked!');
});

for this html:

<div ng-if="alert" class="ng-scope">
    <br>
    <b layout="row" layout-align="center center" class="md-padding">
      {{alert}}
    </b>
</div>

The browser is not waiting for the alert block to be present so the test is failing. If I use browser.sleep() to wait for it then it works but I don't want to use browser.sleep(). I have tried using browser.wait() with xpath, css path, className, and the css you see in the question. None of these have worked. Is it even possible to tell the browser to wait for an ng-if block?

SOLUTION:

it('should get alert', function() {
    browser.wait(function() {
        return element(by.css('[ng-if="alert"]')).isPresent();
    ), 10000};

    var alert = element(by.binding('alert'));
    expect(alert.getText()).toBe('Copy clicked!');
});

Answer 1

Try to return a promise that resolves to a boolean:

browser.wait(function() {
  var waitTimeInMilliseconds = 10000;
  return element(by.css('[ng-if="alert"]')).isPresent()
}, waitTimeInMilliseconds);

Let me know if it works.