原生js写一个测试套件

  • 测试套件中,使用的主要是断言函数,传入布尔值与描述,通过新建一个li描述,在测试通过时打上红色文字,否则绿色文字;
  • 使用test函数在视觉上封装一个测试组,主要时通过闭包的result变量实现;第一次将套件的标题插入在外围的结果标签中,返回的结果改变的result变量,执行回调函数陆续将套件的中的单元测试添加到result变量中。

页面样式


<style type="text/css">
 .fail{color: red;}
 .pass{color: green;}
</style>
<ul id="result"></ul>

javascript实现


(function(){
	//闭包的结果变量
	var result;
	//暴露在全局的断言函数
	this.assert=function(value,desc){
		var li=document.createElement('li');
		value==true?li.className='pass':li.className='fail';
		var textNode=document.createTextNode(desc);
		li.appendChild(textNode);
		result.appendChild(li);
		if(!value){
			li.parentNode.parentNode.className='fail';
		}
		return li;
	}
	//暴露在全局的套件函数
	this.test=function(name,fn){
		//页面中result的标签
		result=document.getElementById('result');
		//result为新建的ul标签
		result=assert(true,name).appendChild(document.createElement('ul'));
		//回调函数执行子断言,封装在ul标签里面
		fn();
	}

})();	
test('A test',function(){
	assert(true,'one of A test!');
	assert(false,'one2 of A test!');
	assert(true,'one2 of A test!');
});
test('B test',function(){
	assert(true,'one of A test!');
	assert(false,'one2 of A test!');
	assert(true,'one2 of A test!');
});

Published: October 03 2016