Today, an update made to the ionic-unit-testing-example project that will be helpful for Ionic developers: code coverage. I thought that a discussion about this feature, and details as to how to add code coverage to your current Ionic projects would be helpful.

Wait. You aren’t using automated testing with your Ionic applications? Wow, you are living dangerously. Well, if you are interested in getting unit testing and end-to-end testing working in your Ionic projects, you should check out this post instead.

What is Code Coverage?

Wikipedia says “code coverage is a measure used to describe the degree to which the source code of a program is executed when a particular test suite runs.” Essentially, when you run the script for code coverage in your Ionic project, the unit tests in your project are run, and analysis of the code being run is generated into a Web site in which you can drill down into and see where more testing work may be needed.

Sample of the first page of the code coverage documentation.

What Does This Mean for Developers?

So, here’s the worst case scenario: Your immediate manager drops by your cube and tells you that his high-level manager’s manager’s manager has decided that all company code needs to have unit tests. You have some testing in your project, but you have no idea if you have covered everything that needs to be tested. How do you prove you have any testing in your project at all?

That is where code coverage documentation comes in. You run the command to create the code coverage documentation and you have the proof.

On a more practical level, using code coverage documentation is a great way to receive feedback on how well your testing practice is going, give your project managers an idea of how much work may be required for future testing efforts, and allow the whole team to have confidence in the project’s future performance.

Simply put, having code coverage documentation available for your project should be used for more than covering your @$$. Leverage the information for greatest effect for you, your testing practice, and your projects.

How to Add Code Coverage?

The latest code is available on Github. The changes can be applied to your project by following these steps:

Advanced Instructions: If you are comfortable adding this feature manually, take a look at this commit to see what actually changed. Once the changes have been made, run the npm run test-coverage command.

Step 1: Install the following modules into your project:

npm install --save-dev karma-coverage-istanbul-reporter istanbul-instrumenter-loader

Step 2: Add a new script to your package.json file:

"test-coverage": "karma start ./test-config/karma.conf.js --coverage",

Warning: Step 3 requires files to be replaced. If you have already altered these files, please look at the commits for this project and review the changes. Do not delete or replace files in your project without making backups.

Step 3: Replace your test-config/karma.conf.js and test-config/webpack-test.js files in your project with those from this project.

Step 4: Run the npm run test-coverage command. Your unit tests will be run and the documentation will be generated in a folder named coverage in the root of your project. Just open the index.html file in the folder in a browser and see how well your project is covered.

Summary

Testing by itself isn’t the end-all thing your projects need to be successful. It is one of many piece to that puzzle. Having code coverage documentation is helpful for quantifying the level of testing you are performing, and can assisting you in focusing improvement efforts. Add code coverage to your testing practice.