How can I navigate to failed Karma tests in WebStorm? - angularjs

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.

Related

Karma Istanbul fix to work with new version of Chrome

In my AngularJs application I'm using Jasmine and Karma for my unit tests.
Recently, after a chrome update (now on 72.0.3626.81) my unit tests starting failing locally (with no change to code). I believe the error is a result of my coverage tool Instanbul.
Sometimes the error appears like this:
An error was thrown in afterAll Uncaught ReferenceError: __cov_iuQO6FdumXRPLjSMopb0JQ is not defined thrown
Other times it will appear within a specific unit test (not sure why).
I searched my application and the only file this __cov_ variable could come from is the return of a function within the Instanbul package, generateTrackerVar() within instrumenter.js.
As no code changes were made I assume that the issue is with the new version of Chrome, perhaps the security settings.
My question what permissions would karama-coverage/istanbul require? OR if anyone suspects the issue isn't security based, then what could be causing this error?
Thanks
EDIT:
I have tried to disable web security in my gulpfile like so:
browsers: [ 'Chrome_without_security' ],
customLaunchers: {
Chrome_without_security: {
base: 'Chrome',
flags: ['--disable-web-security']
}
},
But this didn't solve the issue. Is there a way to set the chrome version in this config?
I managed to solve this by figuring out the hashcode after __cov_ was related to a test file that was throwing an error. I don't know why the error didn't just appear as it normally would, that will be another problem to solve.
For now I managed to figure out the file by logging in instrumenter.js within the instanbul package. Then by removing my coverage tool I figured out the source of the issue. Simply removing the coverage tool would give me a different error but not tell me which file so I needed to do both.

Karma + AngularAMD: troubleshooting error "angularAMD not initialized."

Struggling here, spent hours on this already. Karma test keeps saying:
Error: angularAMD not initialized. Need to call angularAMD.bootstrap(app) first.
Take a look at the build on runnable.com. Hit Run button or type gulp in the terminal to run the karma test. Should see the error as shown above.
Anyone want to take a stab at figuring out where I went wrong? I'm already calling angularAMD.bootstrap(app) in test/app.js so I don't know why karma can't see it.
Solution available via: https://github.com/marcoslin/angularAMD/issues/103
Updated runnable.com app with working examples.

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

Sinon.stub works in karma, mocha with chrome running but not headless

I am working on an angularjs project where if a user scrolls on an element, the element calls scrollTop() to determine if another method should be called.
I wrote this sinon.stub
scrollTopStub = sinon.stub($.fn, "scrollTop").returns(50);
This is the validation
expect($.fn.scrollTop.calledOnce).to.be.true;
The tests pass when I run them using karma, mocha and chrome.
However, when I run the tests headless the sinon stub is never called.
Any thoughts?
I know this is an old question. But if someone bumps into this: this is probably a completely different issue. I run into a similiar one once almost been driven crazy by cryptic and misleading errors when running with phantomjs (I assume this is the headless browser) - in the end I found out that Phantomjs doesn't support bind (and some other es5 methods So code using them would fail. just adding es5 shim to the test index.html (or karma.conf or.. ) file solved the problem. Since I used sinon.js with phantomjs in another project I know this can work correctly

debug in browser using testacular (now karma)

I am trying to figure out the best way to debug my unit tests when I break them. Typically in previous test environments I could just run the tests in the browser and breakpoint the test, or the code and see why my test was failing. I can't seem to figure out how to do that with testacular. Is there an easy way to debug unit tests?
In karma.conf.js:
browsers = ['Chrome'];
In your failing spec:
it('spec', function() {
debugger; // This is like setting a breakpoint
// ...
});
Run Karma.
Go to the newly opened Chrome Browser, open the console and refresh the page.
Now in Chrome's Developer Tools source tab you should see the execution stopped at the debugger.
Include "browsers = ['Chrome'];" in your karma.config file.
When Chrome opens, you should see "Karma - connected" at the top, with a "Debug" button to the upper-right.
Click this debug button, and a "Karma DEBUG RUNNER" tab will open. Then, simply right-click, inspect element, and debug as you normally would.
I found the following way to debug which doesn't require to make any changes in code (like adding "debugger" statement)
Set the "singleRun" as false in karma config file, such that karma will be listening on debug port and you can run the test again in browser launching the URL given below and debug:
Go to the captured browser and click the "DEBUG" button (or open
http://localhost:9876/debug.html) and use the web inspector to see
what's going on. (You may need to refresh the debug.html page for it
to kick in once the web inspector is open.)
In your console you should notified which it() statement is breaking, and why. For example:
Todos Add a new todo should add a new todo FAILED
expected todo.length to be 1 but was 0
However, you may find it useful to set
logLevel = LOG_DEBUG;
in your karma.conf.js file.

Resources