本文主要是介绍使用QUnit结合MVC3来做JavaScript单元测试，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
关于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的引用
这篇关于使用QUnit结合MVC3来做JavaScript单元测试的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
