注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

前端单元测试工具-karma  

来自m18514657855   2016-12-30 16:22:15|  分类: 单元测试 |举报 |字号 订阅

  下载LOFTER 我的照片书  |

前言

前端开发过程中,往往容易忽略测试的重要性。最近发现了一个非常好用的前端自动化测试和代码覆盖率统计的框架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的内容:
[javascript] view plain copy
  1. function isNum(num) {  
  2.   if (typeof num === 'number') {  
  3.     return true  
  4.   } else {  
  5.     return false  
  6.   }  
  7. }  
我们使用jasmine测试框架,具体api参考jasmine api,test.js中的内容:
[javascript] view plain copy
  1. describe('index.js: 'function() {  
  2.   it('isNum() should work fine.'function() {  
  3.     expect(isNum(1)).toBe(true)  
  4.     expect(isNum('1')).toBe(false)  
  5.   })  
  6. })  

在项目根目录下运行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目录,里面有本次测试的覆盖报告,如下:


  评论这张
 
阅读(1227)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017