生成伊斯坦布尔代码覆盖率报告为茉莉花测试运行（通过咕噜）phantomjs浏览软件包

Question

标题说这一切真的。尽管通过互联网搜索，我还没有找到解决这个问题的单一例子。

这里有一些有惊无险

• https://github.com/amitayd/grunt-browserify-jasmine-node-example - 咕噜browserify和茉莉
• https://github.com/gotwarlost/istanbul/issues/59#issuecomment-18799734 - browserify和伊斯坦布尔

这是我正在进行的代码https://github.com/wheresrhys/on-guard/tree/browserify（注意它的“browserify '分支 - Gruntfile.js有点乱，但很快就会整理出来）。我最初的调查使用console.log表明不知何故bundle.src.js被加载到页面中，但是当测试运行（并通过！）bundle.src.js中的代码没有运行，所以我有一种感觉可能是别名问题...尽管当我使用chrome打开specrunner时，它仅限于phantomjs，但代码正在运行。

Answer 1

作为解决方案，我使用的是grunt-browserify + browserify-istanbul + grunt-contrib-jasmine + grunt-template-jasmine-istanbul。当使用browserify构建源文件时，此解决方案也排除了第三方库。

第一显示代码，以后我会解释，

grunt.initConfig({ 
browserify: { 
    // build specs using browserify 
    specs: { 
    src: ["spec/**/*Spec.js"], 
    dest: "spec/build/specs.js", 
    options: { 
     debug: true 
    } 
    }, 
    // build source files using browserify and browserify-istanbul 
    dev: { 
    options: { 
     debug: true, 
     browserifyOptions: { 
     standalone: 'abc' 
     }, 
     transform: [['browserify-istanbul', { 
     ignore: ['**/node_modules/**'], // ignore third party libs 
     defaultIgnore: true 
     }]] 
    }, 
    src: ['abc.js'], 
    dest: 'dist/abc.js' 
    } 
}, 
connect: { 
    server: { 
    options: { 
     port: 7000 
    } 
    } 
}, 
// test using jasmine, generate coverage report using istanbul 
jasmine: { 
    coverage: { 
    src: ['dist/abc.js'], 
    options: { 
     junit: { 
      path: 'bin/junit' 
     }, 
     host: 'http://localhost:7000/', 
     specs: 'spec/build/specs.js', 
     keepRunner: true, 
     summary: true, 
     template: require('grunt-template-jasmine-istanbul'), 
     templateOptions: { 
     replace: false, // *** this option is very important 
     coverage: 'bin/coverage/coverage.json', 
     report: [ 
      { 
      type: 'html', 
      options: { 
      dir: 'spec/coverage/html' 
      } 
     }] 
     } 
    } 
    }  
} 

    grunt.registerTask('specs', ['browserify:specs', 'browserify:dev', 'connect', 'jasmine']); 

产生伊斯坦布尔覆盖报告的步骤可归纳为三条：

1. 仪器代码
2. 运行测试
3. 生成覆盖率报告

在我们的解决方案中，我们使用在步骤1中，grunt-contrib-jasminebrowerify-istanbul和runt-template-jasmine-istanbul在步骤2和3

browserify-istanbul将让browserify建设步骤中，您的仪器代码，通过这种方式，我们可以很容易忽略的第三方库。但grunt-template-jasmine-istanbul将再次测试代码。为避免这种情况，您可以在选项中将replace设置为false。

参考文献：

1. Istanbul steps
2. broswerify-istanbul
3. grunt-contrib-jasmine
4. grunt-template-jasmine-istanbul - replace选项