本文只介绍Qunit的使用,不再介绍单元测试框架的选型过程。
QUnit的官网介绍:
QUnit is a powerful, easy-to-use JavaScript unit testing framework.
QUnit是一个强大的、简单易用的javascript单元测试框架。
可以到QUnit官网(https://qunitjs.com)上下载qunit.js和qunit.css两个文件。
虽然有jQuery CDN(https://code.jquery.com/)和GitHub托管(https://github.com/jquery/qunit)的代码可用,但是为了稳定,还是下载了使用吧。
以下的代码示例直接使用QUnit官网首页的示例。
QUnit单元测试的HTML页面代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="/resources/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="/resources/qunit.js"></script>
<script src="/resources/tests.js"></script>
</body>
</html>
tests.js中的示例代码:
test( "hello test", function() {
ok( 1 == "1", "Passed!" );
});
断言是单元测试中最常用、最核心的概念,就是在测试的时候,对代码的运行结果作出的一些假设。如果断言成立,就说单元测试通过,反之则视为测试失败。
最常用的测试代码,示例如下:
test("该测试用例的主题", function(){/*- 具体的测试断言 -*/});
当测试用例较多时,可以用module()方法进行分组。示例如下:
module( "测试分组一" );
test( "测试方法1", function() {});
test( "测试方法2", function() {});
module( "测试分组二" );
test( "测试方法3", function() {});
test( "测试方法4", function() {});
在测试结果HTML页面上,会以 测试分组一:测试方法1
的形式呈现。
一个测试方法只有一个断言是个好习惯。只是好习惯哦!
一目了然,ok和equal是最常用的。
Grunt构建工具的安装和使用,关于参考教程《Grunt的安装和使用》
QUnit Grunt任务(grunt-contrib-qunit)的使用,请参见GitHub上的说明https://github.com/gruntjs/grunt-contrib-qunit
使用QUint作单元测试,PhantomJS是必须要安装的。
PhantomJS(https://phantomjs.org/) 是一个无界面的WebKit浏览器引擎,还有配套的JavaScript API。它原生支持各种web标准技术:DOM处理,CSS选择器,JSON,Canvas,以及SVG。 。
可以在命令行中使用以下的命令进行安装:
npm install phantomjs -g