Angular 1.x Browserify Jasmine how to set up code coverage test? - angularjs

I am using Angular (1.x) with Browserify, and Jasmine as test framework. I would like to run code coverage test. I researched online and it's a little here and there and some of the examples doesn't work. I was wondering if any people have the experience setting the code coverage test for angular+browserify+jasmine ? and if there's a repo in github i can reference?

Use karma-coverage. Check out my karma playground here: https://github.com/marcinmierzejewski1024/jasmine-karma-playground. It's propably based on istanbul(generated reports looks very similar) but I am not 100% sure

Related

How to write unit tests for angularjs project using cypress

I am new to cypress and I want to write unit tests for my existing application. Can anyone suggest how to write unit tests for angular js using cypress and code coverage?
I have followed the documentation but I am not getting combined results. The code coverage index file is showing only spec files.
https://i.postimg.cc/FH0fnRrM/Screen-Shot-2020-11-09-at-10-53-56-AM.png
https://i.postimg.cc/wjkNjvCh/Screen-Shot-2020-11-09-at-10-54-45-AM.png
You can use these plugins:
For angular
https://github.com/bahmutov/cypress-angular-unit-test
https://github.com/bahmutov/cypress-angularjs-unit-test
For code coverage
https://github.com/cypress-io/code-coverage
I also recommend that you read this article:
https://www.cypress.io/blog/2018/03/20/angular-cypress-love/

Can I execute unit test EcmaScript 6(2015) code on Headless Browser like Phantom Js ? If no, Can you mention any other way to achieve this?

I am unit testing angular application.
I couldn't able to execute unit tests of code which are written using ES6 on Chutzpah.
What could be the possible solution?
I need a stable way to achieve this.
I am answering my own question as Vaviloff didn't posted any answer but He told me in the comment section.
So,
Babel is the answer to this question.
Here is the link to babel
Babel is a Javascript compiler which transpiles the ES6 code to ES5.
Babel will change your ES6 syntax to ES5 and then you can unit test the output using Phantom js or Chutspah.

AngularJS unit test directly in browser with Jasmine but without Karma or nodejs or any test runners

We can test normal JavaScript code in the browser using only Jasmine (by only I mean without Karma or any other test runners or nodejs).
Can we do this for AngularJS projects as well? If yes, how?
Sure. It's exactly the same like with plain js. You just need to use the methods for angular testing.
Take a look at this post:
http://dennis-nerush.blogspot.co.il/2015/08/creating-masked-input-directive-with.html

Meteor AngularJS templates (unit testing)

How to test angular directives with Meteor? In a normal app, I have karma.conf.js with html2js preprocessor, but in meteor it's different (packages).
Now i have something like this: https://github.com/Nitrooos/Forum-Steganum/tree/templates, but i got Unexpected GET "client/posts/postsList/postsList.directive.html" error.
I tried with this package https://atmospherejs.com/sanjo/angular-templating, but I can't find any example how to configure it.
I resolved it. Now I'm making unit tests via gulp, server tests are via velocity.
An example you can find in this repo: https://github.com/SuperGrupa/Forum-Steganum
Hope it will help.

Add code coverage to Jasmine testing in browser

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?
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.
If you need coverage and complexity data I highly suggest that you look into Grunt.io and NPM. NPM has packages like karma-coverage that will give you a full coverage report of your application. Grunt is your automated task runner for these reports. But remember that 100% coverage is not always relevant. This is where a tool for code complexity comes in. I use the NPM package grunt-complexity along with karma-coverage to see what is not covered and then to determine how much value full test coverage is in that part of my code.
Eghead has a nice grunt intro video https://egghead.io/lessons/gruntjs-introduction-to-grunt.
Hope this helps a bit,
Jordan

Resources