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
Related
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/
I've read ton's of tutorials, but I must admit that this testing stuff is still very confusing to me. I have a Nw.js app which (of course) uses NodeJS and also Angular. I've installed the Jasmine test framework globally via npm and wrote an example test which starts with the following lines, and placed it in the spec sub-directory:
describe ( 'Test for my controller', function () {
beforeEach ( module ('module_under_test') );
... and so on ...
});
When running the test by typing jasmine on the cmd line (from the root folder of the app), I get the following error message:
TypeError: module is not a function
I know that I have to include the Angular library somehow. But where? In a normal browser application, it is included in the HTML <script> tag, but I don't have this possibility. I also know that I could write a HTML file, which shows the Jasmine result page after tests have finished, but I would prefer to start Jasmine on the cmd line.
First I thought about adding the angular library to the "helpers" entry in jasmine.json. But it didn't work. The documentation of this file is unfortunately very poor. In the Angular documentation and tutorials it is always mentioned to use Karma. But my understanding is that Karma is only useful for testing with browsers, since it spawns an own webserver. This does not make sense in my case.
Would be great if somebody could give me a hint, thanks!
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
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.
I'm able to run my Karma test suite from within WebStorm, using a Karma Run Configuration. After the tests run, the failed ones are shown in a tree on the left side. I would expect that I could click/double-click on a test name and be taken to the source code for the test, but that doesn't happen.
I'm pretty sure I've seen this work in a video before. How can I turn it on?
I looked at the documentation here but it wasn't very helpful: http://www.jetbrains.com/webstorm/webhelp/test-runner-tab.html
In Karma tool window click gear icon and check Auto scroll to source.