开发者俱乐部

标题: 构建基于Karma的ES6测试工作流 [打印本页]

作者: xman 时间: 2016-3-16 07:44
标题: 构建基于Karma的ES6测试工作流
我们清楚，代码质量应该由代码测试来保证。在ES6规范发布后，越来越多的项目开始尝试使用ES6甚至是ES7，那么，本文就以ES6的代码来谈谈如何构建高效的测试工作流。

　　本文主要会使用到如下工具：

　　karma 自动化测试工具，命令行执行浏览器测试

　　babel 编译ES6/7代码

　　mocha 测试框架

　　chai 断言库

　　接下来，我们通过一个简单的实例来展示如何构建ES6的测试工作流。

　　安装

　　我们通过npm的方式来安装依赖包，以下为依赖包列表：

"devDependencies": {
"babel-plugin-transform-es2015-modules-umd": "^6.6.5",
"babel-preset-es2015": "^6.6.0",
"chai": "^3.5.0",
"karma": "^0.13.22",
"karma-babel-preprocessor": "^6.0.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.2.2",
"karma-mocha": "^0.2.2",
"karma-mocha-reporter": "^2.0.0",
"mocha": "^2.4.5"
}

　　执行 npm install 将安装所依赖的包。

　　这里简单说明一下这份依赖表中的一些包，karma-mocha-reporter用于使karma日志输出保持mocha原来的风格。

　　babel 6默认情况下并没有转换ES6代码的功能，需要安装相应的转换器插件，所以安装了babel-preset-es2015和babel-plugin-transform-es2015-modules-umd，通过.babelrc文件来设置，具体的配置在下一节给出。

　　配置

　　karma配置karma.conf.js

module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
'src/**/*.js',
'test/**/*.spec.js'
],
exclude: [
'**/*.swp'
],
preprocessors: {
'src/**/*.js': ['babel'],
'test/**/*.spec.js': ['babel']
},
reporters: ['mocha'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
});
}

　　babel配置.babelrc

{
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-umd"]
}

　　测试代码

　　现在karma可以执行ES6测试代码了，那么现在我们来创建一个ES6类。

class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}

calcArea() {
return this.height * this.width;
}
}

export default Polygon;

　　对应的测试代码如下：

import Polygon from '../src/polygon';

describe('ES6 Polygon', function() {
let polygon = new Polygon(5, 4);

it('should return 20 when calling calcArea', function() {
assert.equal(20, polygon.calcArea());
});
});

　　执行 karma start 便可执行测试。如果没有全局安装karma，可以在package.json中添加相应的test指令，执行 npm test 即可。

　　后记

　　以上只是一个简单的ES6测试工作流的例子，在实际工作中，我们还需要集成代码覆盖率来完善测试。

欢迎光临开发者俱乐部 (http://xodn.com/)