JavaScript 组件之旅(四):测试 JavaScript 组件


Posted in Javascript onOctober 28, 2009

JavaScript 组件之旅(四):测试 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 中对这个代码进行断言测试,可以编写多条断言。这里建议对基本数据类型使用 ===!=== 运算符以加强对数据类型的预期判断。

接下来,我们编写两个 helper 方法用来输出和测试:

function log(str) {
  node.value += str + '\n';
}

function assert(expression) {
  var flag;
  eval('flag = ' + expression);
  return typeof(flag) === 'boolean' && flag;
}

log 用来向文本框追加信息,assert 用来测试传入表达式的值。测试方法如下(这里使用了 jQuery):

var sq = SmartQueue, task, total = 0, passed = 0, failed = 0;
$('#J_test_cases').children().each(function(index) {
  eval($('pre', this).text());
  task.register();
  $('li', this).each(function() {
    var item = $(this);
    var flag = assert(item.text());
    if(flag) passed ++; else failed ++;
    item.prepend((flag ? '<font color="green">[PASS]</font>' : '<font color="red">[FAIL]</font>') + ' ');
    total++;
  }).wrap('<pre></pre>');
}).end().before('<p>Total: ' + total + ', passed: '+ passed +', failed: ' + failed + '</p>');
sq.fire();

这个结构还可改进一下,比如输出测试说明而不是具体的代码,也可以增加后置操作,这里就不再演示了。你还可以查看完整的测试页面,含有 23 个测试用例和完整的测试实现。

~~~~~~~~~~~~~ 八卦分割线 ~~~~~~~~~~~~~

好吧,我们已经体会到了思考和行动的乐趣,走到了系列文章的尾声,但这只是开始。我们经历了一个很小的实用组件的实现全过程,领略到了 JavaScript 世界的精彩,让我们继续前行~

Javascript 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
使用JS读秒使用示例
Sep 21 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
js常用DOM方法详解
Feb 04 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 #Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 #Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 #Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 #Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 #Javascript
javascript获得CheckBoxList选中的数量
Oct 27 #Javascript
基于jQuery的日期选择控件
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
微信小程序开发探究
2016/12/27 Javascript
js面向对象编程总结
2017/02/16 Javascript
jquery 手势密码插件
2017/03/17 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
《争吵》教学反思
2014/02/15 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
小摄影师教学反思
2014/04/27 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
委托证明书
2014/09/17 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL