使用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的绿色标志了。

当然，某次提交的结果是失败的话，这个标志也会自动更新为失败的红色标志的。

posted @ 2016-03-06 21:48 WFE-Hank 阅读(1446) 评论(0) 收藏举报

刷新页面返回顶部

使用Qunit和Grunt获得build passing标志

公告