angularjs - Karma coverage reports show all files with 100% and require statements -


i generating coverage using karma-coverage, browserify. tests run fine coverage reports generated not showing correct file contents , shows 100% coverage when in reality there tests few.

my karma.conf.js :

    // karma configuration  module.exports = function(config) {     config.set({          // base path used resolve patterns (eg. files, exclude)         basepath: './',           // frameworks use         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter         frameworks: ['browserify', 'mocha', 'chai'],           // list of files / patterns load in browser         files: [             'bower_components/jquery/dist/jquery.js',             'bower_components/angular/angular.js',             'bower_components/angular-animate/angular-animate.js',             'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',             'bower_components/angular-cookies/angular-cookies.js',             'bower_components/angular-dragdrop/src/angular-dragdrop.js',             'bower_components/angular-mocks/angular-mocks.js',             'bower_components/angular-route/angular-route.js',             'bower_components/angular-sanitize/angular-sanitize.js',             'bower_components/angular-ui-router/release/angular-ui-router.js',             'bower_components/angular-xeditable/dist/js/xeditable.js',             'bower_components/d3/d3.js',             'bower_components/d3-tip/index.js',             'bower_components/jquery-ui/jquery-ui.js',             'bower_components/moment/moment.js',             'bower_components/ng-file-upload/ng-file-upload.js',             'bower_components/ngstorage/ngstorage.js',             'bower_components/restangular/dist/restangular.js',             'bower_components/toastr/toastr.js',             'bower_components/underscore/underscore.js',             'app/components/**/*.js'         ],           // list of files exclude         exclude: [],           // preprocess matching files before serving them browser         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor         preprocessors: {             'app/components/**/*.js': ['browserify'],             'app/components/**/!(*.test).js': ['browserify', 'sourcemap', 'coverage']         },          browserify: {             debug: true,             transform: [                 'babelify'             ],             extensions: ['.js']         },          babelpreprocessor: {             options: {                 sourcemap: 'inline',                 blacklist: ['usestrict']             },             sourcefilename: function(file) {                 return file.originalpath;             }         },          // optionally, configure reporter         coveragereporter: {             dir: 'coverage/',             reporters: [{                 type: 'html',                 subdir: 'report-html'             }, {                 type: 'cobertura',                 subdir: '.',                 file: 'cobertura.txt'             }, {                 type: 'text',                 subdir: '.',                 file: 'text.txt'             }, {                 type: 'text-summary',                 subdir: '.',                 file: 'text-summary.txt'             }, ]         },           // test results reporter use         // possible values: 'dots', 'progress'         // available reporters: https://npmjs.org/browse/keyword/karma-reporter         reporters: ['coverage', 'mocha'],          // web server port         port: 9876,          // enable / disable colors in output (reporters , logs)         colors: true,          // level of logging         // possible values: config.log_disable || config.log_error || config.log_warn || config.log_info || config.log_debug         loglevel: config.log_info,          // enable / disable watching file , executing tests whenever file changes         autowatch: true,          // start these browsers         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher         browsers: ['chrome'],          // continuous integration mode         // if true, karma captures browsers, runs tests , exits         singlerun: false     }); }; 

and package.json

{   "name": "touchpoint",   "private": true,   "version": "0.0.0",   "repository": "",   "scripts": {     "postinstall": "bower install",     "prestart": "npm install",     "start": "node server.js",     "mocha": "istanbul cover _mocha -- ./app/components/**/*test.js --compilers js:babel-core/register",     "watch-mocha": "istanbul cover _mocha -- ./app/components/**/*test.js --compilers js:babel-core/register -w",     "karma": "karma start",     "test": "npm run karma --single-run",     "test-suite": "npm run watch-mocha",     "pretest": "npm install",     "pretest-suite": "npm install"   },   "devdependencies": {     "angular": "^1.5.0-rc.2",     "babel": "^6.5.2",     "babel-cli": "6.10.1",     "babel-polyfill": "^6.9.1",     "babel-preset-es2015": "^6.9.0",     "babelify": "^7.3.0",     "body-parser": "^1.15.0",     "bower": "^1.7.9",     "browserify": "^13.0.1",     "browserify-istanbul": "^2.0.0",     "browserify-ngannotate": "^2.0.0",     "bulkify": "^1.4.2",     "chai": "^3.5.0",     "del": "^2.2.0",     "eslint": "^3.4.0",     "eslint-config-airbnb": "^9.0.1",     "eslint-plugin-import": "^1.8.1",     "eslint-plugin-jsx-a11y": "^1.4.2",     "eslint-plugin-react": "^5.1.1",     "event-stream": "^3.3.2",     "express": "^4.13.4",     "gulp": "^3.9.1",     "gulp-angular-filesort": "^1.1.1",     "gulp-babel": "^6.1.2",     "gulp-clean-css": "^2.0.10",     "gulp-concat": "^2.6.0",     "gulp-eslint": "^2.0.0",     "gulp-htmlhint": "^0.3.1",     "gulp-htmllint": "0.0.8",     "gulp-htmlmin": "^1.3.0",     "gulp-inject": "^4.1.0",     "gulp-inject-reload": "0.0.2",     "gulp-install": "^0.6.0",     "gulp-jshint": "^2.0.0",     "gulp-livereload": "^3.8.1",     "gulp-load-plugins": "^1.2.0",     "gulp-minify-css": "^1.2.4",     "gulp-ng-annotate": "^2.0.0",     "gulp-ng-config": "^1.3.1",     "gulp-ng-html2js": "^0.2.2",     "gulp-nodemon": "^2.0.6",     "gulp-notify": "^2.2.0",     "gulp-open": "^2.0.0",     "gulp-order": "^1.1.1",     "gulp-postcss": "^6.1.1",     "gulp-print": "^2.0.1",     "gulp-rename": "^1.2.2",     "gulp-sass": "^2.3.1",     "gulp-sourcemaps": "^1.6.0",     "gulp-stylelint": "^2.0.2",     "gulp-uglify": "^1.5.3",     "istanbul": "^0.2.16",     "istanbul-coveralls": "^1.0.3",     "jquery": "^3.1.0",     "jshint-stylish": "^2.1.0",     "karma": "^0.13.22",     "karma-babel-preprocessor": "^6.0.1",     "karma-browserify": "^5.1.0",     "karma-chai": "^0.1.0",     "karma-chrome-launcher": "^2.0.0",     "karma-coverage": "^0.2.6",     "karma-coverage-es6": "^0.2.7",     "karma-jasmine": "^1.0.2",     "karma-jquery": "^0.1.0",     "karma-junit-reporter": "^0.3.8",     "karma-mocha": "^1.1.1",     "karma-mocha-reporter": "^2.1.0",     "karma-ng-html2js-preprocessor": "^1.0.0",     "karma-requirejs": "^1.0.0",     "karma-sinon-chai": "^1.2.3",     "karma-sourcemap-loader": "^0.3.7",     "main-bower-files": "^2.11.1",     "method-override": "^2.3.5",     "mocha": "^3.0.2",     "postcss-nested": "^1.0.0",     "postcss-reporter": "^1.3.3",     "postcss-scss": "^0.1.8",     "protractor": "^3.1.1",     "q": "^1.4.1",     "requirejs": "^2.2.0",     "shelljs": "^0.6.0",     "sinon": "^1.17.5",     "stylelint": "^6.7.1",     "stylelint-scss": "^1.2.0",     "vinyl-source-stream": "^1.1.0",     "watchify": "^3.7.0"   } } 

i use npm run karma run tests.

i using angular1.5 , source files in es6 standard component style. using import/export format.

what in coverage source files in green (100% coverage) , each file in report of form:

typeof require === "function" && require("**************************.js");

i able solve similar problem using browserify-istanbul instrument code browserify transform function, rather using karma-coverage preprocessor.

  1. add browserify-istanbul dev dependency: npm install browserify-istanbul --save-dev
  2. add browserify-istanbul browserify transform section of karma.conf.js:

    transform: [     'babelify',     ['browserify-istanbul',      {          instrumenterconfig: {              embedsource: true   // important html reports          }      }     ] ] 
  3. remove coverage source preprocessors, it's just:

    preprocessors: {     'app/components/**/*.js': ['browserify'],     'app/components/**/!(*.test).js': ['browserify', 'sourcemap']  // no more 'coverage' here } 

now, when karma runs browserify preprocessor, code instrumented istanbul (because of transform function), , coverage report should correct.


Comments