回调和测试 Highcharts答案

【问题标题】：Callback and Testing Highcharts回调和测试 Highcharts
【发布时间】：2020-05-29 22:23:54
【问题描述】：

我目前正在使用 Angular 9 和 Highcharts。

Link to the code :https://stackblitz.com/edit/angular-ivy-wdejxk

在应用程序端/测试端运行的一些说明：

Test - side : 在第 18 行的 angular.json 文件中，更改

    "main": "src/main.ts",

到

    "main": "src/main-testing.ts",

然后刷新浏览器。

Application - side : 与之前的完全相反。

   "main": "src/main-testing.ts",

到

   "main": "src/main.ts",

以下是我遇到的一些问题：

我已经使用 图表回调 来获取图表实例，但它不起作用（在 hello.component.ts 内，行号 38 到 40 ）。我应该如何调用它，回调实际上何时发生在 Highcharts 中？
如果假设我能够以某种方式将图表实例分配给 chartCreated 变量。我可以控制吗现在绘制图表，就像第 60 到 62 行一样（如果我取消注释），它会起作用吗？基本上我想了解 Highcharts 中的 usefulness of updateFlag。
在hello.component.ts 内部调用 ngOnChanges 时无法添加Series
在规范文件hello.component.spec.ts 中，我想通过输入数字数据/添加系列来测试图表我自己，就像我在调用 onClick() 时所做的那样。但是jasmine shows error
```
   TypeError : Cannot read series of undefined
   TypeError : Cannot read property 'addSeries' of undefined
```
如何解决这些？

编辑 1 ：实现 ngOnChanges 和 ngOnInit 并将大部分代码从 app.component.ts 删除到 hello.component.ts

【问题讨论】：

标签： angular typescript unit-testing highcharts karma-jasmine

【解决方案1】：

    If you add the ngOnInit lifecycle hook, you will get values:

    1. export class AppComponent implements OnInit {.....


    2. ngOnInit(){
            this.chartCallback = (chart) => {
                this.chartCreated = chart;
                console.log('chart: ' + chart.chartHeight);         // shows 400
                console.log('this.chartCreated: ' + this.chartCreated.chartHeight); // shows 400
            }
          }

       addNewDataToChart(){
            this.updateFlag = false;
            this.chartCreated.addSeries({                     
            data: [3,4,2],                                         
            type: 'line'                                           
         });
            this.updateFlag = true;
       }

3. onClick(){
    if(this.clicked === false){
      this.chartCreated.series[0].data[0].update(4);
      this.clicked = true;
    } else {
      this.chartCreated.series[0].data[0].update(1);
      this.clicked = false;
    }
  }

【讨论】：

您好@user12307613，请检查我的最新编辑，考虑到您的解决方案，我还对代码进行了一些更改，但它没有以某种方式工作。你能再检查一下吗？
嗨@KL_KISNE_DEKHA_HAI，我已经更新了 Stackblitz，以便您能够在图表中添加新条目。现在有一个名为“addNewDataToChart()”的函数负责：stackblitz.com/edit/…
您好@gsa.interactive，感谢您进行相应的更改。有用。你能告诉我为什么它不适用于 OnChanges 生命周期钩子吗？还有为什么回调函数在 ngOnInit 中起作用，而不是当我将它放在构造函数中时？
另外，什么时候使用 updateFlag ？就像在你的名为“addNewDataToChart()”的函数中一样，即使我删除它仍然有效......
嗨@KL_KISNE_DEKHA_HAI，Angular 有一个特殊的过程，如何以及何时初始化组件。这是一本关于该主题的不错的读物。将帮助您理解它：codecraft.tv/courses/angular/components/lifecycle-hooks

【解决方案2】：

根据@gsa.interactive 的建议，以下测试用例有效：

  it('should check for changes in the data of the series in charts ',()=>{
      component.chartCreated.series[0].data[0].update(5);
      //console.log(component.chartCreated);
      expect(component.chartCreated.series[0].yData).toEqual([5,2,3]);
  });

  it('should check for changes in the series in charts ',()=>{
    component.chartCreated.addSeries({
        data: [3,4,2],
        type: 'line'
    });

    //console.log(component.chartCreated);
    expect(component.chartCreated.series.length).toBe(2);
    expect(component.chartCreated.series[1].yData).toEqual([3,4,2]);
  });

【讨论】：