好久没写博客了,趁着年前空闲的时间来一篇轻松点的东西。
最近工作中积累了一些Angular组件打算整一整把他们开源了,既然要开源那么代码可靠性就很重要了,单测不能少,为了保证每次提交的代码都能很好的运行,持续集成不能少。之前看到很多开源项目介绍中都有一些单测覆盖率和build结果的图标,就像这样:

觉得挺酷的。打算在自己的开源组件中也整一套。
经过Google决定使用TravisCI来进行持续集成,Codecov来统计单测覆盖率。

Travis CI

Travis CI是国外新兴的开源持续集成构建项目,支持Github项目。使用十分方便。

  1. 使用Github账号登录Travis CI

  2. 登录之后会自动同步Github项目,选择需要使用Travis CI的项目

  3. 在项目的根目录新增.travis.yml文件,内容如下:

#指定运行环境
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就会失败。

Codecov

Codecov是一个开源的测试结果展示平台,将测试结果可视化。Github上许多开源项目都使用了Codecov来展示单测结果。
Codecov跟Travis CI一样都支持Github账号登录,同样会同步Github中的项目。在nodejs环境下使用Codecov需要安装对于的npm包,运行下面这个命令进行安装:

npm install codecov --save-dev

这个包的作用是将我们运行单测产生的结果文件上传到Codecov上进行可视化展示。同时codecov支持的结果文件类型为cobertura。所以需要保证单测执行的结果文件的类型为cobertura
前端项目进行单元测试推进karma + 'jasmine'的组合。这两个具体是什么东西大家Google一下就知道。使用karma可以通过简单的配置来运行单测。下面是我一个项目中的配置文件,供大家参考:

// 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。

在github中加入图标

到了最后一步,Travis CI和Codecov都提供图标链接来展示结果。我们只需要将图标链接加入到项目的README中就可以看到结果了。
对于Travis CI来说,点击下图中的图标:


就会弹出图标的地址。
对于Codecov来说,打开项目的设置列表就会看到,如下:

最后只需要将对应的链接加到README文件中就可以了。下面是最后的效果:

是不是很赞!
项目地址:BGSingleSelector,欢迎大家试用提意见,同时不要吝啬Star。

最后的最后,做一个广告。百度告警平台。这是一个智能的告警平台,提供实时精确的告警送达,故障的协作处理能力。再也不需要担心遗漏监控报警,解放运维人力。

最后,安利下我的个人博客,欢迎访问: http://bin-playground.top

你可能感兴趣的文章

Zhuxy · 2016年11月28日

赞,刚在自己的项目里加了一个CI

回复

载入中...
lakb248 lakb248

2.3k 声望

发布于专栏

MyCodingLife

前端分享

84 人关注