Юнит-тест для всплывающей подсказки Highcharts в Angular

Question

Я использую Highcharts API в Angular 7 +.

Предположим, в некоторых компонентах мой тип диаграммы ' area ' и мой Код всплывающей подсказки выглядит следующим образом:

tooltip:{
    shared : true,
    outside : true,
    useHTML : true,
    formatter(){
        let str = `<table>`;
        this.points.forEach((point)=>{
            str = str.concat(
                `<tr>
                    <td style="color: ${point.series.color};font-size: 0.9em"></td>
                </tr>
                `
                );

            str = str.concat('</table>');
            return str;
        })
    }
}

Теперь при модульном тестировании этого компонента охват кода не был равен 100%, и в файле индекса. html он показал, что часть всплывающей подсказки не закрыта. Как проверить на то же самое?

Answer 1

Зачем вам нужно юнит-тестирование высоких графиков? Модульные тесты должны охватывать реализацию вашей бизнес-логики c. Вы не должны беспокоиться о тестировании библиотек. Они уже это делают (если они хорошая библиотека). 100% покрытие является устаревшим заблуждением. Более важно иметь хорошее значимое покрытие, которое поддерживает ваши варианты использования, чем иметь 100% ради него. Что происходит, когда основная цель состоит в том, чтобы преследовать эти цифры, так это то, что вы тратите больше времени, пытаясь преодолеть то, что вам даже не стоит тестировать, а не тратить время на проведение значимых тестов.

Тесты должны проверять код, который вы создаете (или вашу команду), и должны охватывать требования и варианты использования. Они должны проверять поведение, а не реализацию. Еще меньше сторонних библиотек.

Answer 2

В своем тесте вы можете программно отобразить всплывающую подсказку с помощью метода onMouseOver и проверить, например, сгенерированную строку следующим образом: chart.tooltip.label.text.textStr:

chart.series[0].points[2].onMouseOver();
console.log(chart.tooltip.label.text.textStr);

---

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/6m4e8x0y/4950/

Ссылка API: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver