回调和测试 Highcharts

Question

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

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

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

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

    "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。
在内部调用 ngOnChanges 时无法添加系列 hello.component.ts
在规范文件中 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

的大部分代码

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

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

回调和测试 Highcharts

Callback and Testing Highcharts

unit-testing

highcharts

typescript

karma-jasmine

angular