Timeout issue with Angular-UI carousel

[simonykq]

Hi, Why is my protractor testing always timeout ? I am pretty sure I did not use $timeout in my application code and my API has been correctly connected with my front-end code. Following is my testing code

var util = require('util')

var HomePage = function(){

    this.get = function(){
        browser.get('/')
    }

    this.latest_news = element.all(by.repeater('l_n in latest_news'));
    this.events      = element.all(by.repeater('event in events'));
    this.slides      = element.all(by.repeater('slide in slides'));
    this.states      = element.all(by.repeater('state in states'));
    this.currentYear = element(by.binding('currentYear'));
}


describe('fobh homepage', function() {

    var ptor     = protractor.getInstance(),
        homepage = new HomePage();

    beforeEach(function(){
        homepage.get();
        ptor.waitForAngular();
    });

    it('should get to the root url', function() {
        expect(ptor.getCurrentUrl()).toEqual('http://localhost:9000/#/');
    });

    it('should have one latest news', function() {
        var news = homepage.latest_news;
        expect(news.count()).toEqual(1);
    })

    it('should have at least one event', function(){
        var events = homepage.events;
        expect(events.count()).toBeGreaterThan(1);
    })

    it('should have 5 states', function(){
        var states = homepage.states;
        expect(states.count()).toEqual(5);
    })

    it('should have five slides', function(){
        var slides = homepage.slides;
        expect(slides.count()).toEqual(5);
    })

    it('should render current year', function(){
        var year = homepage.currentYear;
        expect(year.getText()).toEqual('2014');
    })


});

[juliemr]

Do you have any long-running $http calls from your page? Those can also cause timeouts. Is there one specific spec which times out, or do all of them?

[simonykq]

Hi, I manage to find out the reason why it timeout. It is basically I have the following code in controller

       $scope.slides = [
           {image: "/images/slideshow/slideshow-1.png"},
           {image: "/images/slideshow/slideshow-2.png"},
           {image: "/images/slideshow/slideshow-3.png"},
           {image: "/images/slideshow/slideshow-4.png"},
           {image: "/images/slideshow/slideshow-5.png"}
       ];

And then I have the following markup in my template

<carousel interval="5000">
  <slide ng-repeat="slide in slides">
    <img ng-src="{{slide.image}}" width="1000" height="300" style="margin:auto;">
  </slide>
</carousel>

If I commit out those code, protractor test will run smoothly.

I guess this would probably be a bug?

[juliemr]

Do carousel or slide use long timeouts or http calls?

[simonykq]

Hi, I found out the issue. The problem actually come from the carousel directive from angular-ui team. This directive use $timeout service under the hood to implement the interval property on those slides. Maybe they should change into using $interval service instead to let protractor testing not timeout

[juliemr]

@simonykq glad you find it - would you mind filing an issue with angular-ui?

[simonykq]

@juliemr Yes. That will be helpful. But I think there may already be existing similar issues on the angular-ui github home page

[juliemr]

FYI: code in question: https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js

Discussion: angular-ui/bootstrap#1630