使用Qunit和Grunt获得build passing标志
要说起测试的重要性,相信大家都说出很多,但真正做测试却少之又少,究其原因,缺少最根本的动力。具体说来,作为一个开发人员,新功能开发好了,老板看得见,测试写了,老板似乎并不关心,所以测试成了飘在半空中的幽灵。
我写测试的起因也很简单,要对一段代码做重构,代码的功能相对复杂,要是重构后每个功能都手动测试一遍会比较费时,因此想起了使用自动测试方法。
后来,为了能让自己在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的绿色标志了。
当然,某次提交的结果是失败的话,这个标志也会自动更新为失败的红色标志的。