Add sourcemap support for Karma

[flut1]

Currently when a test fails, Karma will output a stack trace to the JS that is compiled in-memory. This can make it a bit difficult to find the line number for the failing test in the TS source.

We should look into sourcemap support, for example integrating the karma-sourcemap-support module.

[ThaNarie]

Found a guy that got it working: https://github.com/AngularClass/angular2-webpack-starter/issues/178#issuecomment-224555653

Working example in the project from this karma config: https://github.com/kozlice/angular2-webpack-boilerplate/blob/master/karma.conf.js

[flut1]

I tried this example last Friday for some hours but couldn't get it to work somehow. Worth another shot though

[ThaNarie]

Got pretty far pretty quickly, but got stuck on this error (googling for about an hour didn't help):

webpack: wait until bundle finished: 
11 07 2016 01:51:29.307:ERROR [karma]: { [Error: no such file or directory]
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/test/index.ts' }
Error: no such file or directory
    at MemoryFileSystem.readFileSync (/Volumes/Projects/Repos/seng/seng-boilerplate/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.readFile (/Volumes/Projects/Repos/seng/seng-boilerplate/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
    at doRead (/Volumes/Projects/Repos/seng/seng-boilerplate/node_modules/karma-webpack/index.js:156:26)
    at Plugin.readFile (/Volumes/Projects/Repos/seng/seng-boilerplate/node_modules/karma-webpack/index.js:160:3)
    at doNTCallback0 (node.js:408:9)
    at process._tickCallback (node.js:337:13)

After cloning the angular webpack boilerplate project, and copy/pasting stuff back and forth on both ends, making them as similar as possible, I finally spotted the difference: webpack entry should be a string, not an array!

Now it's just moving all stuff back where it belongs, and create a PR :)

[ThaNarie]

With the default setup from the angular2-webpack-boilerplate it seemed that only source files that were touched by tests showed up in the coverage results, which wasn't what we wanted.

So I added the const sourcesContext = require.context(...) back into the index.ts, which resulted the "Unknown file" error.

I forked the 1.1.1 awesome-typescript-loader version and added a workaround to the issue (skipping fastEmit when file hasn't been added yet), and linked to that version in the package.json.

When trying to use the same setup in seng-event I got runtime errors on const enums.

Debugging the above, I ran webpack for both the dist and the test builds, using different tsconfig.json versions, and I found out why I got the duplicate definition errors that stopped me using the 2.0 version before. When you add a ../node_modules relative path to the exclude array in the tsconfig.json, it suddenly adds all the d.ts files it can find in your project, giving a lot of errors.

With the 2.0 issue out of the way, and setting preserveConstEnums to true in the tsconfig.json I finally got a working solution!

Time invested: around 8 hours now :)

[flut1]

Sourcemap support now works for istanbul/coverage, but not for karma/mocha. If I have a failing test, it shows me a stacktrace that has line numbers from the compiled source.

I'll mess around with some settings, hopefully we can solve this without large changes to our setup.

[flut1]

For some reason, sourcemaps do work within Webstorm after moving the configuration to the repo root. See #32. Running karma from the console still shows incorrect line numbers.