Code coverage for Protractor tests in Angular 5 Application

2
votes

I have an angular-cli application with a protractor. I want to generate a code-coverage report for the protractor.

https://www.npmjs.com/package/grunt-protractor-coverage can't use this inside my project.

https://www.npmjs.com/package/protractor-istanbul-plugin observed that it doesn't work with the typescript file.

Is there any way to generate a code coverage for protractor e2e test cases with Angular 5 Application?

1
angularprotractorangular-cli
Why? Protractor tests are exercising the UI. They have no idea about the underlying code and what path it is taking. Protractor tests should mimic how a user interacts with your app. This means black box testing. The tests don't need to know anything about the internals of your app. Use Unit and Integration tests for coverage info if you need it. - tehbeardedone

1 Answers

1
votes

I was seeking answer for the same scenario for a while but there is no straight solution to instrument bundles generated through angular cli build job(ng build).

There are two ways to achieve this -

  1. We can use webpack config of istanbul-instrumenter-loader using customWebpackConfig- suitable if you are using Angular 8.
  2. We can generate webpack by (by ng eject) then we can achieve this with help of webpack plugin - istanbul-instrumenter-loader. - suitable if you are using Angular 5. In Angular CLI 6 ng eject-command has been removed, and it is not coming back.

Steps:-

  1. Instrument user bundle using customWebpackConfig or webapck & istanbul-instrumenter-loader
    1. ref- http://opensourceforgeeks.blogspot.com/2018/12/how-to-customize-build-configuration.html
    2. ref- https://webpack.js.org/loaders/istanbul-instrumenter-loader/#with-babel
  2. Run your e2e/IT test suit on the instrumented bundle
  3. Collect your istanbul coverage(window.__ coverage__) json from browser context & save it as coverage.json file.
  4. Genarate viewable report using istanbul comments istanbul report(istanbul should be installed globally),It will generate coverage/lcov-report folder with html files to view the code coverage report for each files.