node-qunit的测试结果如何显示到浏览器中（3）

拿到了全部详细测试结果报告，在浏览器格式化显示有两种方法：

（1）自己随便写；

（2）还是用QUnit，既然它能比较优美的在浏览器显示测试结果，那我们就把node-Qunit的结果也让它来显示吧。

先看到QUnit有个push方法，以为调用把结果报告一条一条调用QUnit.push(o.result,o.actual, o.expected, o.message)就行，结果什么也没有看到。算了，按它的规则添加一些测试用例吧。

view_QUnit.ejs:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title>QUnit Tesing - yjSecurity</title>
	<link rel="stylesheet" href="/js/QUnit-1.14.0/qunit-1.14.0.css">
	<script src="/js/jquery-1.10.1/jquery-1.10.1.js"></script>
	<script src="/js/qunit-1.14.0/qunit-1.14.0.js"></script>
</head>
<body>
	<div id="report"></div>
	<div id="qunit"></div>
	<div id="qunit-fixture"></div>

	<script>
		//var s = '<%- JSON.stringify(locals.data) %>';
		//$('#report').html(s);
		///获取服务器中测试的结果
		var o2 = <%- JSON.stringify(locals.data) %>;
		var o3 = o2.assertions;
		///把相同的测试名称的结果放在一起
		var ls = new Array();
		for (var i = 0; i < o3.length; i++) {
			var o = o3[i];
			var values = ls[o.test];
			if (values == null) {
				values = [];
				ls[o.test] = values;
			}
			values.push(o);
		}
		///在前端组成一个假的测试
		for ( var key in ls) {
			var values = ls[key];
			test(key, values.length, _test(values));
		}
		///注意小技巧：_test定义是必须的，否则不好处理匿名函数的参数
		function _test(values) {
			return function() {
				for (var i = 0; i < values.length; i++) {
					var o = values[i];
					///用QUnit.push没有效果
					//QUnit.config.current={module:o.module,testName:o.test,source:o.source,assertions:[]};
					//QUnit.push(o.result,o.actual, o.expected, o.message)		
				   if (o.result==false)
						equal(o.actual, o.expected, o.message+"\r\n"+o.source);
				   else
					   equal(o.actual, o.expected, o.message);
				}
			}
		}
	</script>
</body>
</html>

ok，比较满意了。至于对失败的测试，前端也会显示一个source节，当然是对调试代码没有用处，就先不要看，我也不知道如何替换成后台的source节，但后台返回的source节也显示出来了，就看这个吧。

火星牛

原创文章 159 获赞 11 访问量 36万+

关注他的留言板

node-qunit的测试结果如何显示到浏览器中（3）

猜你喜欢