8

We are using istanbul for code coverage in our karma tests. This works great for tracking code coverage of our unit tests in JavaScript. However, this does not track code coverage in our HTML templates.

We have very little logic in our templates, but there is still complexity that we want to track and ensure we have properly covered in our tests. What are the best practices to ensure that you have proper coverage over all of your HTML templates. In our particular case, we use ng-if and ng-switch. We'd like to ensure that all branches are properly covered.

Izhaki
  • 23,372
  • 9
  • 69
  • 107
Andrew Eisenberg
  • 28,387
  • 9
  • 92
  • 148

2 Answers2

2

While you can get coverage reports from Istanbul via third-party plugins (https://www.npmjs.com/package/protractor-istanbul-plugin), the issue is, that unlike React or other libraries that convert templates (JSX) into javascript DOM manipulations, Angular does not expose the generated DOM in a way that is feasible for the instrumentation necessary to generate coverage reports.

Charles Fulnecky
  • 61
  • 4
0

Unfortunately, istanbul and karma are developed to test JavaScript, not HTML templates. Since your ng-if and ng-switch statements will likely effect what is/is not displayed on the page, you may want to consider using Angular's end-to-end suite, Protractor. To my knowledge, there is no coverage tool for the end-to-end testing.

Adam
  • 2,027
  • 1
  • 16
  • 27
  • Thanks, we are using protractor for certain kinds of tests. They are oriented towards integration testing of front-end + back-end. These tests are being used for testing user scenarios and are not unit tests. Code coverage is not relevant for these tests (scenario coverage is). We have unit tests that test interaction with the DOM (where the back end is stubbed out). And we keep track of our JS code coverage, but we have no way of keeping track of our template coverage. – Andrew Eisenberg Dec 23 '14 at 17:50
  • I understand that issue. I don't know any solutions currently. It'd be an interesting open-source fork of istanbul to test html. – Adam Dec 24 '14 at 00:25
  • Yes, it would have to delve deeply into angular's template system since it would need to run coverage over the compiled template and then somehow map the coverage back to the original file. Not easy. – Andrew Eisenberg Dec 24 '14 at 16:50