Debugging test cases

[greg9504]

I'm using 'npm run watch:test' to run the unit tests, which run fine. However if I open a browser at:

http://localhost:9876/#

and press the debug button shown on that page, I am unable to debug. I open the dev tools, go to the sources tab, browse to a file to debug (say home.component.spec.ts), set a breakpoint, then refresh the browser window. I see an exception in the console:

Observable":1 Uncaught ReferenceError: require is not defined at Object.webpack_exports.c (Observable":1) at webpack_require (bootstrap 221f0e1…:49) at Object. (bootstrap 221f0e1…:147) at webpack_require (bootstrap 221f0e1…:49) at Object. (testing.es5.js:1) at webpack_require (bootstrap 221f0e1…:49) at Object.exports.compose.functions (spec-bundle.js:25) at __webpack_require__ (bootstrap 221f0e1…:49) at Object.defineProperty.value (bootstrap 221f0e1…:147) at bootstrap 221f0e1…:147 at EmptyError":1

Is there a step I'm missing to be able to debug the test scripts?

If I perform these same steps using the AngularClass/angular2-webpack-starter project I can debug the test scripts.

Thanks

[greg9504]

I have this working using the Debugger tools in Chrome, but not yet with Visual Studio Code... here is what I had to change to get it to work:

in karma.config.js: change:

browsers: [
      'Electron'      
    ],

to:

 // Port config for VSCode debugging purpose
    browsers: ['ElectronDebugging'],
    customLaunchers: {
      ElectronDebugging: {
        base: 'Electron',
        flags: [
          '--show'//,
          // below for debugging with Visual Studio Code
          //'--remote-debugging-port=9333',
          //'debug: true',
        ],
      },
    },

This launches an Electron instance, from which you select the Debug button, which opens up the Karma Debug Runner. Then in the Karma Debug Runner window open Dev Tools, go to sources, browse under Webpack, and set your break points. Reload the page to debug.

You'll find that the source maps are messed up, this has to do with the Karma Coverage tools. The solution is to not use those tools if you want to debug. I've attached modified karam.config.js and webpack.test.js that when karma is called with --auto-watch assumes you do not need coverage and want to debug (based on https://stackoverflow.com/questions/39131809/karma-webpack-sourcemaps-not-working ). Now the source maps should work out and debugging will work. I also had to make this change to webpack.test.js:

/**
         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
         *
         * See: https://github.com/s-panferov/awesome-typescript-loader
         */
        {
          test: /\.ts$/,
          use: [
            {
              loader: 'awesome-typescript-loader',
              query: {
                configFileName: 'tsconfig.karma.json',
                // use inline sourcemaps for "karma-remap-coverage" reporter
                // sourceMap: false,   
                // inlineSourceMap: true,
                compilerOptions: {

                  // Remove TypeScript helpers to be injected
                  // below by DefinePlugin
                  removeComments: true

                }
              },
            },
            'angular2-template-loader'
          ],
          exclude: [/\.e2e\.ts$/]
        },

The sourceMap: false, and inlineSourceMap: true, lines were commented out. Without this the source maps for the .spec.ts files were not working right for debugging. See https://github.com/SitePen/remap-istanbul/issues/96#issuecomment-267022223

Attached, complete files. Appreciate any comments if this is the right way... karma.config_webpack.test.zip

[greg9504]

If you are interested in a pull request I could give it a try. I've made a few minor changes to what I posted above and added the karma-webpack-grep tool, see here. This allows you to run either all the tests in a directory, or just one test like:

run just one .spec.ts file: npm run watch:test:grep -- app/home/home.component.spec.ts

run all in directory: npm run watch:test:grep -- app/about

When watch:test (or watch:test:grep) the electron window is displayed so you can debug. When just test is run assumes you do not want to debug and runs as before without showing any windows.

[colinskow]

@greg9504 I am very interested in a pull request. It would also be very helpful if you would add instructions to a wiki for this project. Thanks for all your contributions!!!

I apologize ahead of time I may be slow to respond. I built this starter in order to provide the foundation for a commercial project I'm working on, and now I am full speed ahead getting the software ready for release!

[greg9504]

Since this functionality has been merged to the main branch might as well close this.