AngularJS自动化测试之karma+jasmine单元测试

前端之家收集整理的这篇文章主要介绍了AngularJS自动化测试之karma+jasmine单元测试前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

单元测试专门用于测试小型、独立的代码单元,单个函数,或者较小的功能,其主要难点在于划分小的功能块。

本位主要介绍AngularJS的单元测试的环境搭建。

Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。@H_403_12@@H_403_12@ Jasmine (茉莉)是一款 JavaScript BDD(行为驱动开发)测试框架,它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法,让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说,它是一款不错的测试框架选择。@H_403_12@ @H_403_12@
环境搭建
  1. 安装NodeJSJavaScript运行环境)(https://nodejs.org/en/
  2. 安装npmJavaScript包管理工具)(npm is installed with Node.js)
  3. 安装karmaJavaScript测试运行器)(npm install-g karma)
  4. 安装jasmine(测试框架)(npminstall -gjasmine-core
  5. 代码覆盖率统计插件npminstall -gkarma-coverage
@H_403_12@
  • What is npm?

npmmakes it easy for JavaScript developers to share and reuse code,and makes iteasy to update the code that you're sharing,so you can build amazing things.

如何衡量测试脚本的质量呢?其中一个参考指标就是代码覆盖率(coverage)。@H_403_12@
什么是代码覆盖率?简而言之就是测试中运行到的代码占所有代码的比率。
@H_403_12@
项目配置
You can use(npm init)in the root of your package in order to get you started with a pretty basic package.jsonfile.
@H_403_12@
项目文件结构@H_403_12@
@H_403_12@
@H_403_12@
index.js
@H_403_12@
function  isNum(num) { 
	if (typeof num === 'number') {
	 	return true;
 	}
 	else {
	 return false;
 	}
 }
@H_403_12@ test.spec.js
@H_403_12@
describe('index.js: ',function() {
  it('isNum() should work fine.',function() {
    expect(isNum(1)).toBe(true)
    expect(isNum('1')).toBe(false)
  })
})
@H_403_12@
创建测试配置文件@H_403_12@
karma init test/karma.conf.js
@H_403_12@
@H_403_12@
@H_403_12@
karma-coverage配置
修改配置文件karma.conf.js
@H_403_12@
@H_403_12@
@H_403_12@
启动单元测试
karma starttest/karma.conf.js
@H_403_12@
注:karma.conf.jsautowatch设置为true 时每次代码有变化时,自动运行 单元测试。
@H_403_12@

代码覆盖率(test/coverage/index.html)

@H_403_12@
@H_403_12@
@H_403_12@
Reporter that dynamically shows tests results at debug.html page.
@H_403_12@
@H_403_12@
安装:

npminstallkarma-jasmine-html-reporter-g

修改 karma.conf.js相应部分:

reporters:['progress','coverage','kjhtml']

启动测试:
karma starttest/karma.conf.js @H_403_12@

启动测试:karmastart test/karma.conf.js

@H_403_12@
@H_403_12@

猜你在找的Angularjs相关文章