Angular中Highcharts工具提示的单元测试答案

【问题标题】：Unit test for Highcharts tooltip in AngularAngular中Highcharts工具提示的单元测试
【发布时间】：2020-04-11 21:08:00
【问题描述】：

我在 Angular 7+ 中使用 Highcharts API。

假设在某个组件中，我的图表类型是'area'，而我的tooltip代码如下：

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%，并且在 index.html 文件中显示工具提示部分未被覆盖。如何检查是否相同？

【问题讨论】：

标签： angular unit-testing highcharts

【解决方案1】：

为什么要对高位图表进行单元测试？单元测试应该涵盖您的业务逻辑实现。您不应该担心测试库。他们已经这样做了（如果他们是一个好的图书馆）。 100% 的覆盖率是一个过时的误解。拥有一个良好的、有意义的覆盖率来支持您的用例比拥有 100% 的覆盖率更重要。当主要目标是追逐这些数字时会发生什么，你最终会花费更多的时间来尝试克服一些你甚至不应该首先测试的东西，而不是花时间进行有意义的测试。

测试应测试您（或您的团队）生成的代码，并应涵盖需求和用例。他们应该测试行为而不是执行。甚至更少的 3rd 方库。

【讨论】：

感谢您的建议。我可以知道如何检查工具提示中的正确数据吗？表示正在呈现的值是否是预期的。
您也可以为此提出一些建议吗：stackoverflow.com/questions/61168588/…
您可以使用验收测试（或 e2e 测试工具）测试的那些功能。例如量角器或柏树。使用这些工具，您可以设定您应该在屏幕上看到的内容，就像您是用户一样。看看吧。
请问你说的是哪一个？ tooltip 一个还是 gridSizeChanged 一个？
你能帮我解决这个问题吗：stackoverflow.com/questions/61176688/…

【解决方案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

【讨论】：

你好@ppotaczek，你能帮我解决这个问题吗：stackoverflow.com/questions/61725741/…，还有这个：stackoverflow.com/questions/61719672/…
嗨@Rahul Chowdhury，对不起，我不是角度专家。我只能用 Highcharts 帮助你。
没问题。谢谢你。如果可能的话，你能..问问你身边的人吗？
你好@ppotaczek，你能帮我解决这个问题吗？ stackoverflow.com/questions/62095430/… 如有必要，请帮助我改进问题，这是我第一次在 stackblitz 上用整个代码写一个问题 :)
嗨@KL_KISNE_DEKHA_HAI，我看到你的问题已经解决了。我用highcharts标签跟踪所有问题，所以以后你只需要使用标签。