用户界面-使用TDD原理在JavaScript中开发UI

在用JavaScript开发UI时,想出最好的方法来正确遵循TDD原则时遇到了很多麻烦。 最好的方法是什么?

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

Chris MacDonald asked 2020-08-09T05:45:29Z
7个解决方案
22 votes

我过去用Javascript做过TDD,而我要做的就是区分单元测试和集成测试。 Selenium将使用服务器的输出,其回发,ajax调用等来测试整个站点。 但是对于单元测试,这都不重要。

您需要的只是要与之交互的UI和脚本。 用于此目的的工具基本上是JsUnit,它获取HTML文档,并在页面上具有一些Javascript函数,并在页面的上下文中执行它们。 因此,您要做的就是在页面上添加带有功能的Stubked 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(第1步)

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'ing的不错的系统。

Kris Gray answered 2020-08-09T05:46:06Z
4 votes

我从未成功开发过TDD用户界面代码。 实际上,我们最接近的实际上是将UI代码与应用程序逻辑尽可能地分开。 这就是为什么模型视图控制器模式有用的原因之一-可以在没有太大麻烦且不会太复杂的情况下对模型和控制器进行TDD。

以我的经验,该视图始终留给我们的用户接受度测试(我们编写了Web应用程序,而UAT使用Java的HttpUnit)。 但是,在这个级别上,它实际上是一个集成测试,没有我们需要TDD进行的隔离测试属性。 由于此设置,我们必须先编写控制器/模型测试/代码,然后编写UI和相应的UAT。 但是,在我最近编写的Swing GUI代码中,在添加到controller / model / API之前,我首先使用存根编写了GUI代码来探索前端设计。 YMMV在这里。

因此,重申一下,我唯一能给出的建议就是您似乎已经怀疑的问题-尽可能将UI代码与逻辑分离,并对其进行TDD。

Desty answered 2020-08-09T05:46:37Z
2 votes

另请参阅:用于TDD的JavaScript单元测试工具

Aaron Digulla answered 2020-08-09T05:46:57Z
1 votes

我发现MVP体系结构非常适合编写可测试的UI。 您的Presenter和Model类可以简单地进行100%单元测试。 您只需要担心用于UI测试(使用Selenium等)的View(应该是愚蠢的薄层,仅将事件触发到Presenter)。

请注意,在本文中,我所说的是完全在UI上下文中使用MVP,而不必跨入服务器端。 您的UI可以有自己的Presenter和Model,它们完全位于客户端。 Presenter驱动UI交互/验证等逻辑,而Model保留状态信息并提供到后端的门户(您可以在其中拥有单独的Model)。

您还应该看看Presenter First TDD技术。

Ates Goral answered 2020-08-09T05:47:27Z
0 votes

这是我改用Google Web Toolkit的主要原因。我用Java开发和测试,并且有合理的期望,认为编译后的JavaScript将在各种浏览器上正常运行。 由于TDD主要是一个单元测试功能,因此大多数项目都可以在编译和部署之前进行开发和测试。

集成和功能测试套件可验证生成的代码在部署到测试服务器后是否按预期运行。

Steve Moyer answered 2020-08-09T05:47:53Z
0 votes

我即将开始在我正在从事的新项目中执行Javascript TDD。 我当前的计划是使用qunit进行单元测试。 在开发测试时,只需在浏览器中刷新测试页面即可运行测试。

为了进行持续集成(并确保测试在所有浏览器中运行),我将使用Selenium在每个浏览器中自动加载测试工具,并读取结果。 这些测试将在每次签入源控制时运行。

我还将使用JSCoverage进行测试的代码覆盖率分析。 Selenium也将自动执行此操作。

我目前正在进行此设置。 一旦设置完成,我将使用更准确的详细信息更新此答案。


测试工具:

  • uni
  • JSCoverage
Karl answered 2020-08-09T05:48:45Z
0 votes

我要做的是戳Dom,看我是否能达到我的期望。 这样做的一个很大的副作用是,在加快测试速度的同时,还可以加快应用程序的速度。

我刚刚发布了一个开源工具包,它将极大地帮助JavaScript tdd。 它由许多开放源代码工具组成,可为您提供开箱即用的有效的requirejs主干应用程序。

它提供了运行的单个命令:开发Web服务器,茉莉单浏览器测试运行程序,茉莉js测试驱动程序多浏览器测试运行程序以及JavaScript和CSS的串联/最小化。 它还会输出未精简版本的应用程序以进行生产调试,预编译车把模板并支持国际化。

无需设置。 它只是工作。

[HTTP://GitHub.com/David将Nelson/agile JS]

davidjnelson answered 2020-08-09T05:49:24Z
translate from https://stackoverflow.com:/questions/96086/developing-ui-in-javascript-using-tdd-principles