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

最新推荐文章于 2024-12-02 18:15:00 发布

火星牛

最新推荐文章于 2024-12-02 18:15:00 发布

阅读量1.1k

点赞数

分类专栏： Javascript Node.js

本文链接：https://blog.csdn.net/acrodelphi/article/details/22846829

版权

Javascript 同时被 2 个专栏收录

38 篇文章

订阅专栏

Node.js

10 篇文章

订阅专栏

本文介绍了一种方法将详细测试结果报告在浏览器中格式化显示，包括自定义实现和利用QUnit的强大功能。通过QUnit的push方法尝试直接显示结果未成功，后采用将结果整合为QUnit可解析的格式并实现自定义测试函数来解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

（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节也显示出来了，就看这个吧。