QUnit 5分钟教程-阿里云开发者社区

QUnit 5分钟教程

2017-11-15 1427

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

QUnit是一个非常简单而且强大的单元测试框架，简单到稍微懂点javascript的人，5分钟不到就会了，以下就是这个框架的用法：

首先，既然是一个框架，肯定有框架的共有特征（框架的css->qunit.css,框架的js函数库->qunit.js，框架的HTML 显示页面->framework.html，我们按照规范放置在应该放置的地方，如下图所示：）

既然是javascript测试框架，那么肯定就有两部分组成，一部分是被测试的javascript函数，另一部分是测试语句的javascript函数，我们分别建2个文件夹(needTestJS和tcJS来放置）。

Part 1: 被测试的javascript函数：

我们这里写了两个函数，按照QUnit的建议，我们为其定义一个测试模块（模块化嘛）一个用于测试参数是否为数字，一个用于测试传入的数是否为偶数：

Part 2:测试用例：

测试用例也是javascript函数，我们必须用测试断言来构造这些测试用例，有很多种测试断言，最常用的几种有：ok() ,equals(),same()，具体他们用在什么场合见我的代码注释部分：

Part 3: 显示结果：

测试，要调用这些测试方法和显示结果（无数java developer的为绿条而欢呼雀跃，为红条而忧伤，QUnit中沿用了JUnit中的颜色设定风格），我们必须要有个底座，幸运的是,QUnit框架已经为我们提供了这个底座(HTML页面)，我们只需要吧被测试的js和测试用例js添加进去，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="../css/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="../js/qunit.js"></script>
<script type="text/javascript" src="../project/needTestedJS/module.js"></script>
<script type="text/javascript" src="../project/tcJS/moduleTest.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit测试套件</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>

然后我们就可以看到测试结果了，正确的则显示绿条和注解，错误的则显示红条以及错误信息：

比如我们这里故意放了一个错误，我们在测“恒等断言”时候，我们故意给了2个不等的json 对象，一个是{a:1}，一个是{a,50},所以，这里就“爆红”了。

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/860089，如需转载请自行联系原作者

QUnit 5分钟教程