前端单元测试工具-karma

发表于:2017-3-01 10:43

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:m18514657855    来源:51Testing软件测试网采编

  前言
  前端开发过程中,往往容易忽略测试的重要性。最近发现了一个非常好用的前端自动化测试和代码覆盖率统计的框架Karma,给大家分享一下。
  Karma简介
  Karma是由Google团队开发的前端测试框架,主要的功能:
  1、启动一个web服务器,生成包含js源代码和js测试脚本的页面;
  2、运行浏览器加载页面,并显示测试结果;
  3、如果开启检测,当文件有修改时,立即执行以上过程。
  Karma的安装
  安装Karma之前要安装Node.js:
  1、在windows和Ubuntu和Centos上安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html
  2、mac上安装Node.js:
  brew install node
  安装Karma环境:
  1、全局安装karma-cli:
  npm i -g karma-clin
  2、在待测项目中安装karma包:
  npm i --save-dev karma
  3、因为使用的测试框架是jasmine,还需要在待测项目中安装jasmine:
  npm install jasmine-core --save-dev
  Karma初始化:运行karma init进行测试环境初始化,并按照提示一步步完成:
?  karma karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> src/*.js
> test/*.js
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
Config file generated at "/Users/janehai/Documents/karma/karma.conf.js".
  配置完后,在项目中生成一个karma.conf.js文件,环境搭建完毕。
  项目结构
  de  >karma-example
  ├── src
  ├── index.js
  ├── test
  de>├── test.js
  示例
  index.js的内容:
function isNum(num) {
if (typeof num === 'number') {
return true
} else {
return false
}
}
  我们使用jasmine测试框架,具体api参考jasmine api,test.js中的内容:
describe('index.js: ', function() {
it('isNum() should work fine.', function() {
expect(isNum(1)).toBe(true)
expect(isNum('1')).toBe(false)
})
})
  在项目根目录下运行karma start命令,可以看到下面的运行结果:
?  karma karma start
29 12 2016 11:38:15.620:WARN [karma]: No captured browser, open http://localhost:9876/
29 12 2016 11:38:15.634:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
29 12 2016 11:38:15.635:INFO [launcher]: Launching browser Chrome with unlimited concurrency
29 12 2016 11:38:15.651:INFO [launcher]: Starting browser Chrome
29 12 2016 11:38:16.648:INFO [Chrome 55.0.2883 (Mac OS X 10.12.1)]:Connected on socket /#Kc8j_hOrgXwvl7afAAAA with id 26739205
Chrome 55.0.2883 (Mac OS X 10.12.1): Executed 1 of 1 SUCCESS (0.005 secs / 0.001 secs)
  运行结果为SUCCESS。
  因为之前设置了监控文件的修改,所以每次修改源文件或者测试脚本,Karma都会自动再次运行。
  覆盖率
  安装karma覆盖率工具:
  npm i --save-dev karma-coverage
  修改karma.conf.js配置文件:
de  >module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'src/*.js',
'test/*.js'
],
exclude: [],
// modified
preprocessors: {
'src/*.js': ['coverage']
},
//modified
reporters: ['progress', 'coverage'],
// add
coverageReporter: {
type : 'html',
dir : 'coverage/'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,de>
de  >    autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}de>
  再运行karma start,在目录下生成coverage目录,里面有本次测试的覆盖报告,如下:
精选软件测试好文,快来阅读吧~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号