Hi all and thanks in advance for reading this.
I have some problems with the manual execution of unit testing on local and also for running these ones on azure devops and the reporting of the results on sonarqube.
When I run ng test I get these errors:
Chrome 71.0.3578 (Windows 10.0.0) ERROR
{
"message": "Uncaught TypeError: Cannot read property 'fn' of undefined\nat http://localhost:9876/_karma_webpack_/scripts.js:122:12\n\nTypeError: Cannot read property 'fn' of undefined\n at setTransitionEndSupport (http://localhost:9876/_karma_webpack_/scripts.js:122:12)\n at http://localhost:9876/_karma_webpack_/scripts.js:200:5\n at http://localhost:9876/_karma_webpack_/scripts.js:202:4\n at http://localhost:9876/_karma_webpack_/scripts.js:9:4\n at http://localhost:9876/_karma_webpack_/scripts.js:10:2",
"str": "Uncaught TypeError: Cannot read property 'fn' of undefined\nat http://localhost:9876/_karma_webpack_/scripts.js:122:12\n\nTypeError: Cannot read property 'fn' of undefined\n at setTransitionEndSupport (http://localhost:9876/_karma_webpack_/scripts.js:122:12)\n at http://localhost:9876/_karma_webpack_/scripts.js:200:5\n at http://localhost:9876/_karma_webpack_/scripts.js:202:4\n at http://localhost:9876/_karma_webpack_/scripts.js:9:4\n at http://localhost:9876/_karma_webpack_/scripts.js:10:2"
}
Chrome 71.0.3578 (Windows 10.0.0) ERROR
{
"message": "Uncaught TypeError: Cannot read property 'fn' of undefined\nat http://localhost:9876/_karma_webpack_/scripts.js:122:12\n\nTypeError: Cannot read property 'fn' of undefined\n at setTransitionEndSupport (http://localhost:9876/_karma_webpack_/scripts.js:122:12)\n at http://localhost:9876/_karma_webpack_/scripts.js:200:5\n at http://localhost:9876/_karma_webpack_/scripts.js:202:4\n at http://localhost:9876/_karma_webpack_/scripts.js:9:4\n at http://localhost:9876/_karma_webpack_/scripts.js:10:2",
"str": "Uncaught TypeError: Cannot read property 'fn' of undefined\nat http://localhost:9876/_karma_webpack_/scripts.js:122:12\n\nTypeError: Cannot read property 'fn' of undefined\n at setTransitionEndSupport (http://localhost:9876/_karma_webpack_/scripts.js:122:12)\n at http://localhost:9876/_karma_webpack_/scripts.js:200:5\n at http://localhost:9876/_karma_webpack_/scripts.js:202:4\n at http://localhost:9876/_karma_webpack_/scripts.js:9:4\n at http://localhost:9876/_karma_webpack_/scripts.js:10:2"
I cannot see the execution of these test on the terminal, but get the browser window for debugging.
You can find package.json and karma.conf.js below:
package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test --code-coverage --watch=false",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "6.0.4",
"@angular/common": "6.0.4",
"@angular/compiler": "6.0.4",
"@angular/core": "6.0.4",
"@angular/forms": "6.0.4",
"@angular/http": "6.0.4",
"@angular/platform-browser": "6.0.4",
"@angular/platform-browser-dynamic": "6.0.4",
"@angular/platform-server": "6.0.4",
"@angular/router": "6.0.4",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"bootstrap": "4.1.1",
"core-js": "^2.4.1",
"ngx-bootstrap": "^3.0.0",
"ngx-markdown": "^6.1.0",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.2.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.11.3",
"@angular/cli": "6.2.2",
"@angular/compiler-cli": "6.0.4",
"@angular/language-service": "6.0.4",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.1.3",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"protractor": "^5.4.1",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.7.2"
},
karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
files: [
{ pattern: 'src/**/*.ts' }
],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
require('karma-junit-reporter'),
require('karma-coverage'),
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: [ 'html', 'lcov', 'cobertura' ],
fixWebpackSourcePaths: true
},
coverageReporter: {
dir: 'coverage',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'cobertura', subdir: 'cobertura-html' },
{ type: 'lcov', subdir: 'coverage' }
]
},
reporters: ['progress', 'coverage-istanbul', 'junit', 'coverage'],
junitReporter: {
outputDir: '',
outputFile: 'test.xml',
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
Also regarding with this problem, I'm also getting the lcov.info file empty, so I'm completely lost on this way.
Is there a bug between versions or something like that? Or I'm doing something bad?
Thanks!
EDIT: FIRST PROBLEM SOLVED
It was a problem in the bootstrap.js. I just install jquery library and put in my angular.json file the reference to jquery before the bootstrap one.
angular.json
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.min.js", //this one
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
I still have the problem with the file I have to generate for the code coverage.
I tried, karma-coverage, karma-typescript, karma-coverage-istanbul-reporter and I'm having problems and errors with all of them. I'm going to share my tsconfig.json just in case.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES5",
"module": "commonjs",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
},
"exclude": ["node_modules"]
}
