23

I have a question regarding Istanbul Reporter used for reporting my unit testing coverage in my angular 6 application.

My problem is: when the coverage is rendered, I see the mocks in the tested files list and obviously the mocks aren't tested, which gives me wrong coverage stats.

This is my karma.conf file setup by a colleague and I'd like to know if you have any idea on how to exclude those mock files.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'local'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

I saw on StackOverflow that it might be done by adding an exclude in the tsconfig.spec.json but even by re-running the code coverage, it still includes them.

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
    ],
    "typeRoots": [ "../node_modules/@types" ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ],
  "exclude": [
    "/**/*mock*.ts"
  ]
}

My mock files are inside tests/mocks folder in every module/feature and are called "mock-whatevertheymock.ts"

The command to run it is

test:wc-dogs": "ng test --project=wc-dogs--code-coverage

Thank you for the help

Dinosan0908
  • 1,082
  • 2
  • 8
  • 19

2 Answers2

42

Thank you everyone, solution was to add the codeCoverageExclude option in angular.json

   "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "projects/wc-claims/src/test.ts",
                "polyfills": "projects/wc-claims/src/polyfills.ts",
                "tsConfig": "projects/wc-claims/tsconfig.spec.json",
                "karmaConfig": "projects/wc-claims/karma.conf.js",
                "styles": [
                  "projects/wc-claims/src/styles.css"
                ],
                "scripts": [],
                "assets": [
                  "projects/wc-claims/src/favicon.ico",
                  "projects/wc-claims/src/assets"
                ],
                "codeCoverageExclude": [
                    "/**/*mock*.ts"
                ]
              }
            },
Dinosan0908
  • 1,082
  • 2
  • 8
  • 19
  • I search high and low for this. – Matt Feb 28 '19 at 15:27
  • it somehow didn't work for some files when I add a directory under codeCoverageExclude which was also the same directory I provided in it – aj go Oct 28 '20 at 01:03
  • 2
    just make sure to alway use the wildcard `**` and `*`. For folders excluding with `src/testing` does not work, you must use `src/testing/**` For files `*.mock.ts` does not work, you must use `**/*.mock.ts` – Seega Jan 18 '22 at 15:19
0

You should add exclude to karma config.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'local'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    exclude: ["/**/*mock*.ts"],
    singleRun: false
  });
};
Shubham Gupta
  • 2,596
  • 1
  • 8
  • 19
  • 1
    Didn't work unfortunately :/ they still appear in the coverage results – Dinosan0908 Sep 27 '18 at 13:58
  • ts files are in your mock folder right ? it is mock/test.ts ?? – Shubham Gupta Sep 27 '18 at 14:02
  • For example let's say Dogs folder `` - Dog -- dog.service.ts -- dog.component.ts -- dog.component.html -- __tests__ --- dog.component.spec.ts --- mocks ---- mock-dog.service.ts `` – Dinosan0908 Sep 27 '18 at 14:04
  • @Dinosan0908 in that case this regex is incorrect ["/**/*mock*.ts"] it should be ["/**/mock/*.ts"]. Try updating it because I am already excluding files from test coverage. – Shubham Gupta Sep 27 '18 at 14:06
  • Ok I found something on another answer, I'll post it as answer of my question, thanks for help sir ! – Dinosan0908 Sep 27 '18 at 14:07
  • I tested the glob with my file structure and the one I provided work, it was just in the wrong spot :) – Dinosan0908 Sep 27 '18 at 14:08