I am using Angular with Karma Jasmine. And I am trying to get Code coverage. But I am getting below code coverage always:
Getting similar error in Pipeline :
if you notice in the image it was able to detect only polyfill.ts file.
Not sure why its not able to show full list of files and its code coverage.. :(
Command used : ng test --codeCoverage=true --watch=false
Angular, Jasmine , Karma Version:
"jasmine-spec-reporter": "~5.0.0",
"json-server": "^0.15.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-junit-reporter": "^2.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"@angular-devkit/build-angular": "~0.1000.2",
"@angular/cli": "~10.0.2",
"@angular/compiler-cli": "~10.0.3",
Karma.conf.js:
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: "",
frameworks: ["jasmine", "@angular-devkit/build-angular"],
plugins: [
require("karma-jasmine"),
require("karma-junit-reporter"),
require("karma-chrome-launcher"),
require("karma-phantomjs-launcher"),
require("karma-jasmine-html-reporter"),
require("karma-coverage-istanbul-reporter"),
require("@angular-devkit/build-angular/plugins/karma"),
require('./custom-karma-pluggins/describe-tracker'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
junitReporter: {
outputDir: "coverage",
outputFile: "TEST-results-karma.xml",
suite: "",
},
coverageIstanbulReporter: {
dir: require("path").join(__dirname, "./coverage/universal-ap"),
reports: ["html", "lcovonly", "text-summary", "cobertura"],
fixWebpackSourcePaths: true,
},
reporters: ["describeTracker", "progress", "junit", "kjhtml"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
captureTimeOut: 210000,
browserDisconnectTolerance: 3,
browserDisconnectTimeout: 210000,
browserNoActivityTimeout: 210000,
singleRun: false,
restartOnFileChange: true,
});
};
I tried searching same on the internet and tried out the solution suggested like:
- to make changes in kamra config file. Which I tried different version provided online.
- To check the 'sourceRoot' in angular.json file. Which looks fine as it points to path where all the code file exist 'Src'
- To make changes in package.json's command.
- To make autowatch or singleRun true.
None of these worked for me.
Edit: Angular.json :
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"universal-ap": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "ax",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/flexboxgrid/css/flexboxgrid.min.css",
"node_modules/normalize.css/normalize.css",
"src/styles.scss",
"src/styles/themes/ax-brand-theme.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "3.7mb",
"maximumError": "3.7mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "10kb",
"maximumError": "40kb"
}
]
},
"ax": {
"assets": [
{
"glob": "web.config",
"input": "src/config",
"output": "./"
},
{
"glob": "*.json",
"input": "src/config",
"output": "./config"
},
"src/favicon.ico",
{
"glob": "**/*",
"input": "src/assets",
"ignore": [
"**/whitelabel/**/*"
],
"output": "/assets"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "universal-ap:build:ax"
},
"configurations": {
"production": {
"browserTarget": "universal-ap:build:ax"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "universal-ap:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/config"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/flexboxgrid/css/flexboxgrid.min.css",
"node_modules/normalize.css/normalize.css",
"src/styles.scss",
"src/styles/themes/ax-brand-theme.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "universal-ap:serve"
},
"configurations": {
"production": {
"devServerTarget": "universal-ap:serve:production"
}
}
}
}
}
},
"defaultProject": "universal-ap",
"cli": {
"analytics": false
}
}
Edit 2:
Please note, if I use fdescribe, I am able to get code coverage for that specific file:
