Функция Highcharts не покрыта юнит-тестами с Karma + Jasmine

Question

Поскольку я пытаюсь использовать ваш пакет Highcharts, у меня возникает проблема при модульном тестировании компонента, использующего функцию Highcharts.

Вот мой контекст:

У меня есть компонент (единственный), который использует Highcharts. В веб-клиенте, когда я запускаю модульное тестирование для этого компонента, функция диаграммы legendItemClick не покрывается.

Код ниже - это Javascript переданный код. Вот мой оригинальный файл машинописи:

let dsCapacityChartOptions = {
  chart: {
    type: 'pie',
    spacing: [0, 10, 2, 10],
    margin: [-10, 0, 30, 0]
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    pie: {
      shadow: false,
      colors: ['#3E7BBF', '#CBCBCB', '#92B2D9'],
      point: {
        events: {
          legendItemClick: function () {
            return false;
          }
        }
      }
    },
    series: {
      states: {
        hover: {
          enabled: false
        },
        inactive: {
          opacity: 1
       }
      }
    }
  },
  tooltip: {
    outside: true,
    style: {
      color: '#000000',
      opacity: 1,
      fontSize: '12px',
      fontFamily: 'Metropolis,Avenir Next,Helvetica Neue,Arial,sans-serif'
    },
    formatter:
      function () {
        return '<b>' + this.point.x + '</b>: ' + this.point.formattedCapacity + " (" + this.percentage.toFixed(2) + "%)";
      }
  },
  series: [{
    type: 'pie',
    name: this.labelsObj["vsc.portlet.dsCapacity.label"],
    size: '80%',
    innerSize: '70%',
    showInLegend: true,
    dataLabels: {
      enabled: false
    },
    data: []

  }],
  legend: {
    labelFormatter: function () {
      return this.x + ": " + this.formattedCapacity;
    },
    align: 'center',
    layout: 'vertical',
    itemStyle: {
      color: '#454545',
      fontWeight: '500',
      fontSize: '12px',
      fontFamily: 'Metropolis,Avenir Next,Helvetica Neue,Arial,sans-serif'
    },
    itemHoverStyle: {
      color: '#454545',
      cursor: 'default'
    }
  },
  exporting: { enabled: false }
};

Вот что я делаю, чтобы заставить модульные тесты работать -

it('should call legendItemClick', () => {
  let spy = spyOn(component.dsCapacityChartOptions.plotOptions.pie.point.events, 'legendItemClick')
  component.dsCapacityChartOptions.plotOptions.pie.point.events.legendItemClick();
  expect(spy).toHaveBeenCalledTimes(1);
})

Функция Highcharts, не покрытая модульными тестами с Karma + Jasmine

Ниже приведен фрагмент покрытия кода - Покрытие кода

Answer 1

Ваш юнит-тест не имеет смысла. Вы явно вызываете функцию и проверяете, действительно ли она была вызвана. В вашем случае legendItemClick возвращает значение, поэтому вы должны проверить результат вызова. Нет необходимости использовать spy.

. Тогда тест будет выглядеть следующим образом:

it('#legendItemClick should return false', () => {
  const result = component.dsCapacityChartOptions.plotOptions.pie.point.events.legendItemClick();
  expect(result).toBe(false);
})