Github裝逼指南——Travis CI 和 Codecov

時間 2019-11-06

原文原文鏈接

很久沒寫博客了，趁着年前空閒的時間來一篇輕鬆點的東西。
最近工做中積累了一些Angular組件打算整一整把他們開源了，既然要開源那麼代碼可靠性就很重要了，單測不能少，爲了保證每次提交的代碼都能很好的運行，持續集成不能少。以前看到不少開源項目介紹中都有一些單測覆蓋率和build結果的圖標，就像這樣：javascript

以爲挺酷的。打算在本身的開源組件中也整一套。
通過Google決定使用TravisCI來進行持續集成，Codecov來統計單測覆蓋率。html

Travis CI

Travis CI是國外新興的開源持續集成構建項目，支持Github項目。使用十分方便。前端

使用Github帳號登陸Travis CI；java
登陸以後會自動同步Github項目，選擇須要使用Travis CI的項目node
在項目的根目錄新增.travis.yml文件，內容以下：jquery

#指定運行環境
language: node_js
#指定nodejs版本，能夠指定多個
node_js:
  - 0.12.5

#運行的腳本命令
script:
  - npm run ci

#指定分支，只有指定的分支提交時纔會運行腳本
branches:
  only:
    - master

更多語法請看這裏。使用起來很是方便，這樣當你每次向github push代碼的時候，Travis CI就會自動運行.travis.yml裏面的script。自動進行編譯以及運行單測。
因爲Travis CI每次build以前都會運行npm install安裝項目依賴的npm包，因此在提交代碼的時候要保證把全部依賴的包都已經在package.json中聲明瞭，不然build就會失敗。git

Codecov

Codecov是一個開源的測試結果展現平臺，將測試結果可視化。Github上許多開源項目都使用了Codecov來展現單測結果。
Codecov跟Travis CI同樣都支持Github帳號登陸，一樣會同步Github中的項目。在nodejs環境下使用Codecov須要安裝對於的npm包，運行下面這個命令進行安裝：github

npm install codecov --save-dev

這個包的做用是將咱們運行單測產生的結果文件上傳到Codecov上進行可視化展現。同時codecov支持的結果文件類型爲cobertura。因此須要保證單測執行的結果文件的類型爲cobertura。
前端項目進行單元測試推動karma + 'jasmine'的組合。這兩個具體是什麼東西你們Google一下就知道。使用karma能夠經過簡單的配置來運行單測。下面是我一個項目中的配置文件，供你們參考：web

// Karma configuration
// Generated on Mon Feb 01 2016 21:34:22 GMT+0800 (中國標準時間)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    // 使用的測試框架jasmine, requirejs支持模塊化加載
    frameworks: ['jasmine', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
        // karma中用到進行requirejs配置的文件
        'test/test-main.js',
        // 測試中須要用到的文件，includeed設爲false表示在頁面加載的時候不會加載相應的js文件，也就是能夠經過requirejs進行異步加載
        {pattern: 'node_modules/jquery/dist/jquery.min.js', included: false},
        {pattern: 'node_modules/angular/angular.min.js', included: false},
        {pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false},
        {pattern: 'src/bg-single-selector.js', included: false},
        {pattern: 'test/selector.spec.js', included: false}
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    // 針對bg-single-selector.js生成單測覆蓋率結果
    preprocessors: {
        'src/bg-single-selector.js': 'coverage'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    // 測試結果的幾種輸出方式
    reporters: ['progress', 'coverage', 'verbose'],
    // 測試結果報告的類型
    coverageReporter:{
        reporters: [{
            type:'text-summary'
        }, {
            type: 'html',
            dir: 'test/coverage'
        }, {
            // 這就是Codecov支持的文件類型
            type: 'cobertura',
            subdir: '.',
            dir: 'test/coverage'
        }]
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],
    // 運行測試依賴的插件
    plugins: [
        'karma-jasmine',
        'karma-coverage',
        'karma-verbose-reporter',
        'karma-phantomjs-launcher',
        'karma-requirejs'
    ],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  })
}

經過karma進行單元測試，將命令寫到.travis.yml中就能夠在每次build的時候運行單測，同時運行codecov [cobertura-coverage.xml路徑]就會把單測結果上傳到Codecov。在本地運行codecov會失敗，須要將這個過程加入到Travis CI的build腳本中，才能成功上傳。由於在本地運行就會被做爲私有項目，對於私有項目在上傳結果時須要加上Codecov提供的token。shell