昨天把内部页面建立起来了,那么今天就把Unit Test的运行入口赛到里面去,就是说,点击某一个链接,就运行Unit Test,并且把Unit Test的结果,通过网页显示出来。这个想法还是蛮不错的。做起来也容易,当然其中有些小挫折。
这里就是全部的源代码。Unit Test是mocha做的,我原来的思路是,运行mocha命令,然后把stdout的内容输出。但是有问题,那就是我死活拿不到完整的stdout输出,这个应该是mocha的一个bug,不高兴去研究了。所以我找了个work round,把mocha的结果重定向到一个html文件,然后,把文件内容读出来,再显示:
exports.integrationTest = function (req, res) {
var resultFile = "./tmp/test_result.html";
async.waterfall([
// delete the old test result
function (callback) {
fs.unlink(resultFile);
callback();
},
// generate new test result
function (callback) {
var cmd = 'IntegrationTest.bat';
var opt = {
cwd: "./utilities"
};
var process = spawn(cmd, [], opt);
var content = "";
process.on('close', function () {
callback();
});
},
// render test result
function (callback) {
fs.readFile(resultFile, callback);
},
], function (error, content) {
if (error) res.send(500);
else {
res.render("page_integration_test",
{
title: "Integration Test",
header: "Integration Test Result",
content: content
});
}
});
}
因为,Unit Test的文件,和Web Server在同一个目录,所以只能写一个bat来运行,下面是bat的内容(IntegrationTest.bat):
@ECHO OFF
cd ..\..\Test
mocha -R mocha-html-reporter>"..\WebSite\tmp\test_result.html"
注意,mocha-html-reporter不是标准的mocha reporter,所以需要先全局安装下。他会以html的格式输出整个测试结果。测试结果很丑,所以需要美化下,这个是page_integration_test.ejs和CSS文件(注意页面背景要设置成黑的):
page_integration_test.ejs:
<!DOCTYPE html>
<html>
<head>
<% include header_title_meta %>
<% include header_css %>
<link rel="stylesheet" type="text/css" href="/stylesheets/integration_test_style.css" />
</head>
<body>
<% include fragment_header %>
<div><%- content %></div>
</body>
</html>
integration_test_style.css:
header {
color: white;
text-align: center;
font-size: 26px;
}
body {
font-family: Calibri, Segoe UI,Arial,sans-serif;
}
#stats li.progress {
visibility: hidden;
float: right;
width: 0px;
height: 0px;
}
#stats li.passes {
font-size: 24px;
color: #00ff21;
}
#stats li.failures {
font-size: 24px;
color: red;
}
#stats li.duration {
font-size: 24px;
color: white;
}
#report {
margin-top: 50px;
}
#report span {
font-size: 14px;
color: white;
margin-left: 10px;
}
#report h1 {
font-size: 18px;
color: white;
}
#report li {
font-size: 11px;
color: yellow;
}
这个是截图:
更新!
今天碰到一个问题,用iisnode托管运行的话,会报错!后来发现,是因为全局安装mocha的话,mocha库是自动安装到npm的appData下面的,所以可能 IIS 没有权限访问。那么,索性我就别全局安装了,就本地安装算了:
npm install mocha --save
npm install mocha-html-reporter --save
然后还要修改一下IntegrationTest.bat):
@ECHO OFF
node "..\node_modules\mocha\bin\mocha" "..\..\Test\test\*.js" -R mocha-html-reporter>"..\tmp\test_result.html"