Callback and Testing Highcharts

问题

I am currently using angular 9 with Highcharts.

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

Some instructions for running on application-side / test-side :

Test - side : inside angular.json file on line number 18, change

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

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

and do a refresh of the browser.

Application - side : Change exactly the opposite of previous.

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

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

Here are a few issues i am stuck upon :

I have used chart callback to get the chart instance , but it is not working ( inside hello.component.ts , line numbers 38 to 40 ). How should i call it and when does actually the callback happens in Highcharts ?
If suppose somehow i am able to assign the chart instance to chartCreated variable. Can i control the chart now, like line numbers 60 to 62 ( if i uncomment that ), will it work ? Basically i wanted to know the usefulness of updateFlag in Highcharts.
Unable to addSeries when ngOnChanges is called inside hello.component.ts
Inside the spec file hello.component.spec.ts i wanted to test the chart by putting a numeric data / adding a series on my own , like i did when onClick() is called. But jasmine shows error
```
   TypeError : Cannot read series of undefined
   TypeError : Cannot read property 'addSeries' of undefined
```
How to resolve these ?

EDIT 1 : Implemented ngOnChanges and ngOnInit and removed most of the code from app.component.ts to hello.component.ts

回答1:

As per @gsa.interactive suggestion , following test cases worked :

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

回答2:

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

来源：https://stackoverflow.com/questions/62095430/callback-and-testing-highcharts

标签

angular

typescript

unit-testing

Highcharts

karma-jasmine