技术开发 频道

JavaScript基于MVC3和qUnit的单元测试

  【IT168技术】关于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>
}

   然后编译运行,你将得到如下结果:

JavaScript基于MVC3和qUnit的单元测试

  然后你就可以狂加 test case了,你只需要follow下面的步骤即可:

  ①创建JS和需要测试的JS_Tests文件

  ②添加对应的Action方法到TestsController

  ③为新添加的Action添加对应的View

  ④在View的Javascriptd块里添加JS的引用

0
相关文章