Make Geb work with AngularJS reliably, by waiting for the angular views to be resolved before attempting assertions. This uses the same onReady technique as Protractor.

angular-test-support.js

// Include this file in the head of your main layout.

window.MYAPP = window.MYAPP || {};

window.MYAPP.waitForAngular = function() {

    window.MYAPP.APP_READY = false;

    function done(err) {
        if (err) {
            console.error('Waiting for Angular:', err);
            return;
        }
        window.MYAPP.APP_READY = true;
    }

    var el = document.querySelector('html');

    try {
        if (!window.angular) {
            throw new Error('Angular could not be found on the window');
        }
        if (angular.getTestability) {
            angular.getTestability(el).whenStable(done);
        } else {
            if (!angular.element(el).injector()) {
                throw new Error('Root element (html) has no injector. This may mean it is not inside ng-app.');
            }
            angular.element(el).injector().get('$browser').notifyWhenNoOutstandingRequests(done);
        }
    } catch (err) {
        done(err.message);
    }
};

AngularJsAware.groovy

package extensions

trait AngularJsAware {

    boolean isAngularReady() {

        js.exec('window.MYAPP.waitForAngular();');
        waitFor {
            js.MYAPP.APP_READY == true
        }

    }

}

ExampleGebSpec.groovy

class ExampleGebSpec extends GebSpec {
  
  def 'Check that something is as it should be' {
    
    given:
      to ExamplePage
      
    expect:
      someResolvedText == 'This is fetched from a remote source'
    
  }
  
}

ExamplePage.groovy

class ExamplePage extends Page implements AngularJSAware {
  
  static at = {
    angularReady
  }
  
  static content = {
    someResolvedText { $('.some-selector').text()  }
  }
  
}

Hi,
We tried your solution, but cant get it running...
angularReady is never true!
I also think that there is something wrong with some variables...
In angular-test-support.js you name one variable window.MYAPP, but in AngularJsAware.groovy you named it "window.CRATE".
We named them identical an then waitForAngular() could be found, but APP_READY never gets true. :-/

Do you have a correctly configured repo oder a working demo?

Michael

We found the issue!
We had the ng-app on the body tag, but you require it to be on the html!

Didn't see your comment until now @miikeat - good catch!

With this implementation, we are seeing our Geb test runs almost double in time to run as compared with this functionality not being enabled. Has anyone else seen this? Are there any solutions?

Hi @kullmas

I'd hazard a guess that the reason it takes double the time is because your Angular pages are quite slow to get ready. Have you tried optimising your app somehow? Stripping out unused dependencies, large libraries etc? Is your client-side code optimised?

That's the first reason that comes to mind - since this code simply waits until Angular reports that each page has loaded.

Hi @antony,

Were you able to get Protractor to work with Geb?

TIA,

John

Hi @pbwebguy - I'm not sure what you mean by that. We use Geb as an alternative to Protractor, and this Gist is to give Geb the 'awareness' that protractor uses to ensure the page model is ready to be tested.