使用TDD原则在JavaScript中开发UI [英] Developing UI in JavaScript using TDD Principles
问题描述
在使用JavaScript开发UI时，尝试提供正确遵循TDD原则的最佳方法时遇到了很多麻烦。最好的方法是什么？
I've had a lot of trouble trying to come up with the best way to properly follow TDD principles while developing UI in JavaScript. What's the best way to go about this?
最好是将视觉与功能区分开来吗？你首先开发视觉元素，然后编写测试然后编写功能代码吗？
Is it best to separate the visual from the functional? Do you develop the visual elements first, and then write tests and then code for functionality?
推荐答案
我做了一些TDD与过去的Javascript，以及我必须做的是区分单元测试和集成测试。 Selenium将测试你的整个站点，包括服务器的输出，它的post backs，ajax调用，所有这些。但对于单元测试，这一切都不重要。
I've done some TDD with Javascript in the past, and what I had to do was make the distinction between Unit and Integration tests. Selenium will test your overall site, with the output from the server, its post backs, ajax calls, all of that. But for unit testing, none of that is important.
您想要的只是您要与之交互的UI以及您的脚本。您将使用的工具基本上是 JsUnit ，它带有一些HTML文档，带有一些Javascript函数在页面上，并在页面的上下文中执行它们。所以你要做的就是在你的功能页面上包含Stubbed out HTML。从那里，您可以测试脚本与模拟HTML，脚本和测试的隔离单元中的UI组件的交互。
What you want is just the UI you are going to be interacting with, and your script. The tool you'll use for this is basically JsUnit, which takes an HTML document, with some Javascript functions on the page and executes them in the context of the page. So what you'll be doing is including the Stubbed out HTML on the page with your functions. From there,you can test the interaction of your script with the UI components in the isolated unit of the mocked HTML, your script, and your tests.
这可能是一个有点混乱所以让我们看看我们是否可以做一点测试。让一些TDD假设在加载组件之后，基于LI的内容对元素列表进行着色。
That may be a bit confusing so lets see if we can do a little test. Lets to some TDD to assume that after a component is loaded, a list of elements is colored based on the content of the 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是一个多步骤的过程，因此对于我们的控制，我们需要多个例子。
Obviously TDD is a multi-step process, so for our control, we'll need multiple examples.
yourcontrol.js（第1步）
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的系统。
You can probably see the pain point here, you have to keep your mock HTML here on the page in sync with the structure of what your server controls will be. But it does get you a nice system for TDD'ing with JavaScript.
这篇关于使用TDD原则在JavaScript中开发UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
