Debugging Karma/Jasmine Tests with Angular 2 in WebStorm

Question

I'm trying to debug my Angular 2 Tests in WebStorm (2016.3.2). The first thing I tried was just to do it in Chrome Dev tools, but I actually don't see the script files in Sources to be able to set the break point. Note that you can see the script tags in the HTML page, but there's nothing in Sources.

So I did a bit more digging and found you can set up WebStorm to run and debug unit tests.

The tests do run, but the WebStorm breakpoint is never hit, and something seems to be "off" about what is happening. Obviously, I haven't used WebStorm before to run or debug unit tests, so I don't know what normal looks like.

I'm sure I'm just missing something, but with so many unfamiliar technologies coming together, I'm not sure what thread to pull.

Answer 1

I had edited my karma config file to include the ts files and the map files. When I set them both to include=false and launch from the terminal with ng test, the Sources window looks more like this:

This is what I was seeing before, but it confused me because I was expecting to see my own files. However, if I search in that file, I find my own code:

It still doesn't stop on the break point, but it's a start.

When I try to debug it through Webstorm, it still is seeing the Mime type as video/mp2t, so I'm guessing that it is interfering somehow with the Mime Types set up in the Karma config file.

I find myself wondering if the devs working on this Framework build anything other than Frameworks, since at every turn it seems like they've erected huge, unnecessary barriers to actually seeing what's going on in your app.

Update:

It looks like this is a bug that comes and goes in Angular-CLI. Seems to be in the "comes" phase today.

Update 2

You can find the files in the webpack:// folder that's next to the localhost://folder. It's logical to think that the files you need will be in the apparent site root, but they're not.