Friday, October 31, 2008

实现了一个简单的js test工具集

一时兴起, 实现了一个简单的js测试框架, 结构如下:
==========================================================================
//测试项
var TestEntry = function(id){
return {
//目前只实现了一个简单的方法, 其他的可以自由扩展
assertTrue: function(result){
var r = ET.get(id);
r.append(result? "Ok" : "Error");
r.addClass(result? "ok" : "error");
}
}
}
//测试执行器
var Test=function(){
var mc;
return {
init:function(dom){
ET.get(dom || document.body).append("<div
id='messageconsole'><b>Message console:</b></div>");
mc = ET.get("messageconsole");
},
addTest: function(msg){
var id = UUID.generate("v4");
mc.append("<br><b class='item'>test "+msg+" <b class='result'
id='"+id+"'></b></b>");
return TestEntry(id);
},
reset: function(){
mc.html("<br>");
},
report: function(){
//设置延时是为了, 等待异步执行的部分ajax测试完成
setTimeout(function(){
var total = ET.getByJQSelector("b.item").length;
var error = ET.getByJQSelector("b.error").length;
var ok = ET.getByJQSelector("b.ok").length;
mc.append("<br><br>"+
"<b class='item'>Totally "+total+" tests,</b>"+
"<b class='passed'> passed "+ok+" tests,</b>"+
"<b class='failed'> failed "+error+" tests,</b>"+
"<b class='unfinished'> unfinished "+(total-ok-error)+" tests</b>");
},
1000);
}
}
}();
==========================================================================
css代码:
.item {
color: blue;
}

.result, .unfinished, .failed {
color: red;
}
.passed {
color: #55FF55;
}
==========================================================================
用法:
Test.init();

//普通测试项
Test.addTest("log message here").assertTrue(1+2==3);

//异步操作的测试
var ajaxTest = Test.addTest("ajax request test");
Ajax.request({data:{id:1}, url:'../getName.htm', callback:function(data){
ajaxTest.assertTrue(data.name='apple');
}
});

Test.report();

解释说明:
Test.addTest在系统中添加一条测试记录,
返回一个TestEntry, 用返回的TestEntry的assert系列方法, 来断定此测试项的正确与否

No comments: