首页 > 代码库 > MV*浏览器单元测试+代码覆盖率
MV*浏览器单元测试+代码覆盖率
好久没写BLOG了,最近弄了一个前端单元测试加代码覆盖率测试框架,使用起来非常简单,具体使用方法和介绍如下,先上图,结果如下:
github地址:https://github.com/wf123537200/FeTestAndCov
frontEnd-test-and-cov
这是一个便捷,快速的,浏览器友好的单元测试框架。
提供功能为:
1、提供实时前端单元测试结果。
2、提供单元测试覆盖率实时显示。
为什么有这个框架?
因为作为前端一直想实现tdd开发,之前受到几种限制:
1、使用jq的年代,dom操作实在无法按照逻辑做单元测试,因为dom的结构变化太多了。
2、当使用mv*框架却又没有前端直观的前端测试时,很难做到tdd。
3、前端代码没有测试,往往无法重构和保证质量
框架基于什么技术?
1、mocha,这里使用mocha的浏览器支持
2、coverjs,使用coverjs进行代码插针,用于覆盖率统计
3、reporter,使用一位外国仁兄自己写的一个覆盖率报告插件,修复了相关BUG。
框架如何使用?
简化版本:
1、拷贝all.js和all.css到能引用的目录下,然后参照test/runner.html和test/spec.js写测试代码即可,刷新runner.html即可看到效果。
2、覆盖率统计,需要使用converjs或者使用grunt版本
grunt版本,自动插针覆盖率
1、当然是从github下载代码
2、然后将以下代码加入你的Package.json(如果你不知道这是啥,我只能说你不是做前端的。。)
具体代码如下,其实主要就是安装grunt和两个插件,如果你的代码里面已经有了,那么恭喜你,可以不加上了:
"grunt": "~0.4.0", "grunt-coverjs": "*", "grunt-contrib-watch": "~0.5.3", "load-grunt-tasks": "~0.3.0",
3、执行npm代码 npm install
4、然后创建GruntFile.js(如不明白可参考,www.gruntjs.net),如已存在,可以跳过
5、向GruntFile.js里面加入如下代码(目录结构可以根据当前目录结构进行改变):
// prefix 预处理部分,由于grunt-cover有错误,所以需要使用自带文件对其进行copy // 也可以直接将工程vendor/js/grunt-coverjs/coverjs文件拷贝到node_modules/grunt-coverjs/tasks下,覆盖同名文件 copy: { main: { files: [ {expand: true, flatten: true, src: ['vendor/js/grunt-coverjs/*'], dest: 'node_modules/grunt-coverjs/tasks', filter: 'isFile'} ] } }, // 自动做插针合并以及监控代码 cover: { compile: { files: [{ // 测试代码存放地址 'test/dist/test.js': // 原工程代码存放地址 ['src/*.js'] }] } }, watch: { js: { files: [ // 需要监控变化的代码 "src/*.js" ], tasks: ['cover'] } } // 由于grunt-coverjs有bug,需要做修复,这里需要做个修复 grunt.registerTask('preFix', ['copy']); // 注册grunt任务,也可以修改default名称 grunt.registerTask('default', ['cover', 'watch']);
6、如果一切都OK,在当前工程根目录下执行grunt pre(仅第一次需要执行), grunt,你就可以开始编写测试代码了。
7、测试代码样例如工程目录test/runner.html(只需要引入all.js和all.css即可),和test/spec.js,nb的你肯定一看就明白了。
8、获得结果,只要直接打开runner.html就可以看到测试结果。
MV*浏览器单元测试+代码覆盖率