我们如何针对 DOM 操作执行单元测试？答案

【问题标题】：How can we execute Unit Tests against DOM manipulation?我们如何针对 DOM 操作执行单元测试？
【发布时间】：2010-10-20 01:40:27
【问题描述】：

netTuts.com 对 QUnit 的介绍引发了一次有趣的交流（从未解决），讨论如何针对操作 DOM 的操作应用单元测试。以下引用（亚历克斯约克）达到了关键：

如果你有像这样的函数：

function add(a, b) { var 结果 = a + 乙; $(“input#ResultTestBox”).val(result);

在上面的测试中，我很想测试两件事：添加一个和 b，并且正确放置结果进入一个 DOM 元素。我喜欢通过提供测试第二件事一些模拟 HTML。可能吗？

但是，就像我说的……未解决。可以解决吗？

【问题讨论】：

标签： jquery unit-testing qunit

【解决方案1】：

最新版本的 QUnit 支持 #qunit-fixture 元素，可让您将 HTML 添加到 QUnit 网页。

例如，在您的 HTML 中：

<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>

在你的 JavaScript 中：

$('<input id="ResultTestBox" type="text"/>').appendTo('#qunit-fixture');
var result = add(a, b);

equals(result, $('input#ResultTestBox').val(), "testing result box value");

【讨论】：

当您实际上基于真实的 dom 操作时，它是如何进行单元测试的？
@Tushar 这取决于您使用的 26 个单元测试定义中的哪一个。只要测试可以彼此独立运行，它们就是根据某些定义的单元测试。（例如在 Kent Beck 的《Test Driven Development By Example》一书中）

【解决方案2】：

您确实实际上关心的是val 方法在$(“input#ResultTestBox”) 的返回值上被调用——您不需要测试jQuery 方法本身的功能。为什么不注入 jQuery 对象的模拟实现并对其进行测试？

【讨论】：

如何在不丢失 jQuery 本身的情况下制作模拟 jQuery 对象？喜欢这个想法，但无法想象如何在代码中模拟。
@Sukima，您将重构您的原始代码，以便将 $ 对象作为参数传入，并默认将该参数值设为 jQuery。然后在你的单元测试中你传入你的模拟对象
模拟（至少对于远程调用、数据库查询以外的事情......）是一种代码味道。如果您可以测试调用的结果而不是观察调用本身发生的事实，那通常会好得多。
@herman 如果我的代码依赖于服务实现，为什么我不模拟该服务？如果我更改服务行为，那么我不应该更改每个依赖项的单元测试以反映更改。如果我中断服务行为，那么每个依赖项的单元测试也不应该中断。
@SteveGreatrex 如果您以更改服务接口的方式重构代码（例如，您在服务中添加了一些先前在每个客户端中重复的内容）但不改变整体行为，那么您应该能够通过运行测试来验证您的重构没有破坏任何东西，而不必先全部更改它们。换句话说，避免模拟意味着避免测试和实现代码之间的紧密耦合。

【解决方案3】：

如果您不想为所有测试创建 html 页面沙盒的麻烦，您可以在 env.js 中运行它们。

【讨论】：