angularJS测试并集成到jinkens

最近我们打算把angularJS的测试集成到jinkens中去，由于jinkens上所需要的格式和angular官方例子中的不一样，最后在google和API的帮助下，找到了较好的解决办法。但是protractor的测试覆盖率去没有好的解决办法（个人感觉也没必要将protractor集成到jinkins上）。

plantomJS

由于karma和protractor是需要浏览器才能运行的测试框架，而jinkens一般都是在无界面服务器上，所有需要在服务器上安装一个无界面浏览器plantomJS。 plantomjs 主要用于 页面自动化 ， 网络监测 ， 无界面测试 等。下载地址： http://phantomjs.org/download.html ，Linux版本需要选择对应 版本下载解压即可。可以查看《PlantomJS快速入门教程》

karma:

　　jinkens要收集测试结果，需要测试工具生成固定格式的xml文件。在karma中要将测试文件以符合jinkens格式形式输出需要引用karma-junit-reporter。由于karma是需要浏览器的，所有还需要karma-phantomjs-launcher。jinkens测试还需要覆盖率这个东西，所以还要karma-coverage这个东西。karma-config.js配置文件如下：

 1     autoWatch : false,

    singleRun:true,
    frameworks: ['jasmine'],
    browsers:['PhantomJS'],

    plugins : [
            'karma-phantomjs-launcher',
            'karma-jasmine',
            'karma-junit-reporter',
            'karma-coverage'
            ],
    reporters:['dots','junit','coverage'],
    preprocessors:{
      'app/js/*.js':['coverage']
    },
    junitReporter : {
      outputFile: 'test/unit/karma.xml',
      suite: ''
    },
    coverageReporter:{
      type:"cobertura",
      dir:'test/unit/'
    }

注意,由于在服务器上只需要运行一次，所以需要配置singleRun=true。那么问题来了，我想测试本地的其他浏览器呢？难道还有手动在每天提交的时候更改一次，这样也太麻烦了。我们可以在写一个配置文件karma.local.conf.js，专门来保存本地的测试配置。然后在package.json的scripts中加入一句

"local-test": "node node_modules/karma/bin/karma start test/karma.local.conf.js",

然后使用命令：npm run local-test即可。

protractor

　　对于protractor集成到jinkens上，protractor官方的意见是反对（against）的。因为e2e测试，在不同的浏览器表现可能会出现不一致，所以就算集成到jinkens上也不能代表真实的环境下测试的结果。而且对于e2e测试的覆盖率也不好定义。protractor要想将测试结果保存为xml文件，需要用到jasmine-reporters。至于protractor的测试覆盖率，git上有一个项目叫做grunt-protractor-coverage。但是由于e2e测试覆盖率的问题，关注的人比较少，所以建议不用。也就是说，对于protractor，建议最多也就只把测试结果集成到jinkens上。我protractor-conf.js配置如下：

　　

exports.config = {
  framework: 'jasmine2',

  allScriptsTimeout: 11000,

  specs: [
    'e2e/*.js'
  ],

  capabilities: {
    'browserName': 'phantomjs'
  },

  chromeOnly: false,

  baseUrl: 'http://localhost:8000/',
  onPrepare:function(){
    var jasmineReporters = require('jasmine-reporters');
    jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
      savePath:"test/e2e/"
    }));
  },
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

　　注意framework: 'jasmine2',要使用jasmine2,protractor版本必须在1.6之后。

　　其实关于protractor有很多麻烦的地方。首先就是要注意我们伟大的墙，没翻就会在运行webdirver-manager start的时候出现运行jar包出错。你可以点击下载解压，选择合适的chromedriver和 selenium-server-standalone-2.25.0.jar保存到/node_modules/protractor/selenium/里面。

　　另外，注意在运行protractor之前要将server启动。一般也就是npm start

下面是我的package.json，还有一些其他的东西，就请不要在意那些重点了。

{
  "version": "0.0.1",
  "private": true,
  "name": "ajs-demo",
  "description": "A demo application for AngularJS",
  "repository": "https://github.com/towersxu/ajs-demo",
  "license": "MIT",
  "devDependencies": {
    "bower": "^1.3.1",
    "grunt": "~0.4.5",
    "grunt-bower-task": "~0.4.0",
    "grunt-contrib-concat": "0.5.1",
    "grunt-contrib-uglify": "0.9.1",
    "grunt-jsdoc": "0.5.8",
    "http-server": "^0.6.1",
    "jasmine-reporters": "^2.0.6",
    "karma": "^0.12.35",
    "karma-chrome-launcher": "^0.1.4",
    "karma-coverage": "0.3.x",
    "karma-firefox-launcher": "^0.1.6",
    "karma-jasmine": "^0.1.5",
    "karma-junit-reporter": "0.2.x",
    "karma-phantomjs-launcher": "0.2.0",
    "shelljs": "^0.2.6",
    "tmp": "0.0.23"
  },
  "scripts": {
    "postinstall": "bower install",
    "prestart": "npm install",
    "start": "http-server -a 0.0.0.0 -p 8000",
    "pretest": "npm install",
    "test": "node node_modules/karma/bin/karma start test/karma.conf.js --reporters junit,dots,coverage",
    "local-test": "node node_modules/karma/bin/karma start test/karma.local.conf.js",
    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run --reporters junit,coverage,dots",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor test/protractor-conf.js",
    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
  }
}