生成jasmine测试的istanbul代码覆盖率报告(通过grunt)在phantomjs中的browserify包上运行

Question

标题说明了一切.尽管在网上搜索,我还没有找到解决这个问题的单一例子.

这是一些有些失误

• https://github.com/amitayd/grunt-browserify-jasmine-node-example - grunt,browserify和jasmine
• 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没有运行,所以我觉得它可能是一个别名问题...虽然是一个仅限于phantomjs,因为当我打开chrome中的specrunner时代码正在运行.

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. 生成覆盖率报告

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

browserify-istanbul会让您在 browserify 构建步骤中检测代码，这样我们就可以轻松忽略第三方库。但grunt-template-jasmine-istanbul会再次检测代码。为了避免这种情况，您可以在选项中设置replace为。false

参考文献：

1. 伊斯坦布尔台阶
2. 伊斯坦布尔 Broswerify
3. grunt-contrib-茉莉花
4. grunt-template-jasmine-istanbul --replace选项