我们如何执行DOM操作的单元测试？

QUINIT在netTuts.com的介绍产生了一个有趣的交流（从未解决）如何应用单元测试对操作DOM的操作。下面引用（亚历克斯·约克）获得的症结：我们如何执行DOM操作的单元测试？

什么将是很好的，如果你有这样的功能：

函数add（A，B）{VAR的结果= A + b; $（“input＃ResultTestBox”）。val（result）;

在上面的测试中，我很想测试两件事情：又多了一个和 b和结果正确地被投入到DOM元素。我很想通过提供某些模拟HTML来测试第二件事。可能？

但是，就像我说的...没有解决。可分解？

来源

2010-10-20 justSteve

最新版本的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");

来源

2010-11-14 15:34:58

单元测试是如何实际基于真实的dom操作？ – Tushar 2014-09-03 10:58:47

@Tushar取决于你正在使用的单元测试的26个定义中的哪一个。只要测试可以独立运行，它们就是根据一些定义进行的单元测试。（例如Kent Beck在书中的“Test Driven Development By Example”一书中） – herman 2016-05-31 08:38:50

可以在env.js运行它们，如果你不想创建HTML页面沙箱的麻烦所有的测试。

来源

2010-11-14 15:58:11

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

来源

2010-11-15 10:04:02

如何在不丢失jQuery本身的情况下制作模拟jQuery对象？像这个想法一样，但是很难想象如何在代码中嘲笑。 – Sukima 2011-06-15 10:51:33

@Sukima，你会重构你的原始代码，以便'$'对象作为参数传入，默认情况下使该参数值为jQuery。然后在你的单元测试中传入你的模拟对象 – 2011-06-15 11:18:17

模拟（至少对于远程调用，数据库查询等）是一种代码异味。如果您可以测试通话结果而不是通话本身发生的事实，那通常会好很多。 – herman 2016-05-31 08:45:48

我们如何执行DOM操作的单元测试？

回答

相关问题