I lauched
karma start karma.conf.js --log-level debug --single-run
And get
16 12 2015 14:53:16.764:WARN [plugin]: Error during loading "C:\Users\denis.ev\AppData\Roaming\npm\node_modules/karma-phantomjs-launcher" plugin:
Cannot find module 'phantomjs'
16 12 2015 14:53:17.245:WARN [reporter]: Can not load "junit", it is not registered!
Perhaps you are missing some plugin?
16 12 2015 14:53:17.510:WARN [watcher]: Pattern "C:/Users/denis.ev/Documents/Bleu[hottask]/Bleu.Web/src/assets/libs/jquery-2.1.4.js" does not match any file.
16 12 2015 14:53:17.578:WARN [watcher]: Pattern "C:/Users/denis.ev/Documents/Bleu[hottask]/Bleu.Web/src/assets/libs/moment.js" does not match any file.
16 12 2015 14:53:17.603:WARN [watcher]: Pattern "C:/Users/denis.ev/Documents/Bleu[hottask]/Bleu.Web/src/assets/libs/bootstrap.js" does not match any file.
16 12 2015 14:53:17.711:WARN [watcher]: Pattern "C:/Users/denis.ev/Documents/Bleu[hottask]/Bleu.Web/src/assets/libs/angular.js" does not match any file.
16 12 2015 14:53:19.426:WARN [watcher]: Pattern "C:/Users/denis.ev/Documents/Bleu[hottask]/Bleu.Web/src/assets/libs/angular/angularjs-nvd3-directives.js" does not match any file.
16 12 2015 14:53:19.690:INFO [karma]: Karma v0.13.15 server started at http://localhost:9876/
16 12 2015 14:53:19.920:WARN [launcher]: Can not load "PhantomJS", it is not registered!
karma.conf.js
// Karma configuration
// Generated on Tue Jul 22 2014 13:41:07 GMT+0400 (Russian Standard Time)
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
/*
* "~/src/assets/libs/jquery-{version}.js",
"~/src/assets/libs/moment.js",
"~/src/assets/libs/bootstrap.js",
"~/src/assets/libs/angular.js",
"~/src/assets/libs/angular/angular-ui-router.js",
"~/src/assets/libs/angular/ui-bootstrap-tpls.js",
"~/src/assets/libs/angular/ui-grid.js",
"~/src/assets/libs/angular/angular-moment.js",
"~/src/assets/libs/angular/datetime-picker.js",
"~/src/assets/libs/angular/angular-local-storage.js",
"~/src/assets/libs/angular/ng-tags-input.modified.js",
"~/src/assets/libs/angular/ng-file-upload.js"
*/
files: [
{ pattern: 'Bleu.Web/src/assets/libs/jquery-2.1.4.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/moment.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/bootstrap.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/angular-ui-router.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/ui-bootstrap-tpls.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/ui-grid.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/angular-moment.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/datetime-picker.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/angular-local-storage.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/ng-tags-input.modified.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/ng-file-upload.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/ng-sortable.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/angular-ui-tree.js', included: true },
{ pattern: 'Bleu.Web/src/app/*/*.js', included: true },
{ pattern: 'Bleu.Web/src/core/*/*.js', included: true },
{ pattern: 'Bleu.Web/src/**/services/*.js', included: true },
{ pattern: 'Bleu.Web/src/**/models/*.js', included: true },
{ pattern: 'Bleu.Web/src/**/mappers/*.js', included: true },
{ pattern: 'Bleu.Web/src/**/constants/*.js', included: true },
{ pattern: 'Bleu.Web/src/**/enums/*.js', included: true },
{ pattern: 'Bleu.Web/src/**/helpers/*.js', included: true },
{ pattern: 'Bleu.Web/src/core/main/transports/FakeTransport.js', included: true },
{ pattern: 'Bleu.Web.Tests.Client/mocks/*/*.js', included: true },
{ pattern: 'Bleu.Web.Tests.Client/mocks/**/*.js', included: true },
{ pattern: 'Bleu.Web.Tests.Client/testData/**/*.js', included: true },
{ pattern: 'Bleu.Web.Tests.Client/Specs/**/*.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/d3.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/nv.d3.js', included: true },
{ pattern: 'Bleu.Web/src/assets/libs/angular/angularjs-nvd3-directives.js', included: 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: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
//reporters: ['progress'],
//reporters: ['html'],
reporters: ['dots', 'junit'],
junitReporter: {
outputFile: 'test-results.xml'
},
// 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,
logLevel: config.LOG_ERROR,
// 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: ['Chrome', 'PhantomJS', 'Firefox'],
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
};
What I need to lauch my test?
Thx
WARN [reporter]: Can not load "junit", it is not registered! Perhaps you are missing some plugin?
You don't have juint-reporter plugin. Install it via npm install karma-junit-reporter --save-dev
WARN [plugin]: Error during loading "C:\Users\denis.ev\AppData\Roaming\npm\node_modules/karma-phantomjs-launcher" plugin: Cannot find module 'phantomjs'
You don't have phantomjs. Install it via npm install -g phantomjs
WARN [watcher]: Pattern "C:/Users/denis.ev/Documents/Bleu[hottask]/Bleu.Web/src/assets/libs/jquery-2.1.4.js" does not match any file.
Probably basePath or pattern of files is wrongly configured. Try to set basePath to ..
Related
I am a new to ReactJS, before I used angularJS for my client side. But now I want to integrate it with the present application on SpringMVC. Now I want to integrate ReactJS as client side instead of angularJS, please help me. If there is any example please help. I am using eclipse ide.
Try to create a view(jsp/html/xhtml) and link the UI build output to that. you may use webpack as a build tool for UI(React) which will return bundle file.
Then it can be included to view using script tag. Please note you can use webpack-dev-server for UI development and try to use Proxy to consume the spring-mvc service. Its a recommended way. A folder containing all the JS under webapp can be used if your using Maven as build tool for java.
webpack reference : https://webpack.js.org/
Sample Webpack.config.js for reference.
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/scripts/main.js',
engine: './src/scripts/engine/Engine.js',
debugger: './src/scripts/debug/Debugmain.js',
client: './src/scripts/clientcode/Client.js'
},
output: {
path: path.resolve('./dist/client'),
filename: '[name].js',
publicPath: '/dist/client/',
chunkFilename: '[name].js'
},
devtool: 'inline-sourcemap',
cache: true,
resolve: {
alias: { ByteBuffer: 'bytebuffer' }
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'react-hot-loader'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['react', 'es2015'],
compact: false
}
},
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: [path.join(__dirname, './src', 'scripts')],
loader: 'eslint-loader'
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: 'css-loader?sourceMap!less-loader?sourceMap'
})
},
{
test: /\.(eot|woff|woff2|ttf|otf|png|jpg)$/,
loader: 'file-loader?name=images/[name].[ext]'
}
]
},
devServer: {
port: 8080,
stats: 'errors-only',
proxy: {
'/api': {
target: 'http://localhost:20404', //http://localhost:20403/',
secure: false
}
},
historyApiFallback: {
index: 'debug.html'
}
},
plugins: [
new ExtractTextPlugin({
filename: './styles/main.css',
allChunks: true
})
],
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
components: path.resolve(__dirname, 'src', 'scripts', 'components'),
routes: path.resolve(__dirname, '.', 'routes'),
draggable_tab: path.resolve(__dirname, 'src', 'scripts', 'lib'),
utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
engine: path.resolve(__dirname, 'src', 'scripts', 'engine')
}
}
};
I've recently installed and got a it up and running but I can't seem to get it running concurrently with my watch task? In my grunt file, if register the serve task before watch, the server spins up and but the watch task doesn't....and vice versa. This is the serve package and Im using and Grunt file attached:
https://www.npmjs.com/package/grunt-serve
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'js/build/production.min.js': ['js/build/production.js']
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build/'
}]
}
},
sass: {
//options: {
// style: 'compressed'
//},
dist: {
files: [{
expand: true,
cwd: 'css',
src: ['*.scss'],
dest: 'css/build/',
ext: '.css'
}]
}
},
serve: {
options: {
port: 9000
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['css/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
}
}
});
// Load all Grunt tasks automatically wihtout having to enter manaually
require('load-grunt-tasks')(grunt);
grunt.registerTask(
'default',
[
'concat',
'uglify',
'sass',
'serve',
'watch'
]
);
};
Grunt serve and grunt watch are both blocking tasks. You can use a plugin like grunt-concurrent to run both at the same time in separate threads. https://github.com/sindresorhus/grunt-concurrent
concurrent: {
target1: ['serve', 'watch'],
}
//aslo update your default task
grunt.registerTask(
'default',
[
'concat',
'uglify',
'sass',
'concurrent:target1'
]
);
Additionally you could also use grunt-concurrent to run your uglify and sass tasks in parallel which may improve build time.
We are working on an Angular project where we are using Karma/Jasmine for our testing environment. We've been using the karma-chrome-launcher for debugging the tests and it was working great. For some reason, it has stopped working lately. I can't figure out why though, as we haven't changed anything regarding that pipeline. We tried updating to latest Karma (1.4.1), but that didn't help. Has anyone else seen this issue and been able to fix it? Help is appreciated. I've attached two images of what the Chrome inspector looks like when you first open the debugger and then after setting a breakpoint and hitting Refresh (it should look the same as the 1st image, but doesn't) edit: karma.config at bottom as well
'use strict';
var path = require('path');
var conf = require('./gulp/conf');
var _ = require('lodash');
var wiredep = require('wiredep');
var pathSrcHtml = [
path.join(conf.paths.src, '/**/*.html')
];
function listFiles() {
var wiredepOptions = _.extend({}, conf.wiredep, {
dependencies: true,
devDependencies: true
});
var patterns = wiredep(wiredepOptions).js
.concat([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js')
])
.concat(pathSrcHtml)
.concat('karmaMobileFramework/*.js');
var files = patterns.map(function(pattern) {
return {
pattern: pattern
};
});
files.push({
pattern: path.join(conf.paths.src, '/assets/**/*'),
included: false,
served: true,
watched: false
});
return files;
}
module.exports = function(config) {
var configuration = {
files: listFiles(),
singleRun: false,
autoWatch: true,
preprocessors : {
'/**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
stripPrefix: conf.paths.src + '/',
moduleName: 'directive-templates'
},
logLevel: 'WARN',
frameworks: ['jasmine', 'jasmine-matchers', 'angular-filesort'],
angularFilesort: {
whitelist: [path.join(conf.paths.src, '/**/!(*.html|*.spec|*.mock).js')]
},
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-angular-filesort',
'karma-coverage',
'karma-jasmine',
'karma-jasmine-matchers',
'karma-ng-html2js-preprocessor',
'karma-htmlfile-reporter',
'karma-junit-reporter'
],
coverageReporter: {
type : 'html',
dir : 'reports/coverage/',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'cobertura', subdir: 'report-jenkins' }
]
},
reporters: ['progress', 'html', 'junit'],
junitReporter: {
outputDir: 'reports/tests/',
outputFile: 'test-results.xml',
useBrowserName: false
},
htmlReporter: {
outputFile: 'reports/tests/results.html',
pageTitle: 'BOLT Unit Tests'
},
proxies: {
'/assets/': path.join('/base/', conf.paths.src, '/assets/')
}
};
// This is the default preprocessors configuration for a usage with Karma cli
// The coverage preprocessor is added in gulp/unit-test.js only for single tests
// It was not possible to do it there because karma doesn't let us now if we are
// running a single test or not
configuration.preprocessors = {};
pathSrcHtml.forEach(function(path) {
configuration.preprocessors[path] = ['ng-html2js'];
});
config.set(configuration);
};
I am using Webpack for both the app and tests (using https://github.com/webpack/karma-webpack for it). The app is in typescript and the tests in Babel.
Importing something from a standalone module in the tests works (using import { cleanHTML, fromHTML, toHTML } from "../../app/utils/text.ts";, ie I need to mention the .ts extension otherwise it fails).
When I actually try to import a React component that imports a component in another file, I get the following error:
Module not found: Error: Cannot resolve 'file' or 'directory' ./blocks/paragraph.
The tree of directory looks like:
src/
app/
components/
blocks/
paragraph.ts
main.ts
tests/
components/
main_tests.js
utils/
And the main.ts imports paragraph.ts like so import { ParagraphBlockComponent } from "./blocks/paragraph";
Normal compilation works but not the tests.
Here is the karma config:
var path = require('path');
module.exports = function (config) {
config.set({
basePath: 'src',
singleRun: true,
frameworks: ['mocha', 'chai'],
reporters: ['dots'],
browsers: ['Firefox'],
files: [
'tests/index.js'
],
preprocessors: {
'tests/index.js': ['webpack']
},
webpack: {
noInfo: true,
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader']
},
{
test: /\_tests.js$/,
loaders: ['babel-loader']
}
]
}
},
webpackMiddleware: {
noInfo: true,
stats: {
color: true,
chunkModules: false,
modules: false
}
}
});
};
Did I miss something?
Adding the following to the karma webpack config fixed it for me
resolve: {
extensions: ['', '.js', '.ts']
},
I want to get cobertura and html output from the karma coverage reporter. At the moment I have to run the tests twice. One time with this configuration:
reporters: ['progress', 'coverage']
coverageReporter: { type : 'cobertura', dir : 'coverage/', file: 'cobertura.xml' }
The other time with:
coverageReporter: {type : 'html'....
Is there a way to do this in one run?
coverageReporter: {
reporters: [
{ type: 'html', dir: '/' },
{ type: 'cobertura', dir: '...' }
]
}
Should work
coverageReporter: {
dir: 'coverage-report',
reporters: [{
type: 'html',
subdir: 'report-html',
}, {
type: 'lcov',
subdir: 'report-lcov',
}]
}