Wrong coverage report in karma

Question

I've configured my karma.conf.js with enabled preprocessing to get a report about the code coverage of my tests. I've added this line to the preprocessors section.

preprocessors: {
  'public/js/app.js': ['coverage'],
  'public/js/filters.js': ['coverage'],
  'public/js/directives.js': ['coverage'],
  'public/js/services/*.js': ['coverage'],
  'public/js/controllers/*.js': ['coverage'],
},

What I'm get is a report that is totally wrong. I know that I've written tests for each modules and the function within. But the coverage report shows me only the tests for the services correctly.

For instance the tests for directives. I know that I've written some tests and the tests will also be executed. But the report shows me that I've just tests for 36% of my code lines.

What could be the reason for this strange behavior?

Update:

I see this output from the spec reporter:

Directives:
      bsTooltip:
          when the element was created:
                PASSED  - should call the popup function
      bsSwitchtext:
          when the model isBusy changes to true:
                PASSED  - should call the button method with loading
          when the model isBusy changes to false changes:
                PASSED  - should call the button method with loading

So I think that my test will all be executed.

Answer 1

Looks like there's issue with Typescript & Jasmine which is used by Angular. Enabling source map for test build appears to fix this issue.

I enabled source map in Angular 6.1 as follows,

Go to angular.json and in main project, find test, and add sourceMap:true to enable source map for the test run.

to enable that in CLI, run with command --source-map or --sm=true

Github issue links

1. Code coverage report issue with branch coverage (if path not taken)
2. ng test --code-coverage in 6.1 improperly detecting branches

---

I'm obligated to write this answer as I had the same issue, and this was the first question on Google search.