测试 JavaScript 图表

Posted 2023-02-22

【中文标题】测试 JavaScript 图表

【英文标题】：Testing JavaScript charts

【发布时间】：2013-07-21 02:30:49

【问题描述】：

我目前在一个项目中，我正在使用各种库（大部分时间是 d3 和 nvd3）构建图表。我想构建一组自动化测试，看看我输入到我正在制作的 API 中的数据是否真的正确地吐出了数据。

您实际上是如何测试图表的？单元测试是实现这一目标的正确方法，还是目测图表是实现这一目标的唯一方法？

【问题讨论】：

您可以将生成的图表与“预期的”图表进行比较（例如比较 DOM 树），但这可能会根据您的要求而变得非常脆弱。

Selenium 也可以用来自动比较截图；这将更有用：“这是否输出与一周前相同的图表”而不是“此图表代码是否会正确显示它可以发送的所有类型的数据”***.com/questions/14284915/…

在某种程度上，SVG 标记提供了一个抽象层（即抽象出实际的渲染）。所以这里的一个选项是测试生成的 SVG，而不是屏幕截图 - 这应该不那么脆弱，因为它不会因 CSS 更改或抗锯齿问题而中断。

【参考方案1】：

您可以使用 PhantomJS 截取一些截图：https://github.com/ariya/phantomjs/wiki/Screen-Capture

你还可以比较生成的DOM结构（我在这个项目中就是这样做的：https://github.com/angular-d3/line-chart）

【参考方案2】：

您可以使用 tape.js 编写特定于图表的单元测试

您还可以查看这个专门为测试图表而编写的库：https://github.com/magiq-tests/magiq-tests