使用Qunit和Grunt得到build passing標誌

時間 2019-11-17

標籤使用 qunit grunt 得到 build passing 標誌欄目 JavaScript 简体版

原文原文鏈接

要提及測試的重要性，相信你們都說出不少，但真正作測試卻少之又少，究其緣由，缺乏最根本的動力。具體說來，做爲一個開發人員，新功能開發好了，老闆看得見，測試寫了，老闆彷佛並不關心，因此測試成了飄在半空中的幽靈。javascript

我寫測試的原由也很簡單，要對一段代碼作重構，代碼的功能相對複雜，要是重構後每一個功能都手動測試一遍會比較費時，所以想起了使用自動測試方法。css

後來，爲了能讓本身在github上提交的代碼有這個小標誌，有深刻學習了一下。因此今天要記錄的內容就是如何使用Qunit作測試和如何添加這個小標誌。html

使用Qunitjava

在選擇測試框架時，我考察了多種方法，包括Qunit、Mocha、Jasmine、chi等。最後因爲對jQuery的親而選擇了Qunit。Quint仍是很簡單而且易上手的。node

以下所示，創建一個頁面，加載所需css和js，而後就能夠了。git

使用這種方法能夠對js文件作測試，要看測試結果時刷新頁面便可。github

<!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成功的，也增長了別人使用時的可靠性。npm

要得到這個標誌咱們分三步來講。json

首先是編寫本身的代碼和測試用例。markdown

而後是使用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的綠色標誌了。

固然，某次提交的結果是失敗的話，這個標誌也會自動更新爲失敗的紅色標誌的。

1. generator-angular-fullstack grunt build
2. Grunt的配置和使用
3. grunt的學習和使用
4. 【grunt整合版】grunt使用
5. Grunt的使用
6. 使用grunt中遇到的問題
7. qunit和mockjax前端測試
8. grunt 使用比較
9. grunt入門之grunt watch的使用
10. Grunt的配置和使用(一)
更多相關文章...
• Docker build 命令 - Docker命令大全
• Wireshark下載安裝和使用教程 - TCP/IP教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。