IT技术互动交流平台

使用Qunit和Grunt获得build passing标志

作者:WFE-Hank  发布日期:2016-03-07 20:37:37

要说起测试的重要性,相信大家都说出很多,但真正做测试却少之又少,究其原因,缺少最根本的动力。具体说来,作为一个开发人员,新功能开发好了,老板看得见,测试写了,老板似乎并不关心,所以测试成了飘在半空中的幽灵。

我写测试的起因也很简单,要对一段代码做重构,代码的功能相对复杂,要是重构后每个功能都手动测试一遍会比较费时,因此想起了使用自动测试方法。

后来,为了能让自己在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-7atch.#39;: '>=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的绿色标志了。

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

延伸阅读:

Tag标签: 标志  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规