We want to measure Angular 8 application code coverage. We have a e2e test cases written in selenium java which loads the angular application which is deployed on another machine in browser and runs some set of e2e test casess. The question is how I can measure the Angular application javascript code coverage.
At the high level i can think of some mechanism using istanbul to instrument my angular javascript code. Istanbul will record the code coverage while selenium java code executing the e2e test cases by loading the application in browser.
Looking for details steps how i can do the same.
After long effort I am able to crack this down. Here are the steps I followed to get the code coverage report.
Run the angular command line interface prod build. This will create the dist folder. For example //dis/
Instrument the JS files present in the dist folder using the current Istanbul nyc command we are doing the in place instrumentation hence the option --in-place is provided..
nyc instrument dist/myapp dist/myapp --exclude-after-remap=false --complete-copy --in-place
Run the local http server from the folder dist. open the web application browse the it manually.
The above instrumented code will add window.__coverage__ variable. When you browse the above application, coverage information is added in the window.__coverage__.
store the coverage information stored in window.__coverage__ into a json file with name coverage.json. It could be any name.
Store that json file inside your angular codebase. under the folder .nyc_output. You need to create this hidden folder with .nyc_output.
Run the coverage report command.
nyc report --reporter=lcov --report-dir=coverage-output
The above command will genrate the html report.