Angular test report options?

Question

I find that the Angular console testing report is inconvenient to read, it's just a big bunch of console text without formatting.

Is it possible for 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 this library for Angular unit test reports. Can I get test results for Angular modules shown in the browser?

I know that there is a “reporters” configuration parameter in the karma run-run test file that is used to test Angular, and it has the following parameters: points, progress, JUnit, growl, Coverage

However, they don't seem to be doing anything, regardless of the fact that I installed them, and I could not 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 you need to configure Istanbul ( https://github.com/yahoo/istanbul ). This will give you the status of the files and lines in the files to be tested in HTML format and will not show the actual tests.

I don’t think that any of the reporters will actually print individual tests in HTML format. Try using Webstorm, it displays individual tests in a readable format.

I tried the karma-html-reporter module from npm, but it didn’t work for me, so maybe see if it updated it.

Answer 2

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

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

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

Answer 3

If you developed your project using Angular -CLI, you can simply run

 ng test --code-coverage 

with the following (or similar) configuration in the 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 maintenance tool is excellent and relatively easy to install.

Answer 4

To cover the code, I use the newer version of karma-coverage-istanbul-reporter . He builds a report website based on angular-cli code coverage release. You can review your components and services to find out where your unit test coverage is missing. There is also a set of coverage at the top. The output will create a coverage folder at a specific destination, just load index.html for the report.

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

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