在页面上下文中测试

Question

我需要一些关于如何在网页上下文中运行js单元测试的指导。

我有一个页面，其中将使用第三方JS库绘制图形。 此外，我将编写一些过滤逻辑 - 我想测试这篇文章。

我面临的挑战是，我必须为这个库提供一个DOM才能工作，而且我不太确定如何在这种情况下运行测试。

这看起来像这样：

在网页上我有一个div。 然后在JS文件中我会说

var drawing = DrawStuffIn(getElementByid("my-div"));
drawing.FilterBy(something);
var filteredItems = drawing.GetFilteredItems();

此时我想确保 filteredItems 包含我期望的内容。

我正在考虑使用PhantomJS和Jasmine，但不太确定如何将它们整合在一起。

Answer 1

您有两个主要选择：

1. 无头浏览器（如PhantomJS）（速度慢且功能强大）
2. DOM仿真（例如jsdom）（快速但不完美）

如果您只是需要一个DOM环境才能让库工作，但是不需要它以各种方式像真正的DOM一样工作，您可以使用DOM模拟，例如jsdom，这将是很多更快。

PhantomJS本质上是Chrome，没有头脑，您可以编写脚本并让它们在Chrome上下文中运行。您应该选择哪个取决于您实际需要做什么。主要是，jsdom是否支持您需要测试的库和功能？

您应该提供有关句子At this point I want to make sure that filteredItems contain what I expect.的含义的更多详细信息。您是要对其进行文本内容测试，还是会有图像，绘图或诸如此类的东西？