Here is my karma.conf.js file
module.exports = function(config) {
var configuration = {
basePath : '',
autoWatch : false,
frameworks: ['jasmine'],
files: [
'bower_components/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.min.js',
'bower_components/angular-animate/angular-animate.min.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'bower_components/angular-cookies/angular-cookies.min.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'bower_components/angular-touch/angular-touch.min.js',
'bower_components/angular-ui-router/release/angular-ui-router.min.js',
'src/app/**/*.js'
],
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'gulpAngular'
},
browsers : ['PhantomJS'],
plugins : [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'src/**/*.html': ['ng-html2js']
}
};
config.set(configuration);
};
I have searched such problems on stackover for a whole afternoon today, but I still can't get any solution for that.
I wonder anyone who can solve this problem.
Seems your specs are loaded before application files, and your angular module can't be resolved. Please try changing 'files' as follows:
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-touch/angular-touch.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/app/index.js',
'src/app/main/main.controller.js',
'src/app/components/navbar/navbar.controller.js',
'src/**/*.html',
'src/**/*.spec.js',
'src/**/*.mock.js'
],
karma tests run fine for me after changing the config this way
Related
I am using Babel 7.1 together with rollup (v0.67). This is my rollup config:
{
input: 'src/svg.js',
output: {
file: 'dist/myBundle.js',
name: 'myBundle',
sourceMap: true,
format: 'iife'
},
plugins: [
resolve({browser: true}),
commonjs(),
babel({
include: 'src/**',
runtimeHelpers: true,
babelrc: false,
presets: [["#babel/preset-env", {
modules: false,
targets: {
firefox: "63"
},
useBuiltIns: "usage"
}]],
plugins: [["#babel/plugin-transform-runtime", {
corejs: false,
helpers: true,
regenerator: true,
useESModules: true
}]]
})
]
}
I want to polyfill older browsers. According to the docs, I need to include babel-polyfill in my entry point which I did. Now babel should include only the polyfills needed (because of useBuiltIns: "usage"). However, even when specifying the newest Browsers as target, I get the full load of code into my bundle (10000 lines of code).
What I tried:
I tried useBuiltIns: "entry" which fixes it for newer browsers but its not what I want (it just includes all polyfills which are potentially needed by the browser no matter if they are actually used in the code).
change the order of the rollup plugins
not include the babel-polyfill import
I have no idea why this is happening. It would be great if someone could solve this issue. Its driving me crazy!
And if someone knows as a bonus why no sourcemap is generated I dont mind getting an answer for that, too
Hey I made a repo which explores a good babel/rollup setup utilising preset-env and useBuiltIns 'usage'.
// Rollup plugins
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input : 'main.js',
output : {
file : 'app.js',
format : 'iife',
name : 'PROJECT'
},
plugins : [
resolve(),
babel({
exclude : 'node_modules/**',
presets : [[
'#babel/env', {
useBuiltIns : 'usage'
}
]],
plugins : [
'#babel/plugin-transform-runtime'
],
runtimeHelpers : true
}),
commonjs()
]
};
Take a look https://github.com/matt3224/rollup-babel7
If you can figure out how to reduce the output further submit a PR
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}
I am trying to get my project working with Karma and SystemJS. I am using the karma-systemjs plugin with karma.
I keep getting the error below about System.import.
I believe it is because SystemJS is not being loaded by the time the karma-systemjs plugin runs. Please tell me what I am doing wrong.
Project structure
SystemJS configuration (system.conf.js)
System.config({
baseUrl: '',
defaultJSExtensions: true,
map: {
'jquery': 'vendor/kendo/js/jquery.min.js',
'angular': 'vendor/kendo/js/angular.js',
'kendo': 'vendor/kendo/js/kendo.all.min.js',
'angular-mocks': 'vendor/bower_components/angular-mocks/angular-mocks.js',
'angular-ui-router': 'vendor/bower_components/angular-ui-router/release/angular-ui-router.min.js',
'angular-toastr': 'vendor/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js',
'angular-local-storage': 'vendor/bower_components/angular-local-storage/dist/angular-local-storage.min.js'
},
paths: {
'systemjs': 'vendor/bower_components/system.js/dist/system.js',
'system-polyfills': 'vendor/bower_components/system.js/dist/system-polyfills.js'
},
meta: {
'vendor/kendo/js/jquery.min.js': {
format: 'global',
exports: '$'
},
'vendor/kendo/js/angular.js': {
format: 'global',
deps: [
'vendor/kendo/js/jquery.min.js'
],
exports: 'angular'
},
'vendor/kendo/js/kendo.all.min.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
],
exports: 'kendo'
},
'vendor/bower_components/angular-ui-router/release/angular-ui-router.min.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
]
},
'vendor/bower_components/angular-mocks/angular-mocks.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
],
exports: 'angular.mock'
},
'vendor/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
]
},
'vendor/bower_components/angular-local-storage/dist/angular-local-storage.min': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
]
}
}
});
Promise.all([
System.import('kendo'),
System.import('angular-mocks'),
System.import('angular-ui-router'),
System.import('angular-toastr'),
System.import('angular-local-storage')
]).then(function () {
System.import('angular')
.then(function (angular) {
System.import('ng/app/app.module')
.then(function (app) {
angular.bootstrap(document, ['s9.app']);
}, function (err) {
console.log(err);
});
}, function (err) {
console.log(err);
});
});
//# sourceMappingURL=system.conf.js.map
karma.conf.js
// Karma configuration
var configure = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',
transpiler: null,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['systemjs', 'jasmine'],
systemjs: {
// Path to your SystemJS configuration file
configFile: 'system.conf.js',
// Patterns for files that you want Karma to make available, but not loaded until a module
// requests them. eg. Third-party libraries.
serveFiles: [
'vendor/kendo/js/**/*.js',
'vendor/bower_components/**/*.js',
'ng/**/*.js',
'test/**/*Spec.js'
],
config: {
paths: {
'systemjs': 'vendor/bower_components/system.js/dist/system.js',
'system-polyfills': 'vendor/bower_components/system.js/dist/system-polyfills.js'
}
}
},
// list of files / patterns to load in the browser
files: [
{pattern: 'vendor/kendo/js/**/*.js', included: false},
{pattern: 'vendor/bower_components/**/*.js', included: false},
{pattern: 'ng/**/*.js', included: false},
{pattern: 'test/**/*Spec.js', included: false}
],
// 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: ['PhantomJS'],
// 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
});
};
module.exports = configure;
//# sourceMappingURL=karma.conf.js.map
Error
I fixed this by moving the bootstrap code out of the config code. Apparently when using the karma-systemjs plugin System.import is not available yet when this is called (although it is at normal runtime).
What I did: I moved the bootstrap code (i.e. Promise.all([....) into into a separate file called bootstrap.js (name is not important) and then in my index.html I added them in this order:
Also from this link (the karma system js plugin author says): https://github.com/rolaveric/karma-systemjs/issues/71
I see the problem. It's because you've got your bootstrapping code
(eg. System.import() calls) inside your SystemJS config file -
system.conf.js karma-systemjs expects just a simple System.config()
call that it can then intercept to find out where your transpiler and
polyfills are. It does this by evaluating your config file with a fake
System object which simply records whatever is passed to
System.config(). This fake object has no System.import() method, which
causes your error.
I'd recommend moving your bootstrapping code into a separate file (I
personally put it in a script tag with my HTML). Otherwise you'll run
into similar problems if you try to use systemjs-builder, and you
probably don't want angular.bootstrap() to be called at the start of
your unit tests.
I can't figure out how to make karma to not watch for changes in folder jspm_packages/.
If I try to add 'jspm_packages' into exclude section then I get following errors:
DEBUG [web-server]: serving (cached): /Users/jm/dev/monka/node_modules/gulp-helpers/node_modules/karma-jspm/src/adapter.js
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: System
at /Users/jm/dev/monka/system.config.js:1
ERROR [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: ReferenceError: Can't find variable: System
at http://localhost:9876/base/system.config.js?31f6cba38ed6c99ea3e9b4bc926e8ecfd6de8bd7:1
Here is my karma.conf.js
module.exports = function(config) {
config.set({
plugins: [
'karma-jspm',
'karma-jasmine',
'karma-beep-reporter',
'karma-verbose-reporter',
'karma-babel-preprocessor',
'karma-phantomjs-launcher'
],
basePath : '', // base path that will be used to resolve all patterns (eg. files, exclude)
frameworks : ['jspm', 'jasmine'], // frameworks to use available frameworks: https://npmjs.org/browse/keyword/karma-adapter
browsers : ['PhantomJS'], // start these browsers available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
reporters : ['progress', 'beep', 'verbose'/*, 'coverage'*/], // test results reporter to use possible values: 'dots', 'progress' available reporters: https://npmjs.org/browse/keyword/karma-reporter
singleRun : false, // Continuous Integration mode if true, Karma captures browsers, runs the tests and exits
autoWatch : true, // Enable / disable watching file and executing tests whenever any file changes
colors : true, // enable / disable colors in the output (reporters and logs)
files : [], // list of files / patterns to load in the browser
jspm: {
config : 'system.config.js',
loadFiles : ['test-unit/**/*.js'],
serveFiles : ['dist/**/**']
},
proxies: {
'/base/app' : '/base/dist/app',
'/base/common' : '/base/dist/common',
'/jspm_packages' : '/base/jspm_packages'
},
exclude: [
'coverage/**',
'typings/**',
'dist/**/*.js.map'
],
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/**/*.js' : ['babel', 'coverage']
},
babelPreprocessor: {
options: { sourceMap:'inline', modules:'system' }
},
coverageReporter: { type:'html', dir:'coverage/' }
});
};
I'm think with Karma is not possible to exclude files from being watched that should also be served.
By excluding the jspm_packages Karma stops serving system.js which is located in the jspm_packages folder and therefore System is not defined.
If you want to get rid of serving the jspm_packages during the test run you could try to run the tests after creating a self-executing bundle and just serve that bundle.
See https://github.com/jspm/jspm-cli/blob/master/docs/production-workflows.md#creating-a-self-executing-bundle
I have included the source files in the files & preprocessors section of my karma conf file. The tests run fine and the junit xml report shows the data. The html coverage just show 100% without any data. I have the similar structure for another project which is working fine but not this one. Not sure if i am missing something. Might be a very minor or silly thing i have missed.
karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '../../',
frameworks: [
'jasmine'
],
// list of files / patterns to load in the browser
files: [
'app/js/**/*.js',
'test/spec/**/*.js'
],
preprocessors: {
'app/js/**/*.js': ['coverage']
},
exclude: [],
reporters: [ 'progress', 'junit', 'coverage' ],
coverageReporter: {
type: 'html',
dir: 'test/reports/unit/coverage'
},
junitReporter: {
outputFile: 'test/reports/unit/junit/junit.xml',
suite: 'unit'
},
port: 9876,
runnerPort: 9100,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: false,
browsers: [ 'Chrome' ],
captureTimeout: 60000,
singleRun: true
});
};
my karma conf file is in test -> spec -> conf
and source files are in app -> js -> controllers/directives/services
the debug log shows its loading all the files in preprocessors but the report does not show any data "No data to display".
Use the following process:
Append the basepath to the preprocessor path:
../../app/js/**/*.js': ['coverage']
Restart karma
View the updated report