Angular: protractor - count() not resolving and causing timeout

Question

I am trying to do simple count on my carousel e2e component testing

carousel.po.ts

import { browser, element, by, Key } from 'protractor';

export class CarouselDemoPage {
  navigateTo() {
    return browser.get('/design/carousel');
  }


  getCarouselComponent(index: number) {
     return element.all(by.css('cfc-carousel')).get(index);
  }



  getCarouselIndicators(index: number) {
    return this.getCarouselComponent(index).element(by.css('.indicators')).all(by.repeater('item in items'));
  }
}

And my spec file:

import { CarouselDemoPage } from './carousel.po';


describe('Carousel component', () => {
  let page: CarouselDemoPage;

  beforeEach(() => {
    page = new CarouselDemoPage();
    page.navigateTo();
  });

  it('At least one carousel component should exist', () => {
    expect<any>(page.getCarouselComponent(0)).toBeDefined();
  });

  it('Check correct number of indicators displayed', () => {
    expect<any>(page.getCarouselIndicators(0).count()).toEqual(4);
  });
});

I have all the latest or close to the latest at least packages

"@angular/core": "^5.0.0-beta.7", "jasmine-core": "~2.8.0", "protractor": "~5.1.2"

The first test runs fine, getting a time out on the second

1) Carousel component Check correct number of indicators displayed - Failed: Timed out waiting for asynchronous Angular tasks to finish after 20 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

While waiting for element with locator - Locator: By(css selector, cfc-custom-select)

Disclaimer I do have the setTimeout in ngAfterViewInit() here:

 ngAfterViewInit() {
    // Needs the timeout to avoid the "expression has changed" bug
    setTimeout(() => {
      this.items = this.viewItems.toArray().concat(this.contentItems.toArray());
      this.totalItems = this.items.length;
      this._first = this.items[0];
      this._last = this.items[this.totalItems - 1];

      this._setItemsOrder(this.currentFrame);
      this._setInterval();
    }, 0);
  }

Thus I tried the

browser.ignoreSynchronization = true;

and

browser.driver.sleep(50);

and

browser.waitForAngular();

but then I get the count to be 0

So after some debugging I figured out that setInterval in my carousel components breaks the test

should I use browser.ignoreSynchronization = true; ??

Any ideas?

Answer 1

So, because of setInterval and other timeout functionality in the carousel component, I needed to add the

browser.ignoreSynchronization = true;

and I slightly modified my getCarouselIndicators function to be:

getCarouselIndicators(index: number) {
    browser.ignoreSynchronization = true;
    return this.getCarouselComponent(index).all(by.css('.indicators li'));
}

Now test resolves and works perfectly!