How do I debug a Jasmine spec run with Testacular (Karma)?

Question

I have a small project with Jasmine specs and I am using Testacular as my test runner. I don\'t understand how I can debug, both the app code or the spec code. When I try to set

Answer 1

You can use the statement debugger; by itself, and Chrome will break on that statement as long as the developer tools panel is open and breakpoints are enabled.

Answer 2

My favorite approach to debugging tests with Karma (was Testacular) is to use this plugin:

• https://github.com/dfederm/karma-jasmine-html-reporter

I start up Karma like this:

karma start karma.conf.js --browsers=Chrome --single-run=false --reporters=kjhtml

This opens Karma in debug mode with a "Debug" button. When you click that, it runs all the tests in a Chrome window and shows the results as they go by. At this point you can use Developer Tools, set breakpoints, step into code etc as normal.

Even better, you can click on a failing test and it will switch to a mode where it only runs that one test. Now you can quickly test and debug that one test without having to wait for all the others to run.

To see this in action, here's a GitHub pull request where I added this library to our project:

https://github.com/edx/edx-ui-toolkit/pull/12

Answer 3

Testacular is not the best tool to use for debugging. It's power lies in the fact that it will run your tests in multiple browsers, and do it EXTREMELY quickly, and can do it every time you change a file, so therefore it will tell you if you have broken a test. But if you need to debug, it's not the best tool.

You can indeed put a "debugger" statement in your code to cause it to break, but you may end up hitting that same breakpoint dozens or more times in your tests if that is a common line of code that is hit in multiple tests. Where perhaps it's only breaking in one given scenario, so you have to skip all the breakpoints except the one occurrence where you are seeing a problem. If you are using mocha or jasmine there is a way to run only a single test in your entire test suite. With jasmine that's changing that one test from it() to iit(), with mocha it's it.only(). But even so, testacular still is the wrong tool for this job.

A far better solution is to use a different test "setup" and just run the single test that's breaking. This is easily accomplished using jasmine or mocha or whatever your test framework of choice is. You will already be writing your testacular tests in one of those frameworks since testacular is an automation tool and not a test framework. So just create a test runner file and using that, load the file up, and if you're using chrome, go into the dev tools, hit Command-O on MAC or Control-O on windows, and select the file you wish to put a breakpoint in, and set your breakpoint, and you're cooking with gas.

Using the traditional "test runner" with your test framework won't clash with using testacular at all. The two will run in concert happily.

Here's links to my preferred articles for doing this in the major 3 test frameworks:

jasmine: http://net.tutsplus.com/tutorials/javascript-ajax/testing-your-javascript-with-jasmine/

QUnit: http://www.testdrivenjs.com/getting-started/qunit-setup/

Mocha: I don't have a link to a good article for this. By the middle of February 2013 my PluralSight,com course on testing clientside JavaScript will be published and you can find it there, along with detailed directions on setting up QUnit and Jasmine. They have a short free trial that you can use to view the content without paying. This URL will link to that course when it gets published. http://pluralsight.com/training/Authors/Details/joe-eames