karma+jasmine前端单元测试
Q:为何要单元测试？
A：为了提升代码的质量、减少bug、快速定位bug、减少调试时间。
本文主要采用karma+jasmine来进行简单的单元测试。
0.生成一个项目package.json:
$ npm init -y
1.安装必须依赖：
$ npm install karma --save
$ npm install karma-jasmine --save
$ npm install karma-chrome-launcher --save
$ npm install jasmine-core --save
$ sudo npm install karma-cli -g
$ npm install karma-coverage --save-dev
2.创建文件
在项目中创建一个js文件夹，在其中创建以下内容的js文件
// index.js
function test1(){
return 'abc';
}
function test2(){
return '333';
}
// jasmineTest.js
describe('TestFunction',function(){
it('测试test',function(){
expect('abc').toEqual(test1());
});
it('测试test2',function(){
expect('123').toEqual(test2());
});
});
3.生成karma.conf.js
在项目根目录中使用karma init 生成一个测试配置文件：内容如下
// Karma configuration
// Generated on Mon Nov 07 2016 19:54:49 GMT+0800 (CST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'js',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: ['*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {'js/*.js':'coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress','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: ['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
})
}
4.开始测试：
$ karma start
5.测试结果：
在浏览器的console中可以看到结果，也可以在命令行中看到SUCCESS。
6.单元测试覆盖率：
当我们在控制台键入karma start的时候会生成一个coverage文件夹，点击index.html文件，在浏览器中打开，可以查看到测试报表。
