个人中心
gpt4 book ai didi

javascript - 使用 TDD 原则在 JavaScript 中开发 UI

转载 作者：IT王子 更新时间：2023-10-29 03:06:25 26 4
gpt4 key购买 nike

在使用 JavaScript 开发 UI 时，我曾试图想出正确遵循 TDD 原则的最佳方法，但遇到了很多麻烦。解决此问题的最佳方法是什么？

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

最佳答案

我过去用 Javascript 做过一些 TDD，我必须做的是区分单元测试和集成测试。 Selenium 将测试您的整个站点，包括服务器的输出、它的回发、ajax 调用，所有这些。但是对于单元测试，这些都不重要。

您需要的只是您将与之交互的 UI 和您的脚本。您将为此使用的工具基本上是 JsUnit ，它接受一个 HTML 文档，页面上有一些 Javascript 函数，并在页面上下文中执行它们。因此，您要做的是将已删除的 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 是一个多步骤过程，因此对于我们的控制，我们需要多个示例。

您的control.js(第一步)

function ColorCtrl( id ) {
 /* Fail! */    
}

yourcontrol.js(第 2 步)

function ColorCtrl( id ) {
    $$("#mockList li").forEach(function(item, index) {
        item.setStyle("backgrond-color", item.getText());
    });
    /* Success! */
}

您可能会看到这里的难点，您必须使页面上的模拟 HTML 与您的服务器控件的结构保持同步。但它确实为您提供了一个使用 JavaScript 进行 TDD 的好系统。

关于javascript - 使用 TDD 原则在 JavaScript 中开发 UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/96086/

26 4 0
文章推荐： go - 无法在 Go 中使用 httputil.ReverseProxy 同时使用自定义 RoundTrip 和 Dial
文章推荐： go - 让主管通过 http_proxy 列表运行
文章推荐： go - 变量在 if 语句中不可访问。语言设计？
文章推荐： javascript - 拖动和调整 CSS 变换元素的大小
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com