JavaScript 组件之旅(四):测试 JavaScript 组件
作者:太伯 来源:alipay UED 时间:2009-10-13 20:32:00
目录:
测试 JavaScript 组件
本期,我们要讨论的话题是 JavaScript 的测试,以检查组件的状态和工作方式是否符合预期,还会介绍一个可以方便编写测试用例的测试方法。这里说的测试当然是使用自动化的测试手段,这是软件质量保证(QA)的重要环节。就本系列文章介绍的 Smart Queue 来说,我们的测试目标包括:
Task 对象的创建:第二期的代码提供了多种创建方式,需要测试对象创建后的状态。
Queue 内的任务运行次序:我们提供了两种改变运行次序的方式:优先级和依赖配置,同样也要测试各种配置对次序的影响。
对于第一个目标,只需检查对象创建后的属性是否符合预期即可。我们已经多次提到“符合预期”,断言(Assert)正是为此而设计的。简单的说,断言就是确保所测试的表达式结果为“真”,否则,以某种方式通知测试人员,并帮助其定位断言失败的测试用例。
第二个目标稍稍有点复杂。由于我们在组件编码实现的时候,将排序后的队列(_sorted
)隐藏在了闭包中,所以外部是无法访问的。有两种方法可以考虑:(1)重构代码,增加代码的可测试性,又有两种重构方法:(a)设置 debug 开关,打开时将 _sorted
暴露给外部;(b)增加独立文件,以构建的方式拼接代码最终生成一个测试版本。(2)测试行为的结果而不是过程,前一种方法实质上是深入到组件的运行时状态,而这个方法只是检查组件的运行结果。本期选用后一种种测试方式,第一种测试方式留给有兴趣的读者练习:)
需要说明的是,我个人不赞成第一种的方法a. 为什么呢?我先说一下这个任务队列的设计理念:
它只是一个队列,只负责“按需”调整任务的运行次序,不关注任务的个体细节。换句话说,它操作整体的任务,而不关心任务具体的行为和表现。
它是个安全的队列,使用者(第一期提到的“客户”)可以放心把任务添加进去,不用担心这个任务信息会被其他客户看到。需要说明的是,第二期实现代码中有
SmartQueue.Queue = [[], [], []]
, 结果是外部可以访问到队列项。代码仅供介绍之用,你可以安全地删除SmartQueue.Queue =
来达成安全控制。
回到刚才讨论的话题,设置 debug 开关后,任务信息就潜在的泄漏可能性。进一步地,继续改造代码也可以达成在使用 debug 开关时的安全性,做法是将开关的控制放在 SmartQueue 的构造函数中,这样要求 SmartQueue 实现 Singleton 模式(见上一篇文章);一旦创建对象后,不允许修改闭包内的 debug 标记。
在编写具体测试代码前,我们设计了一个测试方法,以简化测试代码(主要是用例)的编写。简单地说,就是将测试用例与测试本身的代码分离——前者以语义良好的方式编写,后者是一次性编写,用于处理前者设定的测试用例。用例编写者需要写格式形如这样的代码:
<ul id="J_test_cases">
<li>
<pre>task = new sq.Task({fn: function() { log('unamed') }})</pre>
<ul>
<li>typeof task.fn === 'function'</li>
<li>task.name === 't0'</li>
<li>task.level === 1</li>
<li>task.dependencies.length === 0</li>
<li>task.context == window</li>
</ul>
</li>
<li>
<pre>task = new sq.Task({fn: function() { log('unamed') }, name: 'hello'})</pre>
<ul>
<li>task.name === 'hello'</li>
<li>task.level === 1</li>
</ul>
</li>
</ul>
ul li pre (CSS 选择器路径,下同)中写要测试的代码,相当于前置操作;ul ul li 中对这个代码进行断言测试,可以编写多条断言。这里建议对基本数据类型使用 ===
和 !===
运算符以加强对数据类型的预期判断。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
javascript中实现override,overload和类似c#中的property
页面表达常用方式
![](https://img.aspxhome.com/file/UploadPic/20105/27/01-93s.jpg)
带你轻松接触MySQL数据库的出错代码列表
ASP应用:用stream读文件
一个完美网站的101项指标.第四部分.设计
提升设计品质的8个布局方案[译]
![](https://img.aspxhome.com/file/UploadPic/20103/18/01-33s.jpg)
深入了解MySQL的数据类型以及建库策略
PHP中单引号和双引号的区别详解
配置高可用性的MySQL服务器负载均衡群集
浏览器右下角弹出提示窗口
浅析“Rich”设计模式
![](https://img.aspxhome.com/file/UploadPic/20093/12/39-24s.jpg)
在网页中实现细线边框的两种方法
asp之让Session永不过期
微软雅黑的设计
![](https://img.aspxhome.com/file/UploadPic/20102/23/01-83s.jpg)
IE下中英文字体不能对齐原因及解决
![](https://img.aspxhome.com/file/UploadPic/20088/11/2008811125353679s.jpg)
asp如何正确显示数据库里同时存在的GB码和BIG5编码?
MySQL 集群配置
Dreamweaver MX网页图片热区使用方法
![](https://img.aspxhome.com/file/UploadPic/20072/200723113613945s.jpg)