大叔手記（5）：使用QUnit結合MVC3來做JavaScript單元測試

2011-12-14 19:35 湯姆大叔閱讀(4376) 評論(3) 收藏舉報

關于QUnit

幾乎所有的網站都在使用JavaScript，而所有的Javascript開發人員也都想做單元測試，但是一直都為付諸行動，大叔告誡大家，該做了，不然要被別人鄙視了，因為現在是個上網的人都應該用到了JavaScript，而且HTML5來臨以后，越來越多的JavaScript代碼要去開發。

本文所用到的QUnit是由jQuery team開發的，原本是用于jQuery框架的測試，后來獨立發展出來，可以測試任意JavaScript代碼，而且提供了非常簡單的API讓你非常簡單的來創建你的Test Case。

先上個簡單的代碼：

// calculator.js
var Calculator = function(){};

Calculator.prototype.add = function(x,y){
    return x + y;
}

// calculator_test.js
module("calculator測試用例");
test("第一組測試用例", function(){
    var calc = new Calculator();
    ok(calc, "實例化創建用例通過")
    equals(calc.add(2,2), 4, "如果不等于4，宇宙規則將被打破了。");
});

module是聲明測試用例的模塊名稱，每一個test提供一個名稱和function callback，然后你在里面可以聲明多個斷言。例子里我們使用了2個最常用的斷言函數ok(value, [successMessage])和equals(actual, expected, [successMessage]), QUnit還提供了很多，比如：notEqual, deepEqual, notDeepEqual, strictEqual, notStrictEqual, 和raises。

按照QUnit的文檔，我們最終的代碼應該是這種格式：

<!DOCTYPE html>
<html>
<head>
    <title>calculator.js測試</title>
    <link rel="stylesheet" type="text/css" href="/Content/qunit.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/qunit.js"></script>
    
    <script type="text/javascript" src="/scripts/calculator.js"></script>
    <script type="text/javascript" src="/scripts/calculator_test.js"></script>

</head>
<body>
    <h2>calculator.js測試</h2>
    <h1 id="qunit-header">QUnit example</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <a href="/">Back to Tests</a>
</body>
</html>

MVC風格實現

讓我們來看看結合MVC如何來做，首先聲明一個TestController：

    public class TestsController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Calculator()
        {
            return View();
        }
    }

然后創建首頁使用的index view，在這個view里我們不使用_layout文件，主要是用來顯示每個測試用例組的連接：

    <ul>
        @{
            var controller = ViewContext.Controller.GetType();
            var methods = controller.GetMethods()
                .Where(m => m.ReturnType.ToString() == "System.Web.Mvc.ActionResult");

            foreach (var method in methods)
            {
            <li>@Html.ActionLink(@method.Name, @method.Name, "Tests")</li>
            }
        }
    </ul>

這樣，我們可以訪問該Controller下所有的測試用例（我們用每個action代表一個類型的測試），

接著在在Tests目錄下，創建_ViewStart視圖文件用來設置Layout，Views/Tests/_ViewStart.cshtml：

@{
    Layout = "_TestsLayout.cshtml";
}

Views/Tests/_TestsLayout.cshtml的代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="@(Url.Content("~/Content/qunit.css"))" />
    <script type="text/javascript" src="@(Url.Content("~/Scripts/jquery-1.5.1.min.js"))"></script>
    <script type="text/javascript" src="@(Url.Content("~/Scripts/qunit.js"))"></script>
    @RenderSection("Javascript", false)
</head>
<body>
    <h2>@ViewBag.Title</h2>
    <h1 id="qunit-header">QUnit example</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    @Html.ActionLink("Back to Tests", "Index", "Tests")
</body>
</html>

然后每一個view，也就是每一個測試用例組所對應的action使用的view代碼都是和如下類似，不同的只是要測試的js不同：

@{
    ViewBag.Title = "calculator.js測試";
}
@section Javascript{
    <script type="text/javascript" src="@(Url.Content("~/scripts/calculator.js"))"></script>
    <script type="text/javascript" src="@(Url.Content("~/scripts/calculator_test.js"))"></script>
}

然后編譯運行，你將得到如下結果：

然后你就可以狂加 test case了，你只需要follow下面的步驟即可：

創建JS和需要測試的JS_Tests文件
添加對應的Action方法到TestsController
為新添加的Action添加對應的View
在View的Javascriptd塊里添加JS的引用

另外，關于Ajax的mock數據，你可以訪問：http://github.com/appendto/jquery-mockjax

原文來自jonathancreamer博客，做了一些改善。

同步

本文已同步至目錄索引：《大叔手記全集》

結束語

大叔手記：旨在記錄日常工作中的各種小技巧與資料（包括但不限于技術），如對你有用，請推薦一把，給大叔寫作的動力

刷新頁面返回頂部

湯姆大叔的博客

大叔手記（5）：使用QUnit結合MVC3來做JavaScript單元測試

關于QUnit

MVC風格實現

同步

結束語

About