javascript CI篇
关注公众号
获取最新福利
微信公众号

javascript CI篇

时间: 03/07/2018作者: ll浏览量: 1694

1. Jasmine 基础学习

1.1 jasmine 简介

Jasmine 是一个含有丰富的断言库的测试框架。目前我用的最新的版本是:2.6

1.2 命令行中环境中使用jasmine

  • 安装
npm install -g jasmine //这里采用全局安装,好处是直接cmd就能用,也可以采用本地安装
  • 初始化配置
jasmine init
  • 生成的配置文件如下jasmine.json:
{
  "spec_dir": "spec", //spec 所在目录
  "spec_files": [
    "**/*[sS]pec.js"        //测试文件,相对于spec_dir
  ],
  "helpers": [
    "helpers/**/*.js"       //测试前辅助文件,相对于spec_dir
  ],
  "stopSpecOnExpectationFailure": false, //
  "random": false
}
  • 运行测试
//直接根据配置文件运行
jasmine 

//执行测试某个文件
jasmine appSpec.js

1.3 node 环境中使用jasmine

var Jasmine = require('jasmine');
var jasmine = new Jasmine();
  • 加载配置文件
//方式1
jasmine.loadConfigFile('spec/support/jasmine.json');

//方式2
jasmine.loadConfig({
    spec_dir: 'spec',
    spec_files: [
        'appSpec.js',
        'requests/**/*[sS]pec.js',
        'utils/**/*[sS]pec.js'
    ],
    helpers: [
        'helpers/**/*.js'
    ]
});
  • 自定义测试完成事件
jasmine.onComplete(function(passed) {
    if(passed) {
        console.log('All specs have passed');
    }
    else {
        console.log('At least one spec has failed');
    }
});
  • 自定义测试报告
jasmine.configureDefaultReporter({
    timer: new this.jasmine.Timer(),
    print: function() {
        process.stdout.write(util.format.apply(this, arguments));
    },
    showColors: true,
    jasmineCorePath: this.jasmineCorePath
});
var CustomReporter = require('./myCustomReporter');
var customReporter = new CustomReporter();

jasmine.addReporter(customReporter);
  • 执行测试
jasmine.execute();
jasmine.execute(['fooSpec.js'], 'a spec name');
  • 简单完整的测试案例
var Jasmine = require('jasmine');
var jasmine = new Jasmine();

jasmine.loadConfigFile('spec/support/jasmine.json');
jasmine.configureDefaultReporter({
    showColors: false
});
jasmine.execute();

2. Karma基础学习

2.1 Karma简介

Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透!

Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果。

2.2 Karma 和 mocha,Qunit,jasmine区别

But I still want to use _insert testing library_

Karma is not a testing framework, nor an assertion library. Karma just launches an HTTP server, and generates the test runner HTML file you probably already know from your favourite testing framework. So for testing purposes you can use pretty much anything you like. There are already plugins for most of the common testing frameworks:

Jasmine
Mocha
QUnit
and many others
If you can't find an adapter for your favourite framework, don't worry and write your own. It's not that hard and we are here to help.

引用官方的说明,karma不是一个测试框架,没有断言库。Karma只是运行了一个HTTP服务并生成一个测试入口HTML文件Test Runner。所以使用Karma需要自己选择测试框架,主流的测试框架有:

  • Jasmine

  • Mocha

  • QUnit

Karma 默认的是使用jasmine

2.3 什么时候使用

  1. 你想在真实的浏览器中测试代码

  2. 你想测试代码在多平台,多个浏览器(桌面,移动设备,平台)

  3. 你想在本地开发期间执行测试

  4. 你想在持续集成服务器执行测试

  5. 你想执行测试在每次保存

  6. You love your terminal.

  7. You don't want your (testing) life to suck.

  8. 你想使用Instanbul去自动化生成覆盖率报告

  9. You want to use RequireJS for your source files.

2.4 开始使用

安装

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

初始化配置文件

karma init my.conf.js

这里一路按enter就可以了,我们使用默认的测试框架jasmine

启动

karma start my.conf.js

我的项目中会报找不到Error: Cannot find module 'jasmine-core'错误,开始采用的是 npm install --save-dev的模式有这个问题,分析了源码觉得是他们代码或者是node 环境下CMD的问题,我运行的Node版本是6.9.1。后来通过npm install -g 的方式暂时修复了

karma.conf.js

config.set({

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

    // 测试框架
    frameworks: ['jasmine'],


    // 要监听的文件列表,支持通配符模式
    files: [**/*.test.js],

    // 要排除的文件列表,支持通配符
    exclude: [**/*.js],

    // 在文件提交给浏览器做预处理
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // 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: ['Chrome'],


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

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

2.5 总结

是不是觉得Karma挺简单的?确实是挺简单的,这就是Test-Runner而不是Test Framework。Karma核心功能就是启动一个服务并监听项目文件改变,文件改变后再刷新服务器。

3. Karma + Jasmine + istanbul

3.1 安装

//karma
npm install karma --save-dev

//jasmine
npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

//istanbul
npm install karma-coverage
npm install karma-jasmine-html-reporter --save-dev

npm脚本

karma采用本地安装模式,所以运行karma是在node_module/.bin/karma.cmd,运行起来麻烦,直接package.json中加载脚本方便运行

"karma-start": ".\\node_modules\\.bin\\karma.cmd start",
"karma-init": ".\\node_modules\\.bin\\karma.cmd init"

3.2 配置karma.conf.js

先运行karma init完成初始化配置,karma默认用的测试框架就是jasmine。

//npm 脚本
npm run karma-init

修改配置文件

//这里要注意,预处理的文件是源码,而不是测试文件,因为我们要查源码的测试覆盖率
    preprocessors: {
      'src/**/*.js':'coverage'
    },
    //istanbul的配置
    coverageReporter: {
        type : 'html',
        dir : 'coverage1/'
    },

    https://npmjs.org/browse/keyword/karma-reporter
    //'coverage','kjhtml' 这两个覆盖率报告
    reporters: ['progress','coverage','kjhtml'],

运行

运行后直接在网页中点debug可以看测试情况。如果你看覆盖率需要到项目目录找到coverage1对应浏览器Chrome地下的index.html文件。

4. Github + Travis 持续集成

4.1 Travis 简介

Travis CI(continuous integration )是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI的构建队列中,据说Travis CI每天运行超过4000次完整构建。

还有Travis有付费和免费版本,对于开源项目(github)是免费的,对于私有项目是要收费的。企业级私有应用需要找Travis商业合作

另外如果是Window上开发,需要注意一下有没有针对Window用的命令,例如:package.json中的脚本写成

'test':'.\\node_modules\\.bin\\karma.cmd start'

4.2 基于github使用Travis

Travis和github是一对好基友,travis对github开源的项目完全免费。

  • 首先需要用github账号登陆travis网站

  • 注册成功后,然后点击自己的账户头像,

  • 然后开启Travis image.png

  • 在项目中增加.travis.yml配置文件

以上操作已经完成了项目的CI所有工作了。

4.3 查看构建情况

image.png

README.md增加逼格badge image.png 首先README要是一个markdown文档。

Build Status

Build Status是由Travis提供的真实的构建情况badge。首先到Travis找到对应的项目(如下图),然后点击这个如图这个图标,选择markdown,会自动生成markdown的路径,拷贝路径到README就可以了。

4.4 coverage

代码覆盖率生成报告的框架是用istanbul,如果想在github上生成对应的badge,需要将istanbul生成的报告发给CoverAlls>CoverAlls。和Travis一样使用CoverAlls也需要先用github的账号登陆CoverAlls,然后再开启项目,详见下图: image.png

具体配置如下:

  • package.json 增加
//注意package.json要有coveralls npm库的依赖,
//另外因为生成的报告目录是:coverage/Chrome 59.0.3071 /lcov.info,
//所以这边cat的时候携程`./coverage/*/lcov.info`

"test": "./node_modules/.bin/karma start  --single-run  && cat ./coverage/*/lcov.info | coveralls",
  • .travis.yml增加
after_success:
# - ls /home/travis/build/cllgeek/gtool/coverage 可以看你报告生成报告的目录内容,注意项目路径。
- npm run coveralls

4.5 npm 相关badge

如果你的项目是一个NPM的库,你可以把库提交到NPM,然后再用NPM提供的badge用法很简单。 shields.io其中xxx是你项目的名字,dm是download简写。

极客教程网
——一个你值得来的网站
编程笔记:学习分享,与君共勉!
小书本:小小书,大知识!
轮子库:介绍各种库、插件的用途
在线工具:极客工具,在线工具,在线运行
前端导航:前端导航,前端资源聚合平台
微信公众号
极客教程(geekjc)
QQ群:
495489065

Copyright © 2018 - ~ All Rights Reserved. Made By Snow 备案号:粤ICP备15001588号-4