Ng-lazyload-image: Protractor Timeouts

Created on 6 Dec 2016  ·  7Comments  ·  Source: tjoskar/ng-lazyload-image

When running protractor test they will timeout on any component using the lazy load directive. Protractor watches the ngZone to know when pending xhr calls, timeouts and intervals are completed before running.
In the scroll-listener.ts the .sampleTime(100, scheduler) creates a interval that wont ever end during a protractor test. I found a way arount this by the adding the following code to the directive

ngAfterContentInit() {
    this.ngZone.runOutsideAngular(() => { // run outside angular
      this.scrollSubscription = getScrollListener(this._scrollTarget)
        .filter(() => this.isVisible())
        .take(1)
        .switchMap(() => this.loadImage(this.lazyImage))
        .do(() => this.setImage(this.lazyImage))
        .finally(() => this.setLoadedStyle())
        .subscribe(() => this.ngOnDestroy(),
        error => {
          this.setImage(this.errorImg || this.defaultImg);
          this.ngOnDestroy();
        });
    });
  }

According to this https://github.com/angular/protractor/issues/3349#issuecomment-232253059 Protractor watches the main ngZone so if we run the interval out of it protractor run successfully. I'm not sure how this would work with the protractor tests on this project but I can try to make a pull request when I get the chance.

Most helpful comment

Sure, I'll see if I can get one in within the next week :)

All 7 comments

Thanks for your feedback.
I can however not reproduce this. I'm using protractor in this project and it seams to work fine. But having said that, it may be a good idea to use ngZone.runOutsideAngular for performance improvement. But if we are using ngZone.runOutsideAngular, we need to use ChangeDetectorRef after we have lazy loaded the image, right? So angular knows that the view needs to rerender.

Since I can not reproduce this and it seams that you have a working solution. Do you want to submit a PR?

Sure, I'll see if I can get one in within the next week :)

I created a new version of the plugin. Can you try it out: npm install [email protected] to see if it fix the problem?

Sure! I'll try it out today

Closing this. Let me know if you still get timeouts.

@tjoskar just tested this today and it works, thank you for the fix! :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

walfro picture walfro  ·  11Comments

stratio84 picture stratio84  ·  6Comments

AzerHeshim picture AzerHeshim  ·  5Comments

LobeTia picture LobeTia  ·  6Comments

lares83 picture lares83  ·  3Comments