After running ng e2e on my application, I encountered the following error:
Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds.
Inspecting the app.component.ts, it is evident that 'app' is published 15 seconds after subscription.
My understanding is that Protractor waits for all pending asynchronous tasks in the Angular application to complete. Further details are discussed below.
import { Component } from '@angular/core';
import * as Rxjs from 'rxjs';
import * as Operators from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: Rxjs.Observable<string>;
constructor() {
this.title = Rxjs.of('app').pipe(
Operators.delay(15000)
);
}
}
The change in app.component.html is as follows:
Welcome to {{ title | async }}!
All other components remain unchanged, with only the specified modifications.
While this example is trivial, my actual code serves a functional purpose. I require the ability to have Observables that may not emit values for extended periods of time (e.g., months).
Is there a way to utilize rxjs's delay operator in a manner that prevents timeout in end-to-end tests?
Alternatively, is there a method to indicate to Protractor that it does not need to wait on a specific Observable?
Methods I have attempted:
browser.waitForAngularEnabled(false)
browser.waitForAngularEnabled(false)While this temporarily resolves the waiting issue, it complicates matters since the application is Angular-based.
ngZone.runOutsideAngular(() => {...})
ngZone.runOutsideAngular(() => {...})This approach is ineffective as the prolonged operation is part of a view binding ({{ title | async }}), making it unsuitable for calling ngZone.runOutsideAngular.