Related
I am using karma, browserify and babelify to run unit tests for angular 2.
Whenever I run it it fails with a 404 error like this
25 05 2017 11:35:22.974:WARN [web-server]: 404: /C://Users//me//git//proj-ng//modules//pack\\src//test.service.spec.js
Firefox 53.0.0 (Windows 7 0.0.0) ERROR
(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/C:\\Users\\me\\git\\proj-ng\\modules\\pack\\src\\test.s
ervice.spec.js
wrapFn#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:1055:30
ZoneDelegate.prototype.invokeTask#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:424:17
Zone.prototype.runTask#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:191:28
ZoneTask/this.invoke#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:486:28
Error loading http://localhost:9876/C:\\Users\\me\\git\\proj-ng\\modules\\pack\\src\\test.service.spec.js as "C:\\Users\\me\\git\\proj-ng\\modules\\pack\\src\\test.service.spec.js" from http://localhost:9876/src/test.service.spec.js
I have checked that the test files are located at the location it is complaining about. I have tried many variations and am out of ideas by now on what can be wrong.
Below is my karma.conf.js.
(function () {
"use strict";
module.exports = function (config) {
config.set({
basePath: "",
frameworks: ["browserify","jasmine"],
browsers: ["Firefox"],
reporters: ["mocha", "coverage"],
// Source files that you wanna generate coverage for.
preprocessors: {"src/**/!(*spec).js": ["coverage", "sourcemap"], "src/**/*.js": ["browserify"]},
// "src/**/!(*spec).js": ["browserify"]},
browserify: {
debug: true,
transform: [ "babelify" ]
},
coverageReporter: {
dir: "code-coverage/",
reporters: [
{type: "text-summary"},
{type: "json"},
{type: "html"}
]
},
files: [
"node_modules/es6-shim/es6-shim.js",
"node_modules/reflect-metadata/Reflect.js",
"node_modules/systemjs/dist/system-polyfills.js",
"node_modules/systemjs/dist/system.src.js",
"node_modules/zone.js/dist/zone.js",
"node_modules/zone.js/dist/long-stack-trace-zone.js",
"node_modules/zone.js/dist/async-test.js",
"node_modules/zone.js/dist/fake-async-test.js",
"node_modules/zone.js/dist/sync-test.js",
"node_modules/zone.js/dist/proxy.js",
"node_modules/zone.js/dist/jasmine-patch.js",
{pattern: "node_modules/rxjs/**/*.js", included: false, watched: false},
{pattern: "node_modules/rxjs/**/*.js.map", included: false, watched: false},
{pattern: "node_modules/angular-2-local-storage/**/*.js", included: false, watched: false},
{pattern: "karma-test-shim.js", included: true, watched: true},
{pattern: "node_modules/#angular/**/*.js", included: false, watched: true},
{pattern: "node_modules/#angular/**/*.js.map", included: false, watched: true},
{pattern: "src/**/*.js", included: false, watched: true},
// paths to support debugging with source maps in dev tools
{pattern: "src/**/*.ts", included: false, watched: false},
{pattern: "src/**/*.js.map", included: false, watched: false}
],
proxies: {
// required for component assets fetched by Angular"s compiler
"/src/": "/base/src/"
},
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: false,
singleRun: true
});
};
}());
my gulp test task is simply
const Server = require("karma").Server;
gulp.task("test", () => {
new Server({
configFile: __dirname + '/karma.conf.js'
}).start();
});
I am trying to introduce unit testing to my Angular 4 project. I am using Karma for it. I have done the configuration. It shows a connected screen. But it shows not tests! I have one test under src/app/ directory.
This error appears in console.
{
"originalErr": {
"__zone_symbol__currentTask": {
"type": "microTask",
"state": "notScheduled",
"source": "Promise.then",
"zone": "<root>",
"cancelFn": null,
"runCount": 0
}
},
"__zone_symbol__currentTask": {
"type": "microTask",
"state": "notScheduled",
"source": "Promise.then",
"zone": "<root>",
"cancelFn": null,
"runCount": 0
}
}
1st.spec.ts
describe('1st tests', () => {
it('true is true', () => expect(true).toBe(true));
});
karma.config.js
module.exports = function(config) {
var appBase = 'src/'; // transpiled app JS and map files
var appAssets = '/base/app/'; // component assets fetched by Angular's compiler
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'src/testing/'; // transpiled test JS and map files
var testingSrcBase = 'src/testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{ pattern: 'node_modules/#angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/#angular/**/*.js.map', included: false, watched: false },
{ pattern: appBase + '/systemjs.config.js', included: false, watched: false },
{ pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.js', included: false, watched: true },
// Asset (HTML & CSS) paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{ pattern: appBase + '**/*.html', included: false, watched: true },
{ pattern: appBase + '**/*.css', included: false, watched: true },
// Paths for debugging with source maps in dev tools
{ pattern: appBase + '**/*.ts', included: false, watched: false },
{ pattern: appBase + '**/*.js.map', included: false, watched: false },
{ pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for modules fetched by SystemJS
'/base/src/node_modules/': '/base/node_modules/'
},
exclude: [],
preprocessors: {},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
Karma Connection Screen:
Any lead to help, will be helpful.
After upgrading an application to rc-7 and running my unit tests to be sure nothing broke, I got this error message on about half of my unit tests.
"Error: Zone.js has detected that ZoneAwarePromise '(window|global).Promise' has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js) in node_modules/zone.js/dist/zone.js (line 21)"
The closest I thing I can think of is that I mock responses from http calls in my unit tests by manually returning observables.
This is an Angular2 application using Jasmine and Karma for unit testing.
UPDATE
So it would seem this is likely a loading order issue as per the error message, however I am not loading the polyfills anywhere I can determine unless I am accidentally grabbing them. I've attached my karma.conf.js and systemjs.conf.js to aid in finding the error.
Karma.conf.js
module.exports = function(config) {
var gulpConfig = require('../gulp/config')();
/**
* List of npm packages that imported via `import` syntax
*/
var dependencies = [
'#angular',
'lodash',
'rxjs'
];
var configuration = {
basePath: '../../',
browserNoActivityTimeout: 20000,
frameworks: ['jasmine'],
browsers: ['PhantomJS'],
reporters: ['progress', 'coverage'],
preprocessors: {},
// Generate json used for remap-istanbul
coverageReporter: {
includeAllSources: true,
dir: 'coverage/appCoverage/remap/',
reporters: [
{ type: 'json', subdir: 'report-json' }
]
},
files: [
'node_modules/reflect-metadata/Reflect.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
'node_modules/angular/angular.js',
'node_modules/core-js/client/shim.min.js',
'node_modules/systemjs/dist/system.src.js'
],
// proxied base paths
proxies: {
// required for component assests fetched by Angular's compiler
"/src/": "/base/src/",
"/app/": "/base/src/app/",
"/node_modules/": "/base/node_modules/"
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
//browserNoActivityTimeout: 100000
};
configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];
var files = [
gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
gulpConfig.src + 'systemjs.conf.js',
'config/test/karma-test-shim.js',
createFilePattern(gulpConfig.tmpApp + '**/*.js', { included: false }),
createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', { included: false }),
createFilePattern(gulpConfig.app + '**/*.html', { included: false }),
createFilePattern(gulpConfig.app + '**/*.css', { included: false }),
createFilePattern(gulpConfig.app + '**/*.ts', { included: false, watched: false }),
createFilePattern(gulpConfig.tmpApp + '**/*.js.map', { included: false, watched: false })
];
configuration.files = configuration.files.concat(files);
dependencies.forEach(function(key) {
configuration.files.push({
pattern: 'node_modules/' + key + '/**/*.js',
included: false,
watched: false
});
});
if (process.env.APPVEYOR) {
configuration.browsers = ['IE'];
configuration.singleRun = true;
configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
}
config.set(configuration);
// Helpers
function createFilePattern(path, config) {
config.pattern = path;
return config;
}
}
UPDATE
My solution involved ensuring all my zone.js files were being loaded last in karma.conf.js. I'm guessing something else I have included was also including the polyfill, but was being loaded after zone.js so the error was raised. After moving zone.js to the end everything worked fine.
I encountered the same problem. (Angular 2 RC.7 Jasmine Karma) It was due to the order I was loading the test files in my karma.conf.js. I was loading /zone.js/dist/zone.js before /systemjs/dist/system-polyfills.js. Changing the order of the files to load the zone.js AFTER the systemjs polyfills resolved this problem.
Here is my current setup in karma.conf.js that resolved the error for me.
files: [
{pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false},
{pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false},
{pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false},
{pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/proxy.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/sync-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/long-stack-trace-zone.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/jasmine-patch.js', included: true, watched: false},
{pattern: 'config/karma-test-shim.js', included: true, watched: true},
// Distribution folder.
{pattern: 'dist/**/*', included: false, watched: true}
],
I also had to include es6-promise before zone.js. HTH.
Just to add my experience on this if someone makes the same stupid error as I did. Using ng I had the following in my scripts section of .angular-cli.json:
...
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/core-js/client/shim.min.js"
],
...
I don't even remember, why the heck I put shim.min.js there in the first place. But anyway, after removing it, my test cases now run flawlessly:
...
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
I am trying to build AngularJS project with grunt (Ubuntu 14.04), but when running it eats 100% CPU is extremely slow.
Here is my grunfile
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-typescript');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
typescript: {
home: {
src: ['src/routes/home.ts'],
dest: 'build/compiled_app/routes/home.js',
options: {
ignoreTypeCheck: false
}
},
controller_tests: {
src: ['tests/unit/controller/*Test.ts'],
dest: 'tests/build',
options: {
ignoreTypeCheck: false
}
},
services_tests: {
src: ['tests/unit/services/*.ts'],
dest: 'tests/build/ServicesTests.js',
options: {
ignoreTypeCheck: false
}
},
filters_tests: {
src: ['tests/unit/filters/*.ts'],
dest: 'tests/build/FiltersTests.js',
options: {
ignoreTypeCheck: false
}
}
},
less: {
options: {
paths: ['src/less'],
yuicompress: true,
nospawn: true,
livereload: true
},
compile: {
expand: true,
cwd: 'src/less',
src: '**/*.less',
dest: 'build/assets/css/',
ext: '.css'
}
},
copy: {
assets: {
expand: true,
cwd: 'assets/',
src: ['**', '!root_content/**'],
dest: 'build/assets'
},
root_content: {
expand: true,
cwd: 'assets/root_content/',
src: '**',
dest: 'build/'
},
min_js: {
expand: true,
cwd: 'build/compiled_app/',
src: ['**/*.js', '*.js'],
dest: 'build/compiled_app/',
ext: '.min.js'
}
},
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
app_pages: {
expand: true,
cwd: 'pages/',
src: ['**/*.html', '*.html'],
dest: 'build/'
},
app_views: {
expand: true,
cwd: 'src/views',
src: ['**/*.html', '*.html'],
dest: 'build/compiled_app/views',
filter: 'isFile'
}
},
uglify: {
options: {
mangle: false
},
app: {
expand: true,
cwd: 'build/compiled_app/',
src: '**/*.js',
dest: 'build/compiled_app/',
ext: '.min.js'
}
},
karma: {
unit: {
basePath: '',
frameworks: ['jasmine'],
files: [
{pattern: 'tests/assets/javascripts/jquery-1.7.2.js', included: true},
{pattern: 'tests/assets/javascripts/angular.js', included: true},
{pattern: 'tests/assets/javascripts/angular-route.js', included: true},
{pattern: 'tests/assets/javascripts/angular-resource.js', included: true},
{pattern: 'tests/assets/javascripts/angular-cookies.js', included: true},
{pattern: 'tests/assets/javascripts/angular-ipcookie.min.js', included: true},
{pattern: 'tests/assets/javascripts/angular-mocks.js', included: true},
{pattern: 'tests/assets/javascripts/async.min.js', included: true},
{pattern: 'tests/assets/javascripts/underscore-min.js', included: true},
{pattern: 'assets/javascripts/ng-infinite-scroll.js', included: true},
{pattern: 'assets/javascripts/ui-bootstrap-0.6.0.min.js', included: true},
{pattern: 'assets/javascripts/angular-strap.min.js', included: true},
{pattern: 'build/compiled_app/*.js', included: true},
{pattern: 'build/compiled_app/routes/*.js', included: true},
{pattern: 'tests/build/**/*.js', included: true}
],
preprocessors: { '**/tests/build/src/**/*.js': 'coverage' },
reporters: ['progress', 'coverage', 'junit'],
singleRun: true,
browsers: ['PhantomJS'],
coverageReporter: {
type: 'cobertura',
dir: 'tests/coverage/'
},
junitReporter: {
outputFile: 'tests/coverage/test-results.xml',
suite: ''
}
},
e2e: {
basePath: '',
files: [
{pattern: 'tests/assets/javascripts/jquery-1.7.2.js', included: true},
{pattern: 'tests/assets/javascripts/angular.js', included: true},
{pattern: 'tests/assets/javascripts/angular-route.js', included: true},
{pattern: 'tests/assets/javascripts/angular-resource.js', included: true},
{pattern: 'tests/assets/javascripts/angular-cookies.js', included: true},
{pattern: 'tests/assets/javascripts/angular-ipcookie.min.js', included: true},
{pattern: 'tests/assets/javascripts/angular-mocks.js', included: true},
{pattern: 'tests/assets/javascripts/async.min.js', included: true},
{pattern: 'tests/assets/javascripts/underscore-min.js', included: true},
{pattern: 'assets/javascripts/ng-infinite-scroll.js', included: true},
{pattern: 'build/compiled_app/*.js', included: true},
{pattern: 'build/compiled_app/routes/*.js', included: true},
{pattern: 'tests/e2e/*.js', included: true}
],
autoWatch: false,
browsers: ['Chrome'],
frameworks: ['ng-scenario'],
singleRun: true,
plugins: [
'karma-junit-reporter',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-jasmine',
'karma-ng-scenario'
],
junitReporter: {
outputFile: 'test_out/e2e.xml',
suite: 'e2e'
}
}
},
clean: {
output: ['build/', 'tests/build', 'tests/coverage']
},
watch: {
typescript: {
files: ['src/**/*.ts'],
tasks: ['package-js'],
options: {
debounceDelay: 500
}
},
// Watch task for html partials and main pages
// It calles task to package html in correct folder
html: {
files: ['src/**/*.html', 'pages/**/*.html'],
tasks: ['package-html'],
options: {
debounceDelay: 500
}
},
// Watch task for less files. Will execute task to compile
// less files and package them in correct folder
less: {
files: ['src/**/*.less'],
tasks: ['package-less'],
options: {
debounceDelay: 500
}
}
},
compress: {
main: {
options: {
mode: 'tgz',
archive: 'build/landing.tar.gz'
},
expand: true,
cwd: 'build',
src: ['**/*'],
pretty: true
}
}
});
grunt.registerTask('package-js', ['typescript', 'copy:min_js']);
grunt.registerTask('package-html', ['htmlmin']);
grunt.registerTask('package-less', ['less']);
grunt.registerTask('compile', ['less', 'typescript']);
grunt.registerTask('app', ['compile', 'htmlmin:app_pages', 'htmlmin:app_views']);
grunt.registerTask('assets', ['copy:assets', 'copy:root_content']);
grunt.registerTask('package', ['app', 'assets', 'uglify:app']);
grunt.registerTask('default', ['clean', 'package']);
grunt.registerTask('build', ['default', 'compress']);
grunt.registerTask('test', ['clean', 'typescript', 'karma:unit']);
grunt.registerTask('tests', ['test']);
grunt.registerTask('dev', ['app', 'copy:min_js']);
};
I have been using the same for a while without any problem, and all was fine! It has started by a sudden and I tried several things to boosting it without any result. I assume it is not connected with the grunt itself, but more to the system which I am using (it's fine on other OS's). What can be a problem?
UPDATE:
After re-installing grunt-contrib-uglify everything seems to be fine. Still uglify task takes one minute to completed, but that more or less fine, considering the amount my modules to be compiled.
You can use time-grunt to output data about which task is causing the problem. You can then focus your efforts on optimizing that particular task.
https://github.com/sindresorhus/time-grunt
Disclosure: This is a boss library that I have nothing to do with.
I would be tempted to update all the packages. I work on the grunt-ts team and we have had file watching randomly giving us 100% cpu both with the watch library that karma uses and the one that grunt-watch uses
If you have lots of grunt modules then jit-grunt might help. It only loads the grunt modules required for the task you are running, rather than trying to load every single one each time.
You can see the implementation here with load-grunt-config here:
http://ia.njamieson.co.uk/2015/03/27/speeding-up-grunt-initial-load-jit-grunt-and-load-grunt-config/
Add interval in options:
options: {
interval: 5007,
nospawn: true,
livereload: true
}
I'm trying to accomplish a Jasmine test (using Karma) to validate JSON config file. Ideally, my app would simply load a JSON file into app.js, then let me parse through to check for server name.
my file app-config.json :
{
"api_url" : "server.loc",
"prefix" : "api",
}
my app.js :
var config = $.getJSON('/js/config/app-conf.json');
var server, prefix;
config.done(function(data) {
server = data.api_url;
prefix = data.prefix;
});
my karma-conf.js :
// list of files / patterns to load in the browser
files: [
'jasmine.js',
'adapter.js',
'angular.js',
'angular-resource.js',
'angular-route.js',
'angular-translate.js',
'angular-cookies.js',
'angular-mocks.js',
'jquery.min.js',
'app.js',
{pattern: 'scripts/*.js', watched: true, included: true, served: true},
{pattern: 'tests/unit/*Spec.js', watched: true, included: true, served: true},
{pattern: 'config/app-conf.json', watched: true, included: false, served: true}
],
When i start test i get this message in browser console :
GET http:// localhost:9876/js/config/app-conf.json [HTTP/1.1 404 Not Found 1ms]
Thinks for help :)