为Internal页面添加一个Unit Test的运行入口

昨天把内部页面建立起来了,那么今天就把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	mp	est_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;
     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 "..
ode_modulesmochainmocha" "....Test	est*.js" -R mocha-html-reporter>"..	mp	est_result.html"





原文地址:https://www.cnblogs.com/puncha/p/3876895.html