要说起测试的重要性，相信大家都说出很多，但真正做测试却少之又少，究其原因，缺少最根本的动力。具体说来，作为一个开发人员，新功能开发好了，老板看得见，测试写了，老板似乎并不关心，所以测试成了飘在半空中的幽灵。
我写测试的起因也很简单，要对一段代码做重构，代码的功能相对复杂，要是重构后每个功能都手动测试一遍会比较费时，因此想起了使用自动测试方法。
后来，为了能让自己在github上提交的代码有这个小标志，有深入学习了一下。所以今天要记录的内容就是如何使用Qunit做测试和如何添加这个小标志。
使用Qunit
在选择测试框架时，我考察了多种方法，包括Qunit、Mocha、Jasmine、chi等。最后由于对jQuery的亲而选择了Qunit。Quint还是很简单并且易上手的。
如下所示，建立一个页面，加载所需css和js，然后就可以了。
使用这种方法可以对js文件做测试，要看测试结果时刷新页面即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="qunit-1.20.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="qunit-1.20.0.js"></script>
</body>
</html>
大家看看别人的github资源时应该注意到过这个标志，大概的意思就是人家的资源时build成功的，也增加了别人使用时的可靠性。
要获得这个标志我们分三步来说。
首先是编写自己的代码和测试用例。
然后是使用grunt来进行自动化测试。
最后是使用travis-ci来托管代码并生产测试结果。
下面我们用一个完整的示例来做展示。
编码和测试用例
首先是示例的源码部分。这是一个功能很简单的函数，用一个函数返回a加b的结果。
function aplusb (a, b) {
return a + b;
}
一个简单的测试用例。
QUnit.test("test", function(assert) {
assert.equal(aplusb(1,2), 3);
});
使用Grunt
首先是安装grunt，安装后自己制作文件package.json和Gruntfile.js。
// package.json
{
"name": "modalone",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-qunit": ">=0.2.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": ">=0.3.1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hank1732/aplusb.git"
},
"license": "MIT",
"dependencies": {},
"scripts": {
"test": "grunt test"
}
}
// Gruntfile.js
module.exports = function(grunt) {
// Grunt的初始化配置
grunt.initConfig({
qunit: {
files: ['test/**/*.html']
}
});
// 加载Grunt任务
grunt.loadNpmTasks('grunt-contrib-qunit');
// 在命令行上输入"grunt test"，test task就会被执行。
grunt.registerTask('test', ['qunit']);
};
此时的文件目录结构为
使用travis-ci
首先按照教程编写.travis.yml文件，并放在根目录下。
language: node_js node_js: - "4.2.3" before_script: - npm install grunt-cli -g install: npm install
然后使用github账号登录travis-ci并选择要测试的项目，然后便会自动测试并生成结果。
生成正确的结果后，点击这个标志，
然后在弹出框中选择markdown模式，再将那一行文字贴到我们项目的README.md中即可。
这样我们项目便会有一个build passing的绿色标志了。
当然，某次提交的结果是失败的话，这个标志也会自动更新为失败的红色标志的。