回调和测试高图

问题描述 投票:1回答:2

我目前在Highcharts中使用角度9。

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

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

  1. Test-side:在第18行的angular.json文件中,更改
        "main": "src/main.ts",
    
        "main": "src/main-testing.ts",
    

并刷新浏览器。

  1. Application-side:与上一个完全相反。
       "main": "src/main-testing.ts",
    
       "main": "src/main.ts",
    

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

  1. 我已经使用图表回调来获取图表实例,但是它不起作用(在hello.component.ts中,行号38到40)。我应该怎么称呼它,回调实际上何时在Highcharts中发生?
  2. 如果假设我能够将图表实例分配给chartCreated变量。我可以控制现在绘制图表,就像行号60到62(如果i uncomment that)一样,它将起作用吗?基本上我想知道Highcharts中的usefulness of updateFlag
  3. [在hello.component.ts内部调用ngOnChanges时无法进行addSeries
  4. 在规格文件hello.component.spec.ts内,我想通过放置数字数据/添加一系列来测试图表我自己,就像调用onClick()时所做的那样。但是jasmine shows error
       TypeError : Cannot read series of undefined
       TypeError : Cannot read property 'addSeries' of undefined
    
    如何解决这些?

EDIT 1:实现ngOnChanges和ngOnInit,并将大部分代码从app.component.ts删除到hello.component.ts]

angular typescript unit-testing highcharts karma-jasmine
2个回答
1
投票

根据@ 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]);
  });

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;
    }
  }
© www.soinside.com 2019 - 2024. All rights reserved.