量角器可以忽略 angular 中第 3 方插件的超时吗？

如何解决量角器可以忽略 angular 中第 3 方插件的超时吗？

我正在使用 amchart 在 Angular 应用中显示我的数据分析。如果我在包含 amchart 插件的页面上运行 E2E 测试，它无法完成（脚本超时）导致它使用图表的实时更新（动态）...

控制台中的这个命令 'getAllAngularTestabilities()' 显示页面上已经有待处理的宏任务，所以如果量角器在这里不工作，那完全没问题。

[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,…}
onStable: EventEmitter_ {_isScalar: false,observers: Array(2),…}
onUnstable: EventEmitter_ {_isScalar: false,…}
shouldCoalesceEventChangeDetection: false

我在那个页面上有 3 个图表，所以我检查了 ngzone 所说的：每秒钟都有一个请求，我无法关闭它们。我正在尝试在 amchart 的文档中找到解决方案，但我还没有找到任何东西...

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,…}
length: 3
__proto__: Array(0)

更新！

我可以通过一个很小的解决方法来避免这个问题。需要创建一个使用 runOutsideAngular() 的函数，如果我在回调中创建图表，则不会运行宏任务！

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

解决方法

是的，你可以忽略它。您需要禁用等待页面准备就绪的主量角器功能，如下所示

await browser.waitForAngularEnabled(false)

有关详细信息，请阅读here