abut全称为annotations-based unit testing，基于注释的单元测试工具，也可以就地取此英文的原义（毗邻）称呼它。众所周知，javascript实在不好做测试，即使我这个工具现在对事件响应这东西还是无可奈何的，这只能黑盒测试。不过，能白盒测试的，我们还是进行白盒测试。javascript经近几年的迅猛发展，也涌现诸如Qunit,JSpec这些优秀的测试框架。但我最后还是决定自己搞一个。原因如下：
- 我喜欢自造轮子。
- 由于在写框架（龟速进行中），倾向于选择器，测试工具等东西都出自自家。
- 写文档是痛苦，倒不如写注释，既然写注释，就要物尽其用，一次性把注释与测试都写完。
- 其他测试框架写测试都很恶心，单个测试的代码量比较长（本来就不想写，勉为其难地写，方法易用是王道）。
- 其他测试框架写测试都是写在另一个文件上，更增加人写测试的抗拒性。
- 写在另一个文件上，万一这文件丢失了怎么办？！
顺便说一下单元测试的好处，缓解一下大家对它的厌恶。
//http://www.cnblogs.com/nuaalfm/archive/2010/02/26/1674235.html //单元测试的优点 //1、它是一种验证行为。 // 程序中的每一项功能都是测试来验证它的正确性。它为以后的开发提供支缓。就算是开发后期，我们也可以轻松的增加功能或更改程序结构，而不用担心这个过程中会破坏重要的东西。而且它为代码的重构提供了保障。这样，我们就可以更自由的对程序进行改进。 //2、它是一种设计行为。 // 编写单元测试将使我们从调用者观察、思考。特别是先写测试（test-first），迫使我们把程序设计成易于调用和可测试的，即迫使我们解除软件中的耦合。 //3、它是一种编写文档的行为。 // 单元测试是一种无价的文档，它是展示函数或类如何使用的最佳文档。这份文档是可编译、可运行的，并且它保持最新，永远与代码同步。 //4、它具有回归性。 // 自动化的单元测试避免了代码出现回归，编写完成之后，可以随时随地的快速运行测试。
基于上面的原因，我的单元测试与当前流行的测试框架有很大不同，首先测试代码与我们的执行代码是位于同一个文件，其次它是非常符号化的（汲取模板系统的经验），最后它总是对整个文件进行操作。为了获取注释，我是用AJAX的同步请求实现的（dom.abut(url)）。
现在说说一些相关概念。既然是单元测试，每个测试代码都应该封闭在一个独立的环境中，通常我们用闭包收拾之。但有可能连续几个测试程序都共有一个测试数据呢，但这测试数据当然也不能丢在全局作用域下，于是就有了大闭包与小闭包之分。具体表现如下：
//第二个参数仅在浏览器支持Object.defineProperties时可用
applyIf(Object,{
create:function( proto, props ) {//ecma262v5 15.2.3.5
//略去具体实现
},
//$$$$same(Object.keys({aa:1,bb:2,cc:3}),["aa","bb","cc"])
keys: function(obj){//ecma262v5 15.2.3.14
//略去具体实现
}
});
//用于创建javascript1.6 Array的迭代器
function iterator(vars, body, ret) {
return eval('[function(fn,scope){'+
'for(var '+vars+'i=0,l=this.length;i<l;i++){'+
body.replace('_', 'fn.call(scope,this[i],i,this)') +
'}' +
ret +
'}]')[0];
};
//注释照搬FF官网
/*
<<<<
var arr = [1,2,3,4,5,6];
$$$$eq(arr.indexOf(2),1)
$$$$eq(arr.lastIndexOf(6),5)
arr.slice(3).forEach(function(el,index,aaa){
$$$$log(el,"item");
$$$$log(index,"index");
$$$$log(aaa,"array");
});
var arr2 = arr.map(function(el){
return el+1;
});
$$$$same(arr2,[2,3,4,5,6,7]);
>>>>
**/
applyIf(Array[PROTO],{
//定位类 返回指定项首次出现的索引。
indexOf: function (el, index) {
//略去具体实现
},
//定位类 返回指定项最后一次出现的索引。
lastIndexOf: function (el, index) {
//略去具体实现
},
由<<<<与>>>>之间的注释我称之为大闭包，它圈着我们的测试程序与辅助函数与测试数据等，单行的以4个$开头的注释称之为小闭包。注释中的这些部分会被我的测试工具抽取出来进行加工执行。这里面涉及许多步骤，如$$$$会被替换为"dom.abut."，计算行号，统计当前执行到第几个测试程序，生成图形界面等等。既然是单元测试，就有assertTrue，assertFlase，assertEquals，assertSame等方法，不过这些方法有笨拙，Qunit简化为ok(布尔测试)，equals(同值性测试)，same(同一性测试)。我沿用Qunit的思路，依次为abut.ok,abut.eq,abut.same，当然我们在测试时，abut是用$$$$代替的。
| 方法调用 | 说明 | 补充 |
|---|---|---|
| $$$$或$$$$ok | 布尔测试 | |
| $$$$eq | 同值性测试 | 相等于a==b |
| $$$$same | 同一性测试 | 如果是简单类型则相等于===，array、object等比较其内容 |
| $$$$log | 非测试debug用 | 相当于console.log |
对于AJAX，setTimeout等异步行为，我没有像Qunit那样搞个start与stop，大家看左上角的统计数字就知进行第几个测试程序了。注意，log是不统计到里面，虽然一样也显示在列表中。
剩下一个问题，众所周知，单元测试都是针对公开的接口进行测试，像闭包内的函数怎么测试？为此，abut提供了专门的手段（@@@@）用于把它们偷渡到全局作用域下。当然，这不是真正意义的暴露，而是依附于我们的命名空间对象dom，放于一个叫exports的集中箱中，好让我们可以随时卸载它。
(function(){
var s = ["XMLHttpRequest",
"ActiveXObject('Msxml2.XMLHTTP.6.0')",
"ActiveXObject('Msxml2.XMLHTTP.3.0')",
"ActiveXObject('Msxml2.XMLHTTP')",
"ActiveXObject('Microsoft.XMLHTTP')"];
if(dom.ie === 7 && location.protocol === "file:"){
s.shift();
}
for(var i = 0 ,el;el=s[i++];){
try{
if(eval("new "+el)){
dom.xhr = new Function( "return new "+el)
break;
}
}catch(e){}
}
//偷渡s到全局作用域下
//@@@@(s)
})();
//$$$$log(dom.exports.s);
好了，比如我想测试我框架的两个模块：
<!DOCTYPE HTML">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="abut.js"></script>
<script>
window.onload = function(){
dom.abut("dom/lib/ecma.js");
dom.abut("dom/lib/brower.js");
}
</script>
<title>dom Framework</title>
</head>
<body>
</body>
</html>
只要在这些JS文件的注释中写好测试，当页面一载入，我们就可以看到效果！而且这些列表中的每一行都是可点的，点开查看详情。
最后附上源码，我已经把它从我框架独立出来。
// annotations-based unit testing by 司徒正美
// http://www.cnblogs.com/rubylouvre/archive/2010/11/02/1867655.html
(function(){
if(!Object.keys){
var _dontEnum = [ 'propertyIsEnumerable', 'isPrototypeOf','hasOwnProperty','toLocaleString', 'toString', 'valueOf', 'constructor'];
for (var i in {
toString: 1
}) _dontEnum = false;
Object.keys = function(obj){//ecma262v5 15.2.3.14
var result = [],dontEnum = _dontEnum,length = dontEnum.length;
for(var key in obj ) if(obj.hasOwnProperty(key)){
result.push(key)
}
if(dontEnum){
while(length){
key = dontEnum[--length];
if(obj.hasOwnProperty(key)){
result.push(key);
}
}
}
return result;
}
}
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
}
}
if(!String.prototype.quote){
String.prototype.quote = (function () {
var meta = {
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'"' : '\\"',
'\\': '\\\\'
}, reg = /[\\\"\x00-\x1f]/g,
regFn = function (a) {
var c = meta[a];
return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
};
return function(){
return '"' + this.replace(reg, regFn) + '"';
}
})();
}
//http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html
var addSheet = function(css){
if(!-[1,]){
css = css.replace(/opacity:\s*(\d?\.\d+)/g,function($,$1){
$1 = parseFloat($1) * 100;
if($1 < 0 || $1 > 100)
return "";
return "filter:alpha(opacity="+ $1 +");"
});
}
css += "\n";//增加末尾的换行符，方便在firebug下的查看。
var doc = document, head = doc.getElementsByTagName("head")[0],
styles = head.getElementsByTagName("style"),style,media;
if(styles.length == 0){//如果不存在style元素则创建
if(doc.createStyleSheet){ //ie
doc.createStyleSheet();
}else{
style = doc.createElement('style');//w3c
style.setAttribute("type", "text/css");
head.insertBefore(style,null)
}
}
style = styles[0];
media = style.getAttribute("media");
if(media === null && !/screen/i.test(media) ){
style.setAttribute("media","all");
}
if(style.styleSheet){ //ie
style.styleSheet.cssText += css;//添加新的内部样式
}else if(doc.getBoxObjectFor){
style.innerHTML += css;//火狐支持直接innerHTML添加样式表字串
}else{
style.appendChild(doc.createTextNode(css))
}
}
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
};
} else {
return function (el, type, fn) {
el.attachEvent('on' + type, function () {
return fn.call(el, window.event);
});
}
}
})();
this.dom = {
// http://www.cnblogs.com/rubylouvre/archive/2010/01/20/1652646.html
type : (function(){
var reg = /^(\w)/,
regFn = function($,$1){
return $1.toUpperCase()
},
to_s = Object.prototype.toString;
return function(obj,str){
var result = (typeof obj).replace(reg,regFn);
if(result === 'Object'){
if(obj===null) result = 'Null';
else if(obj.window==obj) result = 'Window'; //返回Window的构造器名字
else if(obj.callee) result = 'Arguments';
else if(obj.nodeName) result = (obj.nodeName+'').replace('#',''); //处理文档与元素节点
else if(!obj.constructor || !(obj instanceof Object)){
if("send" in obj && "setRequestHeader" in obj){//处理IE5-8的宿主对象与节点集合
result = "XMLHttpRequest"
}else if("length" in obj && "item" in obj){
result = "namedItem" in obj ? 'HTMLCollection' :'NodeList';
}else{
result = 'Unknown';
}
}else result = to_s.call(obj).slice(8,-1);
}
if(result === "document"){//返回Document的构造器名字
result = "Document";
}
if(result === "Number" && isNaN(obj)){
result = "NaN";
}
if(str){
return str === result;
}
return result;
}
})(),
oneObject : function(array,val){
var result = {},value = val !== void 0 ? val :1;
for(var i=0,n=array.length;i < n;i++)
result[array[i]] = value;
return result;
}
};
//http://www.cnblogs.com/rubylouvre/archive/2010/04/20/1716486.html
(function(w,s){
s = ["XMLHttpRequest",
"ActiveXObject('Msxml2.XMLHTTP.6.0')",
"ActiveXObject('Msxml2.XMLHTTP.3.0')",
"ActiveXObject('Msxml2.XMLHTTP')",
"ActiveXObject('Microsoft.XMLHTTP')"];
if( !-[1,] && w.ScriptEngineMinorVersion() === 7 && location.protocol === "file:"){
s.shift();
}
for(var i = 0 ,el;el=s[i++];){
try{
if(eval("new "+el)){
dom.xhr = new Function( "return new "+el);
break;
}
}catch(e){}
}
})(window);
//annotations-based unit testing 基于注释的测试系统 2010 10 31
dom.abut = function(url){
var xhr = dom.xhr();
xhr.open("GET",url+"?"+(new Date-0),false);
xhr.send(null);
var text = xhr.responseText|| "";
evalCode(text)
}
var rcomments = /\/\/([^\r\n]+)|\/\*([\s\S]+?)\*\//g;
var rexports = /[\/]{2,}@{4}\(([^\r\n]+)\);?/g;
var r$$$$ = /(?:^|\s+)\$\$\$\$(\d+)(\w*)\(([^\r\n]+)\);?/g;
//$$$$same(countOne,{ok:1, eq:1, same:1, '':1})
var countOne = dom.oneObject(["ok","eq","same",""]);
var fns = {
ok:";\nabut.ok",
eq:";\nabut.eq",
same:";\nabut.same",
log:";\nabut.log"
}
var getAllComments = function(text){
var m , result = [];
while(m = rcomments.exec(text)){
result.push(m[1] || m[2]);
}
return result.join('\n');
};
//构建闭包的开头部分
var startClosure = function(index){
return "closures["+ index +"] = function(){\n var abut = window.dom.abut\n"
}
//构建闭包的结束部分
var endClosure = function(index,lineNumber){
return "};\nclosures["+ index+"].lineNumber = "+lineNumber+";\n";
}
//针对一条测试注释的小型闭包
var smartClosure = function(str,arr,obj){
var temp = "";
str.replace(r$$$$,function($,$1,$2,$3){
var fn = fns[$2] || fns.ok, testCode = fn + "("+$3+");\n";
temp += startClosure(obj.id)+
fn +".lineNumber = " + $1 + fn + ".testCode = " + testCode.slice(1,-2).quote() + testCode +
endClosure(obj.id,$1);
if(countOne[$2])
obj.count++;
obj.id++;
});
arr.push(temp )
}
//针对多条测试注释的大型闭包
var bigClosure= function(str,arr,obj){
var lineNumber;
str = str.replace(/^\d+/,function(str){
lineNumber = parseInt(str,10) ;
return ""
});
str = str.trim().replace(r$$$$,function($,$1,$2,$3){
if(countOne[$2])
obj.count ++;
var fn = fns[$2] || fns.ok, testCode = fn + "("+$3+");\n";
return fn +".lineNumber = " + $1 + fn + ".testCode = " + testCode.slice(1,-2).quote() + testCode;
});
var temp = startClosure(obj.id) + str + endClosure(obj.id,lineNumber);
obj.id++
arr.push(temp);
}
//添加行号以及暴露闭包中要测试中的数据到全局作用域下
var cleanCode = function (source) {
var lines = source.split( /\r?\n/) ;
for(var i=0,n = lines.length; i < n ;i++){
lines[i] = lines[i].replace(rexports,function($,$1){
dom.abut.isExports = true;
return ";dom.exports = dom.exports || {}; dom.exports["+ $1.quote()+"] = " + $1+";";
});
lines[i] = lines[i].replace(/\$\$\$\$|<<<</,function(str){
return str + (i+1)
});
}
return lines.join('\n');
};
var evalCode = function(source){
var abut = dom.abut;
abut.ULID = "abut-"+(new Date - 0);
abut.time = 0;
abut.isExports = false;
delete dom.exports;
var uneval = cleanCode(source),arr = getAllComments(uneval).trim().split("<<<<"),
i=0, n=arr.length, els,segment, resolving= ["var closures = window.dom.abut.closures = [];\n"],
obj ={
id:0,
count:0
}
while(i < n){
segment = arr[i++];
els = segment.split(">>>>");
if(segment.indexOf(">>>>") !== -1){//这里不使用el.length === 2是为了避开IE的split bug
bigClosure(els[0],resolving,obj)
if(els[1]){
smartClosure(els[1],resolving,obj)
}
}else{
smartClosure(els[0],resolving,obj)
}
}
//构筑单元测试系统的UI
var UL = document.createElement("UL");
abut.el = UL;
document.body.appendChild(UL);
UL.className ="dom-abut-result";
abut.render("dom-abut-title",'一共有'+obj.count+'个测试<span id="'+ abut.ULID+'"></span>');
abut.recoder = document.getElementById( abut.ULID);
addEvent(UL,"click",function(e){
var target = e.target || e.srcElement;
if(target.tagName ==="SPAN"){
var blockquote = target.parentNode.getElementsByTagName("blockquote")[0];
if(blockquote){
blockquote.style.display = !!(blockquote.offsetHeight || blockquote.offestWidth) ? "none": "block";
}
}
});
//添加样式
addSheet(".dom-abut-result {\
border:5px solid #00a7ea;\
padding:10px;\
background:#03c9fa;\
list-style-type:none;\
}\
.dom-abut-result li{\
padding:5px ;\
margin-bottom:1px;\
font-size:14px;\
}\
.dom-abut-result li span{\
cursor: pointer;\
}\
.dom-abut-result li blockquote{\
margin:0;\
padding:5px;\
display:none;\
}\
.dom-abut-title{\
background:#008000;\
}\
.dom-abut-pass{\
background:#a9ea00;\
}\
.dom-abut-unpass{\
background:red;\
color:#fff;\
}\
.dom-abut-log{\
background:#c0c0c0;\
}\
.dom-abut-log blockquote{\
background:#808080;\
}");
try {
abut.isExports && eval(uneval);
eval(resolving.join(""));
} catch (e) {
return abut.render("dom-abut-unpass","解析编译测试代码失败");
}
for(var i=0,fn;fn= abut.closures[i++];){
try {
fn();
} catch (e) {
return abut.render("dom-abut-unpass","第"+fn.lineNumber +"行测试代码执行失败");
}
}
}
//功能类似于Qunit的ok 布尔判定
dom.abut.ok = function(state){
var bool = !!state,
self = arguments.callee,
lineNumber = self.lineNumber,
testCode = self.testCode;
this.prepareRender(bool,lineNumber,testCode);
}
//功能类似于Qunit的equals 可隐式转换的等号比较
dom.abut.eq = function(actual, expected){
var bool = actual == expected,
self = arguments.callee,
lineNumber = self.lineNumber,
testCode = self.testCode;
this.prepareRender(bool,lineNumber,testCode);
}
//功能类似于Qunit的same 用于比较复杂的数据类型
dom.abut.same = function(actual, expected){
var bool = dom.isEqual(actual, expected),
self = arguments.callee,
lineNumber = self.lineNumber,
testCode = self.testCode;
this.prepareRender(bool,lineNumber,testCode);
}
//相等于firefox中的console.log
dom.abut.log = function(obj, message){
var context = "<span>第" + arguments.callee.lineNumber+"行日志记录 "+ (message || "") + "</span>";
var testCode = "<pre>"+dom.inspect(obj)+"</pre>";
dom.abut.render("dom-abut-log",context,testCode);
}
dom.abut.prepareRender = function(bool,lineNumber,testCode){
var className = bool ? 'dom-abut-pass' : 'dom-abut-unpass',
context = '<span>第'+ lineNumber+'行测试代码: '+(bool ? '通过' :'不通过' )+"</span>" ;
this.recoder.innerHTML = " 已完成第"+(++this.time)+"个测试";
this.render(className,context,testCode);
}
dom.abut.render = function(className,context,code){
var li = document.createElement("LI");
li.className = className;
this.el.appendChild(li);
var blockquote = document.createElement("blockquote")
li.innerHTML = context;
if(code){
li.appendChild(blockquote);
blockquote.innerHTML = code;
}
}
//用于比较对象
dom.isEqual = function(a, b) {
if (a === b) return true;
var atype = typeof(a), btype = typeof(b);
if (atype != btype) return false;
if (a == b) return true;
if ((!a && b) || (a && !b)) return false;
if (a.isEqual) return a.isEqual(b);
if (dom.type(a,"Date") && dom.type(b,"Date")) return a.valueOf() === b.valueOf();
if (dom.type(a,"NaN") && dom.type(b,"NaN")) return false;
if (dom.type(a,"RegExp") && dom.type(b,"RegExp"))
return a.source === b.source &&
a.global === b.global &&
a.ignoreCase === b.ignoreCase &&
a.multiline === b.multiline;
if (atype !== 'object') return false;
if (a.length && (a.length !== b.length)) return false;
var aKeys = Object.keys(a), bKeys = Object.keys(b);
if (aKeys.length != bKeys.length) return false;
for (var key in a) if (!(key in b) || !dom.isEqual(a[key], b[key])) return false;
return true;
}
//序列化对象（JSON.stringify对DOM对象无效，弃之）
dom.inspect = function(obj, indent) {
indent = indent || "";
if (obj === null)
return indent + "null";
if (obj === void 0)
return indent + "undefined";
if (obj.nodeType === 9)
return indent + "[object Document]";
if (obj.nodeType)
return indent + "[object " + (obj.tagName || "Node") +"]";
var arr = [],type = dom.type(obj),self = arguments.callee,next = indent + "\t";
switch (type) {
case "Boolean":case "Number":case "NaN": case "RegExp":
return indent + obj;
case "String":
return indent + obj.quote();
case "Function":
return (indent + obj).replace(/\n/g, "\n" + indent);
case "Date":
return indent + '(new Date(' + obj.valueOf() + '))';
case "Unknown": case "XMLHttpRequest" : case "Window" :
return indent + "[object "+type +"]";
case "NodeList":case "HTMLCollection": case "Arguments": case "Array":
for (var i = 0, n = obj.length; i < n; ++i)
arr.push(self(obj[i], next).replace(/^\s* /g, next));
return indent + "[\n" + arr.join(",\n") + "\n" + indent + "]";
default:
for (var i in obj) {
arr.push(next + self(i) + ": " + self(obj[i], next).replace(/^\s+/g, "") );
}
return indent + "{\n" + arr.join(",\n") + "\n" + indent + "}";
}
}
})()