Karma Like a Boss

For a long time, I thought you couldn't set a break point in a Jasmine test running in Karma. Heck, I even said that in a blog post. I recently learned this wasn't true. Once you know how debugging in Karma works, it seems really obvious, but I think I'm probably not alone in missing this entire feature or understanding how to make best use of it.

So let's start out by looking at a browser running Karma. When I first launched Karma with my first expect(true).toBe(true) test, I saw pretty much what everyone sees:

Of course, I clicked that honking obvious Debug button, and I got this:

Oh, thank you so much. What am I supposed to do with that? So I assumed like every end user since ever that the developer had screwed up and of course I wasn't missing something.

Meanwhile, I had the problem that all those console.log statements I kept dumping into Karma got really hard to read if it was set up to constantly rerun every time I changed a file because when I'd scroll up it was very difficult to find the beginning of any particular run. So I set Karma up to just run once and then exit so I could enter "cls" (clear screen) between runs. So the browser window closed after each run and for sure there were no break points being set.

Fast forward to the past couple of months and I've been working in Angular 2. Angular 2 and TypeScript are, in my opinion, a hot mess in terms of being able to figure out what's going on, so I've been researching hot and heavy into getting more insight when creating and running tests. So far none of that research is actually helping me with Angular 2, but when I recently worked on a coding challenge for a major software company--I am available for hire by the way--in AngularJS, all this research was pretty useful.

So let's unpick a few things that are really helpful to know:

1. There is a reporter, karma clear screen reporter, that will clear the console at the beginning of each test run, which means you can let karma run continuously. Once you are at that point, you now have your Debug button back.
2. When you open the Debug window, you're expected to use the browser's debug tools by pressing F12 or opening the developer tools however your favorite browser wants you to do that. At that point, you can set your break points and refresh the debug window to get access to all that debugging goodness.
3. If you let Webstorm set up your Angular project for you, it does kind of a junit thing that by default runs karma only once every time you click the "run" button (don't use the debug button or you can't see the tree of your unit tests), but it leaves the karma browser window open. This leaves a nice clean terminal display, still gives you access to the Debug button, and shows you colorful little icons that indicate the status of your tests.

My mother like to say "the obvious, isn't." This was a lesson for me in how true this is. I hope this helps someone not go quite so long making the mistakes I did.