前言
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目录,里面有本次测试的覆盖报告,如下: