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

最新推荐文章于 2025-07-29 19:00:00 发布

原创最新推荐文章于 2025-07-29 19:00:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

Node.js 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种将单元测试集成到Web应用的方法，通过点击Web页面上的链接即可触发单元测试，并将测试结果以网页形式展示。使用Mocha作为测试框架，并通过自定义批处理文件和HTML报告器实现。

昨天把内部页面建立起来了，那么今天就把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"