Angular test reporting options?

Question

I find the Angular console test reporting awkward to read, it just a big pile of console text with next to no formatting.

Is it possible to get the Angular unit testing reporting to appear in the browser using html for formatting? I noticed this github repo the other day - https://github.com/larrymyers/jasmine-reporters

• Is it possible to use the html reporter in that library for Angular unit test reporting..can I have the results of Angular unit tests shown in a browser?

I know there is a 'reporters' config option in the karma test runner file used for Angular testing and it has the following options - dots, progress, junit, growl, coverage

However these seem to do absolutely nothing, no matter what I set them to, and I couldn't find any documentation on them.

• So what is the purpose of the reporters option in karma.conf.js?

Answer 1

I personally use the coverage option. But for this to work you need to setup Istanbul ( https://github.com/yahoo/istanbul ) Coverage reporter separately. This will give you in HTML format the status of what files and lines in files are being tested, it will not show the actual tests written.

I don't think any of the reporters will actually print out the individual tests in HTML format. Try using Webstorm, it displays the individual tests in an easy to read format.

I've tried the karma-html-reporter module from npm, but it hasn't worked for me, so maybe see if they've updated that one.

Answer 2

I run karma from IntelliJ 13.x and am able to get a clean html format for the test output using the following configuration options in karma.conf.js in the config.set section :

    reporters: ['progress', 'junit', 'html']
    plugins : ['karma-htmlfile-reporter', ...] (karma-jasmine, etc...)
    htmlReporter: { outputFile: 'tests/units.html' }

After my tests run I can just right click on the test/units.html and open in browser to see a formatted version of the results including color coding of results. Of course you will need to install any plugins or dependencies to get the test to run.

Answer 3

If you've been developing your project using the Angular-CLI, you can just run a

ng test --code-coverage

with the following (or similar) config in your karma.conf.js file

coverageIstanbulReporter: {
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true,
  thresholds: {
    global: { // thresholds for all files
      statements: 0,
      lines: 0,
      branches: 0,
      functions: 0
    },
    each: { // thresholds per file
      statements: 0,
      lines: 0,
      branches: 0,
      functions: 0
    }
  }
},

honestly, if not, the Karma Istanbul coverage tool is excellent and relatively simple to install.

Answer 4

For code coverage I use the newer version of karma-coverage-istanbul-reporter. It builds a report website based on the angular-cli code coverage output. You can drill down into your components and services to see where your unit test coverage is lacking. There is also an aggregation of coverage at the top. The output will create a coverage folder in your defined destination, just load the index.html for the report.

I wanted to note that by default this will include all files without .spec.ts. Use the following to exclude models and other files from coverage in your .angular-cli.json test section:

"codeCoverage" : {
  "exclude": ["./src/test/*mocks.ts",
              "./src/environments/*.ts",
              "./src/app/models/*model.ts"
            ]
}