我在过去使用Javascript做了一些TDD，我必须做的是区分Unit和Integration测试。 Selenium将测试您的整体网站，与服务器的输出，其后回，ajax调用，所有。但是对于单元测试，这些都不重要。
你想要的只是你将要交互的UI和你的脚本。您将使用的工具基本上是JsUnit，它需要一个HTML文档，页面上有一些Javascript函数，并在页面的上下文中执行它们。所以你会做的是在页面上包含Stubbed out HTML和你的函数。从那里，您可以测试脚本与模拟HTML，脚本和测试的隔离单元中的UI组件的交互。
这可能有点混乱，所以让我们看看我们是否可以做一点测试。让一些TDD假定在加载组件之后，基于L1的内容对元素列表着色。
tests.html
<html>
<head>
<script src="jsunit.js"></script>
<script src="mootools.js"></script>
<script src="yourcontrol.js"></script>
</head>
<body>
<ul id="mockList">
<li>red</li>
<li>green</li>
</ul>
</body>
<script>
function testListColor() {
assertNotEqual( $$("#mockList li")[0].getStyle("background-color","red") );
var colorInst = new ColorCtrl( "mockList" );
assertEqual( $$("#mockList li")[0].getStyle("background-color","red") );
}
</script>
</html>
显然，TDD是一个多步骤过程，因此对于我们的控制，我们需要多个例子。
yourcontrol.js(step1)
function ColorCtrl( id ) {
/* Fail! */
}
yourcontrol.js(step2)
function ColorCtrl( id ) {
$$("#mockList li").forEach(function(item,index) {
item.setStyle("backgrond-color",item.getText());
});
/* Success! */
}
你可能会看到这里的痛点，你必须保持你的模拟HTML这里在页面上同步的服务器控件的结构。但它确实给你一个很好的系统TDD’ing使用JavaScript。
