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

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 世界的精彩,让我们继续前行~

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjywdx.html