Karma + jspm + PhantomJS "Could not load PhantomJS" - unit-testing

I'm running an Aurelia project on Windows, and I want to run Karma with PhantomJS. I also have JSPM and Babel similarly in the skeleton project here.
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v0.13.22 server started at http://localhost:9876/
[launcher]: Can not load "PhantomJS"!
RangeError: Maximum call stack size exceeded
at XXX\node_modules\di\lib\injector.js:119:19
at Array.forEach (native)
at XXX\node_modules\di\lib\injector.js:115:27
at Array.forEach (native)
at new Injector (XXX\node_modules\di\lib\injector.js:104:11)
at createChild (XXX\node_modules\di\lib\injector.js:93:12)
at module.(anonymous function) (XXX\node_modules\karma\lib\config.js:198:31)
Here is my karma.conf.js:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jspm', 'jasmine'],
plugins: [
'karma-babel-preprocessor',
'karma-jspm',
'karma-jasmine',
'karma-phantomjs-launcher'
],
jspm: {
loadFiles: ['src/**/*.js', 'test/**/*.js'],
serveFiles: ['src/**/*.js'],
paths: {
'*': '*',
'github:*': 'jspm_packages/github/*',
'npm:*': 'jspm_packages/npm/*'
}
},
preprocessors: {
'test/**/*.js': ['babel'],
'src/**/*.js': ['babel']
},
'babelPreprocessor': {
options: {
sourceMap: 'inline',
moduleIds: false,
optional: [
'es7.decorators',
'es7.classProperties'
]
}
},
defaultJSExtensions: true,
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
proxies : {
'/src/': '/base/src/',
'/jspm/': '/base/jspm/'
},
browsers: ['PhantomJS'],
customLaunchers: {
'PhantomJS': {
base: 'PhantomJS',
options: {
settings: {
webSecurityEnabled: false
},
},
flags: ['--load-images=true'],
// debug: true
}
},
phantomjsLauncher: {
exitOnResourceError: true
},
singleRun: false
});
};
Here is my gulp file:
var gulp = require('gulp');
var Karma = require('karma').Server;
/**
* Run test once and exit
*/
var karmaConf = __dirname + '/../../karma.conf.js';
gulp.task('test', function(done) {
new Karma({
configFile: karmaConf,
singleRun: false
}, done).start();
});
/**
* Watch for file changes and re-run tests on each change
*/
gulp.task('tdd', function(done) {
new Karma({
configFile: karmaConf
}, done).start();
});
/**
* Run test once with code coverage and exit
*/
gulp.task('cover', function(done) {
new Karma({
configFile: karmaConf,
singleRun: true,
reporters: ['coverage'],
preprocessors: {
'test/**/*.js': ['babel'],
'src/**/*.js': ['babel', 'coverage']
},
coverageReporter: {
includeAllSources: true,
instrumenters: {
isparta: require('isparta')
},
instrumenter: {
'src/**/*.js': 'isparta'
},
reporters: [
{ type: 'html', dir: 'coverage' },
{ type: 'text' }
]
}
}, done).start();
});
My versions:
JSPM: 0.16.15
NPM: 3.8.3
Gulp: 3.9.1
Karma: 0.13.22
I do have my PhantomJS path set (running >phanthomjs works).

Related

Unable to generate code coverage report for all ts files using Karma, Webpack, remap coverage

I am able to set up Unit test framework using Karma, Webpack and karma-remap-coverage for code coverage. But I don't understand why coverage is not coming for all the files(components, directives, services). I have around, supposed 100 files, but it's generating coverage report only for 40-50 files.
Here I am sharing my configuration files:
Karma.conf.js
var webpackConfig = require('./webpack/webpack.test');
var path = require('path');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './webpack/karma-test-shim.js', watched: false },
{ pattern: './node_modules/#angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: false }
],
preprocessors: {
'./webpack/karma-test-shim.js': ['webpack', 'sourcemap'],
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
coverageReporter: {
includeAllSources: true,
type: 'html',
dir: 'coverage/'
},
// coverageIstanbulReporter: {
// reports: ['html', 'lcovonly'],
// fixWebpackSourcePaths: true
// },
// reporters: ['progress', 'coverage-istanbul'],
coverageReporter: {
type: 'in-memory'
},
remapCoverageReporter: {
'text-summary': null,
json: './coverage/coverage.json',
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
reporters: ['progress', 'coverage', 'remap-coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
singleRun: true,
browserNoActivityTimeout: 20000
};
config.set(_config);
};
Webpack.test.js
var webpack = require('webpack');
var helpers = require('./helpers');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true',
options: { configFileName: 'tsconfig.json' }
}, 'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
},
{
test: /\.css$/,
exclude: helpers.root('app'),
loader: 'null-loader'
},
{
test: /\.css$/,
include: helpers.root('app'),
loader: 'raw-loader'
},
{
enforce: 'post',
test: /\.ts$/,
loader: 'istanbul-instrumenter-loader',
include: helpers.root('app'),
exclude: /(node_modules|\.spec\.ts)/
}
]
}
}
Karma-test-shim.js
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('../testing/specs', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
NPM dependencies used:
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.1",
"istanbul-instrumenter-loader": "2.0.0",
"karma-html-reporter": "^0.2.7",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.3",
"karma-remap-coverage": "^0.1.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.1",
Any help is really appreciated!

Setting up unit test code coverage on Angular 2.1.0 Webpack

I am Following this tutorial on setting up a Webpack Angular 2 project.
I can run unit tests just fine with the setup, but I have tried adding code coverage to the project using karma-coverage and remap-istanbul, but it seems that karma-coverage is not outputting anything in the coverage-final.json.
What do I need to add to the karma config to get the test config to work?
Here is my current config:
var webpackConfig = require('./webpack.test');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [
{pattern: './config/karma-test-shim.js', watched: false}
],
preprocessors: {
'./config/karma-test-shim.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: true
};
config.set(_config);
};
You have two options, the easiest way is to use angular-cli. The hardest way is based on that tutorial make the changes needed for code coverage, which are a lot. One of the main things that you will be forced is to change to Webpack 2, I wasn't able to make awesome-typescript-loader work with karma using Webpack 1. The code coverage was always empty. I got some inspiration from angular-cli and from angular2-webpack-starter here are the changes:
karma.conf.js: add this:
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
And change this:
reporters: ['progress'],
to this:
reporters: ['progress', 'karma-remap-istanbul'],
There are a lot of changes to the webpack configs so I'm just going to paste the entire config files, it's easier:
webpack.common.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
// Optimizing ensures loading order in index.html
name: ['polyfills', 'vendor', 'app'].reverse()
}),
new webpack.optimize.CommonsChunkPlugin({
minChunks: Infinity,
name: 'inline',
filename: 'inline.js',
sourceMapFilename: 'inline.map'
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
webpack.dev.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
sourceMapFilename: '[name].map',
library: 'ac_[name]',
libraryTarget: 'var'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
tslint: {
emitErrors: false,
failOnHint: false,
resourcePath: 'src'
},
}
}),
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal',
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
outputPath: helpers.root('dist')
},
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
});
webpack.prod.js:
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var WebpackMd5Hash = require('webpack-md5-hash');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
filename: '[name].[chunkhash].js',
sourceMapFilename: '[name].[chunkhash].bundle.map',
chunkFilename: '[id].[chunkhash].chunk.js'
},
plugins: [
new WebpackMd5Hash(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: { screw_ie8: true },
compress: { screw_ie8: true }
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
options: {
tslint: {
emitErrors: true,
failOnHint: true,
resourcePath: helpers.root('src')
},
htmlLoader: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [
[/#/, /(?:)/],
[/\*/, /(?:)/],
[/\[?\(?/, /(?:)/]
],
customAttrAssign: [/\)?\]?=/]
}
}
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('src')
)
],
node: {
fs: 'empty',
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
});
webpack.test.js:
var helpers = require('./helpers');
var path = require('path');
var atl = require('awesome-typescript-loader');
var webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, './'),
resolve: {
extensions: ['.ts', '.js'],
plugins: [
new atl.TsConfigPathsPlugin({
tsconfig: helpers.root('tsconfig.json')
})
]
},
entry: {
test: helpers.root('config/karma-test-shim')
},
output: {
path: './dist.test',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.ts$/,
enforce: 'pre',
loader: 'tslint-loader',
exclude: [
helpers.root('node_modules')
]
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'source-map-loader',
exclude: [
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/#angular')
]
},
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
query: {
tsconfig: helpers.root('tsconfig.json'),
module: 'commonjs',
target: 'es5',
useForkChecker: true
}
},
{
loader: 'angular2-template-loader'
}
],
exclude: [/\.e2e\.ts$/]
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: 'null'
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
},
{
test: /\.(js|ts)$/, loader: 'sourcemap-istanbul-instrumenter-loader',
enforce: 'post',
exclude: [
/\.(e2e|spec)\.ts$/,
/node_modules/
],
query: { 'force-sourcemap': true }
},
]
},
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: null, // if no value is provided the sourcemap is inlined
test: /\.(ts|js)($|\?)/i // process .js and .ts files only
}),
new webpack.LoaderOptionsPlugin({
options: {
tslint: {
emitErrors: false,
failOnHint: false,
resourcePath: `./src`
}
}
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('src')
)
],
node: {
fs: 'empty',
global: true,
process: false,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
}
package.json:
You will need to install new packages and update your start script to this:
"start": "webpack-dev-server --config config/webpack.dev.js --profile --watch --content-base src/",
And install these packages:
npm i -D extract-text-webpack-plugin#2.0.0-beta.4 karma-remap-istanbul source-map-loader sourcemap-istanbul-instrumenter-loader tslint tslint-loader webpack#2.1.0-beta.25 webpack-dev-server#2.1.0-beta.3 webpack-md5-hash
Last but not least we just need to do some changes on the tsconfig.json and since we are now using tslint we add the a tslint.json file.
tsconfig.json:
{
"compilerOptions": {
"buildOnSave": false,
"compileOnSave": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "dist/out-tsc",
"noImplicitAny": true,
"removeComments": false,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5"
}
}
tslint.json:
{
"rules": {
"member-access": false,
"member-ordering": [
true,
"public-before-private",
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-inferrable-types": false,
"no-internal-module": true,
"no-var-requires": false,
"typedef": false,
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "space",
"index-signature": "space",
"parameter": "space",
"property-declaration": "space",
"variable-declaration": "space"
}
],
"ban": false,
"curly": false,
"forin": true,
"label-position": true,
"label-undefined": true,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-null-keyword": false,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-unreachable": true,
"no-unused-expression": true,
"no-unused-variable": false,
"no-use-before-declare": true,
"no-var-keyword": true,
"radix": true,
"switch-default": true,
"triple-equals": [
true,
"allow-null-check"
],
"use-strict": [
true,
"check-module"
],
"eofline": true,
"indent": [
true,
"spaces"
],
"max-line-length": [
true,
100
],
"no-require-imports": false,
"no-trailing-whitespace": true,
"object-literal-sort-keys": false,
"trailing-comma": [
true,
{
"multiline": false,
"singleline": "never"
}
],
"align": false,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"interface-name": false,
"jsdoc-format": true,
"no-consecutive-blank-lines": false,
"no-constructor-vars": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-finally",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [true, "always"],
"variable-name": [
true,
"check-format",
"allow-leading-underscore",
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
If you want you can check the differences between the Angular.io setup (on the left) and the changes I made to make coverage work (on the right) here

configure coverage for karma webpack with angular 2

How do I set up karma-coverage with angular2 + webpack?
I followed the quickstart webpack guide from angular. But the coverage tool is blank and does not display my tests. Thanks!
my folder structure is
project
|--src (project files)
|--tests (all my testfiles)
my webpack.test.js looks like this
var helpers = require('./helpers');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts']
},
{
test: /\.html$/,
loader: 'null'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: 'null'
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'null'
}
]
}
}
my Karma.conf.js
var webpackConfig = require('./webpack.test');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine', 'sinon'],
files: [
{pattern: './config/karma-test-shim.js', watched: false}
],
preprocessors: {
'./config/karma-test-shim.js': ['webpack', 'sourcemap']
},
plugins:[
require('karma-jasmine'),
require('karma-coverage'),
require('karma-webpack'),
require('karma-phantomjs-launcher'),
require('karma-sourcemap-loader'),
require('karma-mocha-reporter'),
require('karma-sinon')
],
coverageReporter: {
type : 'html',
dir : 'coverage/'
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
reporters: ['mocha','coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
};
config.set(_config);
};
and the karma-test-shim.js
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('reflect-metadata');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var testContext = require.context('../tests', true, /\.spec\.ts/);
testContext.keys().forEach(testContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
Yuu need to import below code coverage plugin into plugins
require('karma-coverage-istanbul-reporter'),
Also, use below code to add istanbul reporter property as below
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
// enforce percentage thresholds
// anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
thresholds: {
emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
global: { // thresholds for all files
statements: 80,
lines: 80,
branches: 80,
functions: 80
},
each: { // thresholds per file
statements: 80,
lines: 80,
branches: 80,
functions: 80,
overrides: {}
}
}
},
The complete config for karma.config.js should be below:
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular/cli/plugins/karma'),
require('karma-htmlfile-reporter'),
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
// enforce percentage thresholds
// anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
thresholds: {
emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
global: { // thresholds for all files
statements: 80,
lines: 80,
branches: 80,
functions: 80
},
each: { // thresholds per file
statements: 80,
lines: 80,
branches: 80,
functions: 80,
overrides: {}
}
}
},
angularCli: {
environment: 'dev'
},
// reporters: config.angularCli && config.angularCli.codeCoverage ? ['spec', 'karma-remap-istanbul'] : ['spec'],
// reporters: ['mocha'],
reporters: ['progress', 'html', 'kjhtml'],
htmlReporter: {
outputFile: 'testreports/report.html',
// Optional
pageTitle: 'Rest Reports',
subPageTitle: 'Suite-wise report ',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: false
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

How to prevent loading images in karma runner

How to configure karma to stop loading images while testing? i was trying to use solution from here in my karma.config.js :
var webpack = require('webpack');
module.exports = function (config) {
config.set({
browsers: [ 'Chrome' ],
singleRun: true,
frameworks: [ 'mocha' ],
files: [
'tests.webpack.js',
{pattern: './assets/img/signup.png', watched: false, included: false, served: true},
],
proxies: {
'/assets/img/signup.png': '/assets/img/signup.png'
},
preprocessors: {
'tests.webpack.js': [ 'webpack', 'sourcemap' ]
},
reporters: ['mocha'],
mochaReporter: {},
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: ['transform-decorators-legacy' ],
presets: ['airbnb', 'es2015', 'stage-1', 'react']
}
}
]
},
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
},
webpackServer: {
noInfo: true //please don't spam the console when running in karma!
}
});
};
but this doesn't work for me. I still get error:
[web-server]: 404: /front-end2/assets/img/signup.png
Maybe there are any other solution to prevent loading images ? the biggest problem is not warning message but errors which ocures when karma try to get image from my local server
The proxies configuration does not look right. Try something like this:
...
proxies: {
'/front-end2/assets/img/': '/base/assets/img/'
},
...
A brief explanation:
/front-end2/assets/img/ relates to the requests that are being made;
/assets/img/ relates the the pattern in the files configuration; and
/base/ is the path from which Karma serves the files.

Karma coverage always coming empty

I've been trying to run karma coverage for a couple of days now only to find an empty blank page as below.
Here's my configuration:
var path = require('path');
var webpackConfig = require('./webpack.common');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './karma-shim.js', watched: false }
],
exclude: [],
preprocessors: {
'./karma-shim.js': ['webpack', 'sourcemap', 'coverage']
},
client: {
captureConsole: false
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
coverageReporter: {
dir: 'coverage/',
reporters: [{
type: 'json',
dir: 'coverage',
subdir: 'json',
file: 'coverage-final.json'
}]
},
remapIstanbulReporter: {
src: 'coverage/json/coverage-final.json',
reports: {
lcovonly: 'coverage/json/lcov.info',
html: 'coverage/html',
'text': null
},
timeoutNotCreated: 1000, // default value
timeoutNoMoreFiles: 1000 // default value
},
webpackServer: {
noInfo: true // please don't spam the console when running in karma!
},
reporters: ["mocha", "coverage", "karma-remap-istanbul"],
port: 9876,
colors: true,
logLevel: config.LOG_ERROR,
autoWatch: false,
browsers: ['PhantomJS'], // you can also use Chrome
singleRun: true
};
config.set(_config);
};
And here's my karma-shim.js file
Error.stackTraceLimit = Infinity;
require('es6-shim');
require('reflect-metadata');
require('ts-helpers');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('./app', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.setBaseTestProviders(browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
Folder Structure is as follows:
Any idea what am i missing here? Help much appreciated.
Thanks
Your karma config is clearly missing a reference to the source.
Please modify config as follows:
module.exports = function (config) {
var _config = {
[...]
preprocessors: {
// Remove coverage as preprocessor for your tests -
// Istambul (runs coverage behind the scene for karma) will
// instrumentate this
'./karma-shim.js': ['webpack', 'sourcemap'],
// Add path to your source (.js or .ts - depands on your project)
'./index.ts': [ 'coverage' ]
},
[...]
},
[...]
}
Explanation: coverage tests your code against your unit tests - you need to supply entry point for your code to get Karma analyse coverage.
Extras - adding karma-coverage plugin:
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( 'karma-coverage' )
],
[...]
},
[...]
}
Extras - karma & typescript files:
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( '#angular/cli/plugins/karma' )
],
[...]
},
[...]
preprocessors: {
'./src/test.ts': [ '#angular/cli' ],
'./index.ts': [ 'coverage' ]
},
[...]
mime: {
'text/x-typescript': [ 'ts', 'tsx' ]
},
[...]
}
I've got the same problem, and I've tried everything I could find on the Internet, but nothing worked. So I solved it in the following HARD but VERY SIMPLE way:
Create a new folder, or delete all the content of the existing folder of your project (YOU'D NEED TO ADD, COMMIT, AND PUSH EVERYTHING IF YOU DELETE THE CONTENT), and then clone the same project all over again.
As usual, run command "npm install".
Then copy the following karma.conf.js file content to replace your own karma.conf.js file content:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
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')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: false,
});
};
Most likely, it's the 'coverage' part that is wrong in
dir: require('path').join(__dirname, 'coverage'),
In my case, the original setup was
dir: require('path').join(__dirname, './../coverage/360-app'),
which gave me a hard time. But since you set it up wrong in the beginning, it'd be hard to get it right even if you change it.
After I did the re-clone, I started to have everything I want:
Good luck to everyone.