angularjs-e2e-testing-problem.js

/* Background: we're testing a UI that updates asynchronously at unknown intervals. */

// Let's start our test:
describe('watch UI for updates', function(){
  it('should test the UI periodically', function() {
    
    browser().navigateTo('http://localhost/mytestpage');
    expect(element('div.result').text()).toBe('running'); // Passes.
    
    // Meanwhile, the UI is auto-updating div.result at unknown intervals, so using sleep
    // is not possible. Some of the intervals may be 1-2 seconds, some of them may be 60-90
    // seconds.
    
    var $timeout = angular.injector(['ng']).get('$timeout');
    
    var checkResult = function() {
      // Here's the tricky part. We need to perform two separate testing actions depending on
      // what the text of 'div.result' is.
        
      // Annoyingly, we have to call pause() first, so that resume() actually exists.
      self.pause();
      
      // We have to resume first, so that element() will actually run:
      self.resume()
      
      element('div.result').query(function(el, done) { 
          
        var result = el.text();
        expect(result).toBe('running');
          
        if (result === 'failed') {
            
          // We're completely done with testing this UI. We want to move on to further tests.
          $timeout.cancel(self.checkingResult);
          
          // This is where the issue is: the tests after this never run, it's stuck in a 
          // paused state.
          
        }
        
        // Done with the element query.
        done();
          
      }
                                  
      // Make a reference to the timeout so we can cancel it later.
      self.checkingResult = $timeout(function() {
        checkResult();
      }, 2000);
      
    };
    
    // Run the checkResult in 5 seconds.
    setTimeout(function() {
      checkResult();
    }, 5000);

    // We have to pause() here, otherwise our next tests will run immediately (and change the
    // URL, etc.)
    pause();
    
  });
});