Is it possible to generate a Angular4 coverage report?
Hi there!
I am trying to generate a coverage report for my Angular4 project, using WebStorm. I have made a Karma setup which uses my karma.conf.js configuration.
The tests runs as expected and a coverage report is generated and coverage is also visible in my project. There is only one problem. Because of the way Angular4 initializes a testing environment before running the tests, my files and preprocessors section of the config looks like this:
files: [
{
pattern: "./src/test.ts",
watched: false
}
],
preprocessors: {
"./src/test.ts": ["@angular/cli", "coverage"]
},
This results in coverage only being generated for the test.ts file and not all the files in the project.
Is it possible to solve this so i can view coverage for all my project?
Please sign in to leave a comment.
It won't work this way..."@angular/cli" preprocessor also generates coverage, I'd suggest removing the extra "coverage" preprocessor to get the correct results produced.
Note that WebStorm 2017.1 doesn't support coverage produced by angular-cli, https://youtrack.jetbrains.com/issue/WEB-24863 is fixed in 2017.2. You can try the EAP (https://confluence.jetbrains.com/display/WI/WebStorm+EAP) to see if it works for you
Hi Elena and thank you!
I have downloaded the 2017.2 version and followed the guide from your link but without luck. It is still behaving the same way. Therefore i am publishing my karma.conf.js:
Can you please tell me if i am missing something? And i would like to know if i have to run the coverage with:
or the built in karma configuration?
Hmm... Do you have any special reason for using 'karma-coverage' instead of 'karma-coverage-istanbul-reporter' that is normally used by angular-cli projects?
So i tried again with an updated karma.conf.js based on your suggestions:
module.exports = function (config) {config.set({
basePath: "",
frameworks: ["jasmine", "@angular/cli"],
plugins: [
require("karma-jasmine"),
require("karma-typescript"),
require("karma-chrome-launcher"),
require("karma-firefox-launcher"),
require("karma-phantomjs-launcher"),
require("karma-jasmine-html-reporter"),
require("karma-htmlfile-reporter"),
require("@angular/cli/plugins/karma"),
require("karma-html-reporter"),
require("karma-coverage"),
require("karma-coverage-istanbul-reporter")
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{
pattern: "./src/test.ts",
watched: false
}
],
coverageIstanbulReporter: {
reports: ["html", "lcovonly"],
fixWebpackSourcePaths: true
},
preprocessors: {
"./src/test.ts": ["@angular/cli", "coverage"]
},
mime: {
"text/x-typescript": ["ts", "tsx"]
},
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: ["Chrome"],
singleRun: false
});
};
Running ng test --code-coverage from the WebStorm terminal, generates a lcov.info file and a html directory with coverage, but nothing is visible in WebStorm. When pressing CTRL + ALT + F6 i can't select the newly generated lcov.info file. The OK button is disabled.
Running my WebStorm configuration with Karma, from the IDE instead, doesn't generate a lcov.info file nor a directory, but it shows some sort of coverage, but only for the file test.ts.
Thank you for taking the time to help me!
>So i tried again with an updated karma.conf.js based on your suggestions
Sorry, but, as far as I can see, you are still using 'karma-coverage' - it is required
and used as preprocessor:
Please make sure that the only listed preprocessor is "@angular/cli"
Hi again!
So i copied the config you wrote. Running ng test --code-coverage still only generates a folder with a html structure and a lcov.info. No coverage information is shown in the IDE.
Running Karma with coverage thorugh the IDE, gives me the following error and fails:
Adding require("karma-coverage") to the plugins[] in the karma.conf.js, and then running the configuration again doesn't produce any coverage:
>Running ng test --code-coverage still only generates a folder with a html structure and a lcov.info. No coverage information is shown in the IDE
it's expected - coverage can only be shown when using karma integration (i.e. when running with karma run configuration)
>Running Karma with coverage thorugh the IDE, gives me the following error and fails
I see this error when using 2017.1.2, but it's not an issue in 2017.2 EAP
Okay. I am also running 2017.2 EAP:
Could you please let me see your Karma Run/Debug Configuration? It looks like you'r using a different karma package. My configuration is as follows:
Here you are:
Configuration is default, just as the project (default application generated with latest angular-cli)
Hello, I have the same issue.
My karma.conf.js is similar to yours, except that I output the coverage report into '../target/coverage' - when I do this the coverage report cannot be found by IJ.
If I remove that configuration option then the coverage report goes into the 'src' directory and the coverage can be reported.
Is there a way to get this working with a custom coverage report directory?
what error can you see namely? when using non-standard coverage dir, I'm prompted to select the lconv.info; choosing target/coverage/lcov.info helps