使用TDD原理在JavaScript中开发UI
发布时间:2020-12-14 01:10:02 所属栏目:百科 来源:网络整理
导读:我有很多麻烦试图找到最好的方式来正确地遵循TDD原则,同时在JavaScript中开发UI。什么是最好的办法呢? 最好把视觉和功能分开吗?你先开发视觉元素,然后编写测试然后编写功能吗? 我在过去使用Javascript做了一些TDD,我必须做的是区分Unit和Integration测
我有很多麻烦试图找到最好的方式来正确地遵循TDD原则,同时在JavaScript中开发UI。什么是最好的办法呢?
最好把视觉和功能分开吗?你先开发视觉元素,然后编写测试然后编写功能吗?
我在过去使用Javascript做了一些TDD,我必须做的是区分Unit和Integration测试。 Selenium将测试您的整体网站,与服务器的输出,其后回,ajax调用,所有。但是对于单元测试,这些都不重要。
你想要的只是你将要交互的UI和你的脚本。您将使用的工具基本上是JsUnit,它需要一个HTML文档,页面上有一些Javascript函数,并在页面的上下文中执行它们。所以你会做的是在页面上包含Stubbed out HTML和你的函数。从那里,您可以测试脚本与模拟HTML,脚本和测试的隔离单元中的UI组件的交互。 这可能有点混乱,所以让我们看看我们是否可以做一点测试。让一些TDD假定在加载组件之后,基于L1的内容对元素列表着色。 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这里在页面上同步的服务器控件的结构。但它确实给你一个很好的系统TDD’ing使用JavaScript。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- c# – 使用MVVM的WPF:使用RelativeSource的DataBinding
- swift发起http post请求 with swifthttp包
- dojo小例子(1):通过动态替换dijit/Dialog的内容,告诉用
- c – 绕过自动生成的赋值运算符(VS bug?)
- cocos3.2|安卓编译总结 Win8_64 未完
- 混合中值滤波器 ( Hybrid Median Filter ) C++ 实现
- Oracle中的游标和函数详解
- Neo4j介绍与使用
- ruby-on-rails – 当我点击一个按钮时,Rails表单disable_wi
- objective-c – 从夹点位置缩放在CGContext上绘制的图像