Angular-cli not running spec.ts files

Question

I created an Angular-CLI project in Webstorm, and I'm trying to make sure all the tests are running. It launches chrome browser, but doesn't report anything. So I modified app.component.spec.ts in the first it block to just add a console.log statement, which does not log to the console.

It doesn't report anything or give any errors until I manually close Chrome (for some reason even though I set it up to only run once it does not close on its own). It also doesn't show the console.log statement.

Karma.config

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('angular-cli/plugins/karma')
    ],
    files: [
      { pattern: './src/*/*.spec.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'karma-remap-istanbul']
              : ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  });
};

Errors on closing Chrome:

22 11 2016 10:01:27.657:ERROR [karma]: TypeError: Cannot read property 'map' of undefined
    at ProgressReporter._render (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\progress.js:53:26)
    at ProgressReporter.writeCommonMsg (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\progress.js:9:
44)
    at ProgressReporter.BaseReporter.onBrowserError (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\b
ase.js:63:10)
    at Server. (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\events.js:13:22)
    at emitTwo (events.js:111:20)
    at Server.emit (events.js:191:7)
    at disconnect (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\browser.js:40:13)
    at Browser.onDisconnect (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\browser.js:157:7)
    at Socket. (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\events.js:13:22)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Socket.emit (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\socket.js:128:10)
    at Socket.onclose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\socket.js:425:8)
    at Client.onclose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\client.js:232:24)
    at emitTwo (events.js:111:20)
    at Socket.emit (events.js:191:7)
    at Socket.onClose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\lib\socket.js:304:10)
    at WebSocket.g (events.js:291:16)
    at emitNone (events.js:86:13)
    at WebSocket.emit (events.js:185:7)
    at WebSocket.Transport.onClose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\lib\transport.js:126:8)
    at WebSocket.g (events.js:291:16)
    at emitTwo (events.js:106:13)
    at WebSocket.emit (events.js:191:7)
    at WebSocket.cleanupWebsocketResources (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\node_modules\ws\lib\
WebSocket.js:927:10)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:188:7)
    at emitErrorNT (net.js:1276:8)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Answer 1

It sounds like you want to leave autoWatch on and also turn on singleRun. Use --config to pass a separate config file for testing. This allows you to also not show the chrome window if all you care about is the results while still keeping the original config for when you want to debug a test.

Make the following config file changes and run npm run test:headless or ng test --config karma.conf.headless.js. You can also use this in your ci environment to run the tests in a vm and log the test results.

Add new node scripts to run your tests headless.

package.json:

{
...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "test:headless": "ng test --config karma.conf.headless.js",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "e2e:headless": "ng e2e --config protractor.conf.headless.js"
  },
...
}

karma.conf.headless.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
        ? ['progress', 'coverage-istanbul']
        : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: true,
    customLaunchers: {
        ChromeHeadless: {
            base: 'Chrome',
            flags: [
                // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
                '--headless',
                '--disable-gpu',
                // Without a remote debugging port, Google Chrome exits immediately.
                '--remote-debugging-port=9222',
            ]
        }
    }
  });
};

For completeness here's the protractor conf as well protractor.conf.headless.js

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
        args: [ "--headless", "--disable-gpu", "--window-size=1280x720" ]
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

Answer 2

So it seems like turning off autowatch is what causes this. If I turn that back on, it works. It also seems that setting singleRun to true has zero effect when you run it through ng test.

If you want to run this with autoWatch false and singleRun true, you need to use karma start. Old School FTW!

Update:

According to the Angular-CLI usage docs, to use singleRun and no autoWatch:

Running unit tests

ng test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.