You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
describe('Test', function() {
it('should return 20 when the value is 10', function() {
expect(getNum(10)).to.equal(20)
})
it('should return 1 when the value is 0', function() {
expect(getNum(0)).to.equal(0)
})
})
为保证代码的质量,单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。
TDD与BDD的区别
TDD属于测试驱动开发,BDD属于行为驱动开发。个人理解其实就是TDD先写测试模块,再写主功能代码,然后能让测试模块通过测试,而BDD是先写主功能模块,z再写测试模块。详见示例
服务端代码测试
所谓服务端代码,指的就是一个node的模块,能在node的环境中运行。以一个项目为例,代码结构如下:
前端测试框架主要是Mocha与Jasmine,这里我们选择Mocha,断言库有should、expect、chai以及node自带的assert。这里我们选择chai,chai中包含了expect、should及assert的书写风格。
describe用于给测试用例分组,it代表一个测试用例。
需要在全局下安装Mocha
项目目录下执行
测试通过
完成代码测试之后我们再去看看代码测试的覆盖率。测试代码覆盖率我们选择使用istanbul,全局安装
使用istanbul启动Mocha
测试通过,覆盖率100%
行覆盖率(line coverage):是否每一行都执行了?
函数覆盖率(function coverage):是否每个函数都调用了?
分支覆盖率(branch coverage):是否每个if代码块都执行了?
语句覆盖率(statement coverage):是否每个语句都执行了?
修改index.js再看代码覆盖率
发现代码覆盖率发生了变化
修改test.js添加测试用例
代码覆盖率又回到了100%
客户端代码
客户端代码即运行在浏览器中的代码,代码中包含了window、document等对象,需要在浏览器环境下才能起作用。还是以一个项目为例,代码结构如下:
我们依然使用Mocha测试库及chai断言库。
直接用浏览器打开test.html文件便能看到测试结果
当然我们可以选择PhantomJS模拟浏览器去做测试,这里我们使用mocha-phantomjs对test.html做测试。
全局安装mocha-phantomjs
修改package.json
项目目录下执行
mocha-phantomjs在mac下执行会报
phantomjs terminated with signal SIGSEGV
,暂时没有找到什么解决方案。所以我在ubuntu下执行,结果显示如图上述方式虽然能完成代码的单元测试,但是要完成代码覆盖率的计算也没有什么好的方式,所以我选择引入测试管理工具karma
karma使用指南
略去一大堆介绍karma的废话,项目下引入karma
初始化配置karma配置文件
使用karma默认配置看看每一项的作用
此时的项目结构如下所示
首先我们将测试框架jasmine改为我们熟悉的mocha及chai,添加files及plugins
全局安装karma-cli
修改package.json
执行npm run test便可以启用chrome去加载页面。
karma测试代码覆盖率
测试代码覆盖率,我们还是选择使用PhantomJS模拟浏览器,将
singleRun
设为true
,即执行完测试用例就退出测试服务。将
browsers
中的Chrome
改为PhantomJS
,plugins
中的karma-chrome-launcher
改为karma-phantomjs-launcher
执行npm run test ,测试通过且自动退出如图所示
引入karma代码覆盖率模块karma-coverage,改模块依赖于istanbul
修改karma.conf.js
对index.js文件使用coverage进行预处理,加入karma-coverage插件,覆盖率测试输出coverageReporter配置,详见这里这里为了方便截图显示将其设为
text-summary
执行npm run test,显示结果如下图所示
ES6代码覆盖率计算
目前的浏览器并不能兼容所有ES6代码,所以ES6代码都需要经过babel编译后才可在浏览器环境中运行,但编译后的代码webpack会加入许多其他的模块,对编译后的代码做测试覆盖率就没什么意义了。
我们使用ES6中的箭头函数
test.js文件通过require引入index.js文件,所以files只需引入test.js文件,再对test.js做webpack预处理。
需要相关的babel,webpack,karma依赖如下:
执行npm run dev显示如图所示
travisCI及coveralls
travisCI的配置这里不做详解,我们将通过代码测试覆盖率上传到coveralls获取一个covarage的icon。
如果你是服务端代码使用istanbul计算代码覆盖率的
如果你是服务端代码使用karma计算代码覆盖率的,则需使用coveralls模块
plugins添加karma-coveralls,reporters添加coveralls,coverageReporter输出配置改为lcov。
可以参考我自己实现的一个show-toast库
参考
tmallfe/tmallfe.github.io#37
https://codeutopia.net/blog/2015/03/01/unit-testing-tdd-and-bdd/
https://github.com/jdavis/tdd-vs-bdd
https://jasmine.github.io/
https://github.com/bbraithwaite/karma-seed
https://mochajs.org/
https://toutiao.io/posts/564973/app_preview
https://coveralls.io/
https://karma-runner.github.io/0.13/index.html
https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md
https://shouldjs.github.io/
https://juejin.im/post/59807358518825563e037e3c
http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/
http://docs.casperjs.org/en/latest/quickstart.html
https://github.com/gotwarlost/istanbul
https://www.jianshu.com/p/ffd6d319f05b
http://www.bijishequ.com/detail/436708
http://phantomjs.org/
https://github.com/CurtisHumphrey/es6-library-boilerplate
http://www.jackpu.com/shi-yong-babel-jspm-karma-jasmine-istanbul-shi-xian-es6-ce-shi-fu-gai-lu/
https://github.com/JackPu/JavaScript-Algorithm-Learning
https://github.com/caitp/karma-coveralls
https://github.com/karma-runner/karma-coverage
The text was updated successfully, but these errors were encountered: