使用TDD原则在JavaScript中开发UI

在使用JavaScript开发UI时,我在尝试提供正确遵循TDD原则的最佳方法时遇到了很多麻烦.最好的方法是什么？

是否最好将视觉与功能分开？您是先开发可视元素,然后编写测试然后编写功能代码吗？

我以前用Javascript完成了一些TDD,而我要做的就是区分Unit和Integration测试.Selenium将测试你的整个站点,包括服务器的输出,它的post backs,ajax调用,所有这些.但对于单元测试,这些都不重要.

您想要的只是您要与之交互的UI以及您的脚本.您将使用的工具基本上是JsUnit,它采用HTML文档,在页面上使用一些Javascript函数并在页面上下文中执行它们.所以你要做的就是在你的功能页面上包含Stubbed out HTML.从那里,您可以测试脚本与模拟HTML,脚本和测试的独立单元中的UI组件的交互.

这可能有点令人困惑,所以让我们看看我们是否可以做一点测试.让一些TDD假设在加载组件之后,基于LI的内容对元素列表进行着色.

tests.html

    

        
red
        
green
    
   

显然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的系统.