Chr*_*ald 43 javascript tdd user-interface
在使用JavaScript开发UI时,我在尝试提供正确遵循TDD原则的最佳方法时遇到了很多麻烦.最好的方法是什么？
是否最好将视觉与功能分开？您是先开发可视元素,然后编写测试然后编写功能代码吗？
小智 22
我以前用Javascript完成了一些TDD,而我要做的就是区分Unit和Integration测试.Selenium将测试你的整个站点,包括服务器的输出,它的post backs,ajax调用,所有这些.但对于单元测试,这些都不重要.
您想要的只是您要与之交互的UI以及您的脚本.您将使用的工具基本上是JsUnit,它采用HTML文档,在页面上使用一些Javascript函数并在页面上下文中执行它们.所以你要做的就是在你的功能页面上包含Stubbed out HTML.从那里,您可以测试脚本与模拟HTML,脚本和测试的独立单元中的UI组件的交互.
这可能有点令人困惑,所以让我们看看我们是否可以做一点测试.让一些TDD假设在加载组件之后,基于LI的内容对元素列表进行着色.
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与服务器控件的结构同步.但它确实为您提供了一个很好的使用JavaScript进行TDD的系统.