Javascript单元测试 - DOM操作

Question

我对Javacript Unit测试很陌生。有一件事让我烦恼。在测试javascript时，我们经常需要进行DOM操作。看起来我在控制器/组件中测试方法/功能，但我仍然需要依赖模板中的HTML元素。一旦id（或我的测试用例中曾经是选择器的属性）发生变化，我的测试用例也需要更改！这不会违反单元测试的目的吗？

Answer 1

javascript单元测试最棘手的部分之一不是测试，而是学习如何构建代码以使其可测试。

您需要通过明确分离可测试逻辑和DOM操作来构建代码。

我的经验法则是：

如果您正在测试任何依赖于DOM结构的东西，那么您做错了。

总结：尝试仅测试数据操作和逻辑操作。

Answer 2

我谨不同意@BentOnCoding。通常，组件不仅仅是其类。组件结合了HTML模板和JavaScript / TypeScript类。因此，您应该测试模板和类是否可以按预期工作。仅限班级的测试可以告诉您有关班级行为的信息。但是他们无法告诉您组件是否将正确渲染并响应用户输入。

有人说您应该在集成测试中对其进行测试。但是集成测试的编写/运行速度较慢，而运行/维护所需的时间和资源则更为昂贵。因此，在集成测试中测试大多数组件功能可能会减慢您的速度。

这并不意味着您应该跳过集成测试。尽管集成测试和端到端测试可能比单元测试慢且昂贵，但它们使您更加确信自己的应用程序可以按预期运行。集成测试是将各个单元/组件组合在一起并作为一个整体进行测试的地方。不应将它视为测试组件模板的唯一位置。

Answer 3

我想我第二次推荐@BentOnCoding，它建议您要进行单元测试的是您的代码，而不是其他任何内容。当涉及到DOM操作时，这是浏览器代码，例如appendChild，replaceChild等。如果您使用的是jQuery或其他库，则仍然适用-您正在调用其他代码来进行操作，而您不这样做不需要测试。 那么，如何断言在视图模型/控制器上调用某些函数会导致所需的DOM结构呢？你不知道就像您不会进行单元测试一样，在数据库上调用存储过程会导致特定表中的特定行。相反，您需要考虑如何从处理DOM的部分中抽象出处理输入/输出的控制器部分。 例如，如果您有一个根据某些条件调用alert（）的方法，则需要将该方法分为两个部分：

• 接受并处理输入的人
• 调用window.alert（）的人

在测试期间，您将用伪造品（请参见SinonJS）替换window.alert（或它的代理方法），并用引起（或不引起）警报的条件调用输入处理器。然后，您可以断言是否调用了伪造品，调用了多少次，使用了什么值等不同的值。您实际上并未测试window.alert（），因为它在代码外部。 假定这些外部依赖项可以正常工作。如果没有，那是该库的错误，但是发现这些错误不是您的单元测试的工作。您只想验证您自己的代码。