Can't debug Karma tests launched in PhantomJS

[microsoft]

Can't debug Karma tests launched in PhantomJS

[sjd78]

Karma runs as a node process and then uses one or more browser launchers to inject the tests to the desired browser. The launcher for PhantomJS karma-phantomjs-launcher spawns a phantomjs and then injects the tests.

Over at the VSC phantomjs debug extension, you can directly invoke a phantomjs process and debug in VSC. This is closer to what we want, but not quite there. In fact, issue 1 on the extension's github is asking for this very thing.

So anyone know how to attach to a phantomjs process that was launched in debug mode via karma?

[weinand]

@aides VSCode 0.9.1 is rather old. Could you please try with a more recent version, e.g. 0.10.3.

[aides]

@weinand Thanks for chiming in here. Yes, I am on 0.10.6 now and see the same behavior (breakpoints in tests are not hit).
Please let me know if I can provide any details on the problem to help with the investigation.

[activebiz]

+1

[weinand]

@aides Since I'm not familiar with a Karma/Phantom setup, it would be great if you could help me reproducing this problem. Is there a repository sample that I can use? Thanks.

[aides]

@weinand thanks for coming back here. I've created a repo with a minimal set up for reproducing here https://github.com/aides/vscodekarma

After cloning, one should do

1. npm install
2. bower install
3. open the folder in the VSCode,
4. set breakpoint at line 9 in src/app/app.spec.js
5. Hit F5 to start debugging

Expected: breakpoint is hit and I recall I definitely saw this working on pre v0.9.1
Actual: breakpoint is not hit

Notes: I've managed to find VSCode v0.8.0 and saw that breakpoint was not hit either and that is strange. I did not manage to find v0.7.0 installer for another check. If you could provide me with 0.7.0 installer or a link I could do more checks on my own.

Also, if you think that the case is not realistic, please let me know why it should not work as I would expect.

[weinand]

@aides thanks for creating this setup for me.

I suspect that src/app/app.spec.js is not running in debug mode. When I add a debugger; statement in line 9, nothing happens. Normally this would result in a stop in the debugger (even if breakpoints are not working).

Could it be that the --debug-brk option is not propagated to any forked node processes?

[weinand]

@aides Yes, src/app/app.spec.js is not running in debug mode, so there is no way that this could have ever worked in a previous version of VS Code. I've tried with 0.7.0, 0.8.0, and 0.9.0.

BTW you can find previous releases here:
https://github.com/Microsoft/vscode/wiki/Previous-Releases

[weinand]

@aides if you find a way to pass the debug flag to the correct process (where src/app/app.spec.js) please let me know and we could add this to our FAQ.

[lordgreg]

Did anyone had any luck with debugging his/her karma unit tests? VSCode version 1.8.1, launch.json:

    {
      "type": "node",
      "request": "launch",
      "name": "Karma tests",
      "cwd": "${workspaceRoot}",
      "program": "${workspaceRoot}/node_modules/karma/bin/karma",
      "args": [
        "start",
        "${workspaceRoot}/karma.conf.js"
      ]
    }

karma.conf.js

// Karma configuration
// Generated on Wed Jul 01 2015 13:51:22 GMT+0200 (CEST)

'use strict';

module.exports = function (config) {
  // retrieve main files from bower
  var wiredep = require('wiredep');
  var bowerFiles = wiredep({devDependencies: true}).js;

  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'angular-filesort'],

    // sort app/**/*.js files
    angularFilesort: {
      whitelist: [
        'app/!(bower_components)/**/*.js'
      ]
    },

    // list of files / patterns to load in the browser
    files: bowerFiles.concat([
      // other
      'app/!(bower_components)/**/*.js',
      // test
      'test/karma/**/*.js',
      // templates
      'app/**/templates/*.html',
      'app/**/views/*.html'
    ]),

    // list of files to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'app/**/views/*.html': ['ng-html2js'],
      'app/**/templates/*.html': ['ng-html2js']
    },

    // use template cache to avoid unexpected $http requests from ui-router
    // https://github.com/angular-ui/ui-router/issues/212#issuecomment-69974072
    ngHtml2JsPreprocessor: {
      moduleName: 'ngHtml2Js',
      stripPrefix: 'app/' // the path must be relative to the app.js
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  });
};

VSCode internal debug console shows:

node --debug-brk=46381 --nolazy node_modules/karma/bin/karma start /Users/abcd/Projects/asdfasdf/karma.conf.js 
Debugger listening on 127.0.0.1:46381
11 01 2017 15:07:48.218:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
11 01 2017 15:07:48.220:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
11 01 2017 15:07:48.239:INFO [launcher]: Starting browser PhantomJS
11 01 2017 15:07:49.415:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#YgxnMDGmXeexRD1EAAAA with id 2028685
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
[1A[2KLOG: 'alalalallala'
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
[1A[2KPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0 secs / 0.003 secs)
[1A[2KPhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.004 secs / 0.003 secs)

test.spec.js:

'use strict';

describe('module: crmApp, controller: LoginCtrl, service: Requester, Settings', function () {

  describe('Should login', function () {

    it('should send login data to server and get response', function () {
      console.log('alalalallala');

      expect(1 + 2).toBe(3); // breakpoint set here, even debugger; doesn't stop it.

    });
  });
});

0 chance to debug.

[TheTFo]

Were you able to get this working?

[lordgreg]

Sadly, I did not. I still hope on one of the devs to appear here :)

[roblourens]

I'm not really familiar with Karma but the test runs in phantomJS, not in Node, right? So how could it be debugged with the node debugger, unless there's some way to run them in Node instead?

http://stackoverflow.com/questions/16660670/how-to-test-nodejs-backend-code-with-karma-testacular

[nycdanielp]

This is obviously a rather old thread, but you can just use chrome with the headless option. This won't spawn a browser window but will show output in your console terminal. Additionally, you can attach to the debug process in VS Code to get breakpoints.

[stmihai]

Using headless chrome yields different results than phantomjs.
But apparently you can configure karma to run PhantomJS in debug mode; in karma.conf:
customLaunchers: { PhantomDebug: { base: 'PhantomJS', debug: true } }
When running the tests with ng test --browsers=PhantomDebug the terminal output points to a link that you can click:
04 10 2018 11:25:11.721:INFO [phantomjs.launcher]: Launch browser at
04 10 2018 11:25:11.722:INFO [phantomjs.launcher]: http://localhost:9000/webkit/inspector/inspector.html?page=2
This opens up a page with debugging abilities. It's a bit quirky and it crashed a lot (especially when trying to display vendor.js), but I guess it's better than nothing.