Angular-cli: Documentation should be explicit on what to use instead of ng test --reporters

[Maximaximum]

With Angular 5, I was using ng test --reporters teamcity command, but it seems that --reporters option has been removed. How do we set the reporters from the command line now?

[jesuscuesta]

It is not necessary use --reporters. Only with Karma.conf

Example file Karma.conf:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-phantomjs-launcher'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-junit-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../reports/coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['junit','progress', 'kjhtml'],
    junitReporter: {
      outputDir: 'reports/unit', // results will be saved as $outputDir/$browserName.xml
      outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: true, // add browser name to report and classes names
      nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
      classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
      properties: {}, // key value pair of properties to add to the <properties> section of the report
      xmlVersion: null // use '1' if reporting to be per SonarQube 6.2 XML format
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    captureTimeout: 99999,
    browsers: ['PhantomJS'],
    singleRun: false
  });
};

[Maximaximum]

Well, it's bad news that we can't use a specific reporter via command line.

In my use case, we use teamcity-reporter only on the CI server. Now, do we
have to create an additional karma config file for our CI server?

[jesuscuesta]

You should edit karma.conf, add dependency in plugins and add to reporters new type.

For example:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-phantomjs-launcher'),
      require('YOUR NEW DEPENDENCY'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-junit-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../reports/coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['NEW TYPE TEST', 'junit','progress', 'kjhtml'],
    junitReporter: {
      outputDir: 'reports/unit', // results will be saved as $outputDir/$browserName.xml
      outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: true, // add browser name to report and classes names
      nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
      classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
      properties: {}, // key value pair of properties to add to the <properties> section of the report
      xmlVersion: null // use '1' if reporting to be per SonarQube 6.2 XML format
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    captureTimeout: 99999,
    browsers: ['PhantomJS'],
    singleRun: false
  });
};

[Maximaximum]

Yes, thank you, I got that. But is it possible to use different reporters based on a command-line arg?

[woodne]

If we can't have specific arguments such as reporters, could a cli arg be exposed to tell which karma configuration file to use?

[CharlesSuttie]

Yes, there is the --karma-config option, which allows one to specify the karma configuration file to use.

[Maximaximum]

Yes, fortunately we can use --karma-config option, however, it would be really great if we could still use the command-line --reporters arg, just like we did in previous versions of angular cli.

[jneuhaus20]

Agreed, I don't want to have to maintain two different karma configs just to pick a different reporter in our CI build.

And where is this in the release notes? I can't find anywhere this info was broadcast, and it's kind of a big deal when all our CI builds silently stop publishing test results 😠

[CharlesSuttie]

I agree with your concern about maintenance. I've had a go at writing another karma configuration file just for ci (I'm using Circleci). Repeating the contents of the original file was not difficult but I could not work out a way to import the existing configuration and then override the reporters, which was essentially the behavior of the command line flag when it was available. So one ends up with the same code in two places, which I don't like.

[abierbaum]

Is there a way to pass an environment variable in through the command line that would allow us to use it to adjust the logic in the karma.conf.js file? That may be a way to change the reporter used if for example an environment variable like "CI_TEST" was set.

[CharlesSuttie]

When using ng test, for example, I'm not sure it is possible to pass an environmental variable as one would for node: see https://stackoverflow.com/questions/49496438/use-process-env-in-angular-5-environment. By way of comparison, I think this is an example of what @abierbaum is describing: karma config in @mgechev's seed.

I also had a quick look at the Angular CLI workspace file (angular.json). There are links there to schemas for karma, protractor and tslint. The karma one includes options like this one:

"browsers": { "type": "string", "description": "Override which browsers tests are run against." },

but I don't see reporters.

In any case, I personally think that using the workspace file might end up being more work than writing a new karma config file (although I haven't attempted it yet).

Does anyone know of a way to import the configuration from the default karma.conf.js file into a new file? I am thinking this would reduce the repetition in the new file.

[colinbate]

I have a solution that is a bit of a hack but seems to work well.

Basically, it involves inspecting the passed in browsers config. Just add this to the top of your karma.conf.js file (inside the main function):

const isCI = config.browsers[0] === 'PhantomJS'; // Whatever you pass in for CI.

You could do a find on the array if you expect to have multiple. If you want to have the same browser used with two different reporters in different contexts then you can set up a custom launcher:

{
  // ...
  customLaunchers: {
    'PhantomJS_CI': {
      base: 'PhantomJS'
    }
  }
}

Then use PhantomJS_CI in your comparison. Once you have your isCI variable you can use it wherever to conditionally set values, like the reporter:

reporters: isCI ? ['teamcity'] : ['progress']

[maccurt]

This makes me sad. Why can't the solution be we will put it back? It was working just fine. I wanted a different report for my build than my local box. COME ON MAN!!!!!!

[avoerman]

I got around this by just creating a karma.conf.js file and a karma-ci.conf.js file, along with a base setup file.

package.json

"test": "ng test",
"test-ci": "ng test --karma-config=karma-ci.conf.js",

karma.conf.js

const baseConf = require('./karma-base.conf.js');

module.exports = function(config) {
  config.set(baseConf.get(config));
};

karma-ci.conf.js

const baseConf = require('./karma-base.conf.js');

module.exports = function(config) {
  const conf = baseConf.get(config);

  config.set({
    ...conf,
    reporters: [...conf.reporters, 'junit'],
    junitReporter: {/* etc */},
    plugins: [...conf.plugins, require('karma-junit-reporter')]
  });
};

and then the contents of my original karma.conf.js file

karma-base.conf.js

module.exports = {
  get: function(config) {
    return {
      basePath: '',
      /* etc */
    }
}

A little bit hacky, but I didn't have to duplicate the entire conf file and can now scale out different test instances rather easily.

[joashmusyoka]

Just get back the --reporters command line arg, it was perfect for CI setups! There is no reason whatsoever to remove it!!!

For example, I do not need Cobertura reports during development but I need them in the CI.

[filipesilva]

Closing as we mistakenly removed this option, and have added it back. Sorry about that folks.

[joeskeen]

@filipesilva It seems that this has been restored in CLI 7, but not CLI 6. Will this be added back to version 6?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}