Can Protractor ignores the timeouts of 3rd party plugin in angular? - protractor

Question

I'm using amchart to show my data analytics in the Angular app. If I run an E2E test on that page that contains the amchart plugin, it's not able to finish (script timeout) cause it using real-time updates for charts (dynamic)...
This command 'getAllAngularTestabilities()' in console shows that has been pendingMacrotasks on page, so if the Protractor not working here, it's totally okay.
[Testability]
0: Testability
taskTrackingZone: TaskTrackingZoneSpec {name: "TaskTrackingZone", microTasks: Array(0), macroTasks: Array(3), eventTasks: Array(474), properties: {…}}
_callbacks: []
_didWork: true
_isZoneStable: true
_ngZone: NgZone
hasPendingMacrotasks: true
hasPendingMicrotasks: false
isStable: true
lastRequestAnimationFrameId: -1
nativeRequestAnimationFrame: ƒ requestAnimationFrame()
onError: EventEmitter_ {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
onMicrotaskEmpty: EventEmitter_ {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
onStable: EventEmitter_ {_isScalar: false, observers: Array(2), closed: false, isStopped: false, hasError: false, …}
onUnstable: EventEmitter_ {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
shouldCoalesceEventChangeDetection: false
I have 3 charts on that page, so I checked what NgZone says: Coming to a request in every second, and I can't turn off them. I'm trying to find the solution in amchart's documentation but I haven't found anything yet...
ZONE pending tasks=
(3) [ZoneTask, ZoneTask, ZoneTask]
0: ZoneTask
callback: ƒ ()
cancelFn: undefined
creationLocation: Error: Task 'macroTask' from 'setTimeout'. at TaskTrackingZoneSpec.push.FGvd.TaskTrackingZoneSpec.onScheduleTask (http://localhost:4200/vendor.js:54102:40) at ZoneDelegate.scheduleTask (http://localhost:4200/polyfills.js:9471:55) at Object.onScheduleTask (http://localhost:4200/polyfills.js:9365:69) at ZoneDelegate.scheduleTask (http://localhost:4200/polyfills.js:9471:55) at Zone.scheduleTask (http://localhost:4200/polyfills.js:9303:47) at Zone.scheduleMacroTask (http://localhost:4200/polyfills.js:9326:29) at scheduleMacroTaskWithCurrentZone (http://localhost:4200/polyfills.js:10227:29) at http://localhost:4200/polyfills.js:11679:34 at proto.<computed> (http://localhost:4200/polyfills.js:10542:52) at loop_1 (http://localhost:4200/vendor.js:23731:42)
data: {isPeriodic: false, delay: 1000, args: Arguments(2), handleId: 1516}
invoke: ƒ ()
runCount: 0
scheduleFn: ƒ scheduleTask(task)
source: "setTimeout"
type: "macroTask"
_state: "notScheduled"
_zone: Zone {_parent: Zone, _name: "angular", _properties: {…}, _zoneDelegate: ZoneDelegate}
_zoneDelegates: null
state: (...)
zone: (...)
__proto__: Object
1: ZoneTask {_zone: Zone, runCount: 0, _zoneDelegates: null, _state: "notScheduled", type: "macroTask", …}
2: ZoneTask {_zone: Zone, runCount: 0, _zoneDelegates: null, _state: "notScheduled", type: "macroTask", …}
length: 3
__proto__: Array(0)
UPDATE!
I can avoid this problem with a tiny workaround.
Need to create a function that using runOutsideAngular(), and if I create the chart inside the callback, no will be running macrotasks!
constructor(#Inject(PLATFORM_ID) private platformId, private zone: NgZone) {
}
// Run the function only in the browser
browserOnly(f: () => void): void {
if (isPlatformBrowser(this.platformId)) {
this.zone.runOutsideAngular(() => {
f();
});
}
}
ngOnInit(): void {
this.browserOnly(() => {
this.chart = am4core.create('line-chart-placeholder', am4charts.XYChart);
});
}

Answer 1

yes, you can ignore it. You need to disable main protractor's feature that waits for page to be ready, like this
await browser.waitForAngularEnabled(false)
for more info, read here