Обратный вызов и тестирование Highcharts

Question

В настоящее время я использую angular 9 с Highcharts.

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

Некоторые инструкции для работы на стороне приложения / на стороне тестирования :

1. Тестовая сторона : внутри angular.json файл в строке 18, измените

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

   на

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

и выполните refre sh браузера.

Приложение - сторона : изменить в точности на противоположное предыдущему. От

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

до

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

Вот несколько проблем, на которых я застрял:

1. Я использовал обратный вызов диаграммы , чтобы получить диаграмму экземпляр, но он не работает (внутри hello.component.ts, номера строк с 38 по 40). Как мне его вызвать и когда на самом деле происходит обратный вызов в Highcharts?
2. Если предположить, каким-то образом я могу назначить экземпляр диаграммы переменной chartCreated. Могу ли я теперь управлять диаграммой, например номерами строк с 60 по 62 (если я раскомментирую это), это будет работать? В основном я хотел знать usefulness of updateFlag в Highcharts.
3. Невозможно добавить серию, когда ngOnChanges вызывается внутри hello.component.ts
4. Внутри файла spe c hello.component.spec.ts Я хотел протестировать диаграмму, поместив данные numeri c / добавив серию самостоятельно, как я сделал, когда вызывается 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

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