Add code coverage to Jasmine testing in browser

Question

I use code coverage with npm and grunt locally, but I want to demonstrate this in browser.

If I open a codepen how can I have code coverage generated in browser?
Please show an example of this.

Here I'm testing a controller and Jasmine tests the code but I would like to know if it's 100% covered and show that in browser. http://codepen.io/clouddueling/pen/Jwaru?editors=001

Could I submit my code to a server? Have it tested instantly elsewhere like on heroku and get the results? Can Instanbul run in the client somehow and output an html report or json string?

Answer 1

You can use Blanket.js, which support jasmine test runner, to run a code coverage in the browser itself.

Here is a PLUNKER demonstrating your sample app and specs. Few key points to note here are:

<!-- Use of data-cover provided by blanket to test coverage of concerned file -->
<script type="text/javascript" src="app.js" data-cover></script>

Blanket js needs an adapter for jasmine. jasmine-blanket.js is the adapter shown in the plunker.

I preferred plunker over codepen. Hope that helps. Isn't this slick?

update 9-11-2017 blanket.js project is not actively maintained, you can see on their github repository.