Code coverage for AngularJS html templates

Question

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.

Answer 1

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.