Karma-coverage not found: But, it is installed - angularjs

I used this guide http://karma-runner.github.io/0.8/config/coverage.html to setup my Karma-coverage plugin. Furthermore, it gets installed locally via the package.json file, which looks like this:
{
"name": "myApp",
"version": "0.1.0",
"devDependencies": {
"karma-jasmine": "latest",
"karma-coverage": "latest",
"karma-coffee-preprocessor": "latest",
"karma-chrome-launcher": "latest",
"coffee-script": "latest"
}
}
My Karma.conf looks like this:
// Karma configuration
// Generated on Sun Dec 07 2014 15:51:07 GMT+0100 (CET)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'javascripts/vendor/jquery_211.js',
'javascripts/vendor/angular.js',
'javascripts/vendor/angular-route.js',
'javascripts/vendor/angular-mocks.js',
'../app/assets/javascripts/app.coffee',
'javascripts/*.js',
'test/controllers/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../app/assets/javascripts/app.coffee' : ['coffee'],
'**/javascripts/*.js': 'coverage'
//'**/*.coffee': ['coffee']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
Now, while running karma I receive the error
WARN [reporter]: Can not load "coverage", it is not registered!
Perhaps you are missing some plugin?
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [preprocess]: Can not load "coverage", it is not registered!
Perhaps you are missing some plugin?
It does not matter, if I include karma-coverage in the plugin section of the karma.conf file, the problem stays the same (since the plugin gets loaded locally, I should not need the plugin part anyway...). I hope somebody of you guys has an idea... Thank you!

npm install -g karma-coverage to install the karma-coverage, and it will work fine, but i don't know why.
// Karma configuration
// Generated on Tue Oct 13 2015 11:14:07 GMT+0800 (CST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'*.js'
],
// list of files to exclude
exclude: [
'karma.config.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'*.js': 'coverage'
},
coverageReporter:{
type: 'html',
dir: './coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress','coverage'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
})
}

The solution for this problem was that I had a couple of installed node_modules within my users home folder. After deinstalling these modules and the locally installed ones via npm, I made a clean reinstall via npm link. This solved the problem for me!

plugins: [
require('karma-jasmine'),
require('karma-coverage'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
After added **"karma-coverage"** into the plugins array in karma.conf.js
it works to me. Thanks

Related

How to import typescript files with karma-systemjs?

Background
I'm trying to set up a test runner for an Angular 1x app, but I'm not able to get Karma to work with Systemjs and Typescript.
The tests are written in Typescript, and we use Systemjs to import files that use ES6 modules. Most files do not use ES6 modules.
Instead of using a karma prepreocessor like karma-typescript, I'm trying to use Systemjs to transpile my Typescript. Is that the wrong way to go? It doesn't seem like any transpiling is happening!
The error
When I run karma start, the script fails on the import of a typescript namspace:
import core = myApp.core;
Chrome 52.0.2743 (Windows 7 0.0.0) ERROR
Error: (SystemJS) SyntaxError: Unexpected token import
Evaluating app/scripts/site/core/components/settingsMenu/settingsMenu.spec.ts
Error loading app/scripts/site/core/components/settingsMenu/settingsMenu.spec.ts
Here is my karma.conf.js file, based on this example.
// Karma configuration
// Generated on Thurs Apr 13 2017
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['systemjs', 'jasmine'],
systemjs: {
configFile: 'config.js',
config: {
paths: {
'systemjs': 'app/vendor/systemjs/system.src.js',
'system-polyfills': 'app/vendor/systemjs/system-polyfills.src.js',
'typescript': '/node_modules/typescript/lib/typescript.js'
},
packages: {
'app': {
defaultExtension: 'ts'
}
},
transpiler: 'typescript'
},
serveFiles: [
'app/scripts/**/*!(spec).ts'
]
},
// list of files / patterns to load in the browser
files: [
{ pattern: 'app/scripts/**/*.spec.ts' }
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
systemjs config:
System.config({
baseURL: './',
defaultJSExtensions: true
});
Try adding the transpiler property in your systemjs config (config.js):
System.config({
baseURL: './',
defaultJSExtensions: true,
transpiler: 'typescript'
});

How do I run karma / jasmine tests for an Angular 1.5.8 project that uses javascript, coffeescript, and typescript source?

I am working on a production system that currently uses CoffeeScript and JavaScript. We are looking to progressively migrate the source code to TypeScript in anticipation of an eventual migration to Angular 2.
I am using karma with the below karma.conf.js configuration file. As I started to add TypeScript support, I started to rapidly go down a rabbit hole of potential fixes and dead-ends. Do I need to use karma-systemjs? Can karma-systemjs handle CoffeeScript? Can karma-systemjs and browserify work together? Should I be switching to Webpack? Should I be using karma-typescript instead? If so, can it handle CoffeeScript?
The myriad options are way confusing. Any guidance would be much appreciated.
/*global module */
"use strict";
module.exports = function(config){
config.set({
basePath: '../',
files : [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
'node_modules/angular-ui-calendar/src/calendar.js',
'node_modules/angular-ui-grid/ui-grid.js',
'node_modules/angular-ui-router/release/angular-ui-router.js',
'node_modules/ui-select/dist/select.js',
'node_modules/angular-aria/angular-aria.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-material/angular-material.js',
'node_modules/angular-sanitize/angular-sanitize.js',
'node_modules/pouchdb/dist/pouchdb.js',
'app/config/**/*.js',
'app/source/**/*.js',
'test/unit/**/*.js'
],
autoWatch: true,
frameworks: ['browserify', 'jasmine'],
browsers: ['PhantomJS'],
//browsers: ['Chrome'], // Use "Chrome" for debugging since phantomjs can swallow some errors
plugins: [
'karma-browserify',
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-chrome-launcher'
],
preprocessors: {
'app/config/**/*.js': ['browserify'],
'app/source/**/*.js': ['browserify'],
'test/unit/**/*.js': [ 'browserify']
},
browserify: {
debug: true,
transform: ['coffeeify', 'babelify'],
extensions: [ ".coffee"]
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};

Grunt Test Task

i have set up a grunt task for running test using Karma and Jasmine for testing an AngularJS framework!
For some reasons same configurations i have used for other projects fails for this one. here is the error message am getting:
forEach#/home/username/sw-projects/project/bower_components/angular/angular.js:340:24
loadModules#/home/username/sw-projects/project/van/bower_components/angular/angular.js:4419:12
createInjector#/home/username/sw-projects/project//bower_components/angular/angular.js:4344:22
workFn#/home/jofomah/sw-projects/van/bower_components/angular-mocks/angular-mocks.js:2409:60
/home/username/sw-projects/project/bower_components/angular/angular.js:4459:53
Expected undefined to be defined.
/home/username/sw-projects/project/app/common/utility/utility.service.spec.js:16:34
My Karma config:
// Karma configuration
// Generated on Fri Mar 18 2016 14:24:49 GMT+0100 (WAT)
var bowerJS = require('wiredep')({
dependencies: true,
exclude: [/jasmine$/],
devDependencies: true
}).js;
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: bowerJS.concat([
'.tmp/*.js',
// 'config.js',
// 'country-config.js',
'app/routes.js',
'app/app.js',
'app/common/rest/rest-client.js',
'app/common/utility/utility.service.js',
'app/common/settings/settings.js',
'app/common/brand/brand.directive.js',
'app/common/footer/footer.directive.js',
'app/common/week-picker/week-picker.directive.js',
'app/common/state-selector/state-selector.directive.js',
'app/common/loading-blanket/loading-blanket.directive.js',
'app/common/transform-listener/transform-listener.module.js',
'app/common/transform-listener/transform-listener.service.js',
'app/common/transform-listener/transform-listener-client.factory.js',
'app/common/http-error-modal/http-error-modal.js',
'app/modules/dashboards/index.js',
'app/modules/dashboards/state-dashboards.service.js',
'app/modules/dashboards/zone-dashboards.service.js',
'app/modules/data/dashboard/dashboard.controller.js',
'app/modules/data/upload/upload-form.directive.js',
'app/modules/data/inbox/inbox.controller.js',
'app/modules/data/inbox/inbox.service.js',
'app/modules/data/index.js',
'app/modules/users/users.service.js',
'app/modules/users/login-form/login-form.directive.js',
'app/modules/users/user-management-navbar-el/user-management-navbar-el.directive.js',
'app/modules/users/password-reset/password-reset.directive.js',
'app/modules/users/index.js',
'app/modules/settings/indices/index.directive.js',
'app/modules/settings/indices/indicator.directive.js',
'app/modules/settings/indices/indices.directive.js',
'app/modules/settings/indices/index.js',
'app/modules/settings/entities/entities.directive.js',
'app/modules/settings/entities/index.js',
'app/modules/settings/index.js',
'app/modules/analysis/chart.directive.js',
'app/modules/analysis/bar/bar.controller.js',
'app/modules/analysis/matrix/matrix.controller.js',
'app/modules/analysis/stock/stock.controller.js',
'app/modules/analysis/products.constant.js',
'app/modules/analysis/index.js',
'app/modules/entities/typeahead/agencies/agencies.directive.js',
'app/modules/entities/typeahead/districts/districts.directive.js',
'app/modules/entities/typeahead/regions/regions.directive.js',
'app/modules/entities/typeahead/sites/sites.directive.js',
'app/modules/entities/typeahead/zones/zones.directive.js',
'app/modules/entities/typeahead/index.js',
'app/modules/entities/admin/sites.directive.js',
'app/modules/entities/admin/site.directive.js',
'app/modules/entities/admin/zones.directive.js',
'app/modules/entities/admin/zone.directive.js',
'app/modules/entities/admin/regions.directive.js',
'app/modules/entities/admin/region.directive.js',
'app/modules/entities/admin/districts.directive.js',
'app/modules/entities/admin/district.directive.js',
'app/modules/entities/admin/index.js',
'app/modules/entities/entities.service.js',
'app/modules/entities/index.js',
//
//'app/**/*.module.js',
//'app/**/*.js',
//'app/**/*.service.js',
'app/**/*.spec.js',
//'app/**/*.html'
]),
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
plugins: [
'karma-*'
]
})
}
my test is :
'use strict';
/*global module: false, inject: false */
describe('utility', function(){
var utility;
beforeEach(module('eha.van.utility'));
beforeEach(inject(function(_utility_){
utility = _utility_
}));
it('should be defined', function(){
expect(utility).toBeDefined();
});
});

Angular unit tests with Karma/Jasmine - browser not defined

Whenever I run a unit test I get the error:
browser is not defined.
My config file is below - can anyone suggest the issue
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'www-dev/js/ionic.bundle.js',
'node_modules/angular-mocks/angular-mocks.js',
'www-dev/js/app.js',
'www-dev/js/templates.js',
'www-dev/css/*.css',
{pattern: 'tests/unit/unit.js', nocache: true, watched: true}
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./www-dev/js/app.js': ['coverage']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress','coverage'],
coverageReporter: {
type : 'html',
dir : './tests/unit/'
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome', 'Firefox', 'IE'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
To actually open a browser instance, Karma needs a browser launcher, which comes in the form of a plugin.
From Karma's browser docs:
Note: Most of the browser launchers need to be loaded as plugins.
Have you installed the correct launcher plugins?
https://github.com/karma-runner/karma-chrome-launcher
https://github.com/karma-runner/karma-firefox-launcher
https://github.com/karma-runner/karma-ie-launcher

Karma: cannot read property 'style' of undefined

I'm trying to do unit tests on my Angularjs code using karma.
This is my conf file:
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js',
'https://code.angularjs.org/1.2.26/angular-mocks.js',
'test/unit/**/*.js',
'js/app.js',
'js/controllers/AffairesCtrl.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
I'm testing a function which has the following code:
document.getElementById('case').style.display="none";
When I run the test, I get this error:
TypeError: Cannot read property 'style' of undefined
But, if I replace the javascript code with jQuery code:
$("#case").css("display","none");
Then, the test is a success and the previous error disappear.
Do you know why I get this error?
Thank you!
Likely because your document has no element with an id of "case".
See the documentation on getElementById
jQuery on the other hand does not return null if no elements exist as mentioned in this stackoverflow post. Therefore no error.

Resources