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

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);
  });
}

question from:https://stackoverflow.com/questions/65950580/can-protractor-ignores-the-timeouts-of-3rd-party-plugin-in-angular

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