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就可以看到测试结果。