I'm getting a script error every time I try to load the angularjs to a test file.
When I try to put the angularjs in the requirejs define block, I get an error.
karma conf:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'C:/workspaces/trunk/pearl/client/components/angular/angular.js', included: false},
{pattern: '../components/angular-mocks/angular-mocks.js', included: false},
{pattern: '**/*Spec.js', included: false},
'test-main.js'
],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: false,
browsers: ['PhantomJS'],
captureTimeout: 60000,
singleRun: true
});
};
test conf:
var tests = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
if (/Spec\.js$/.test(file)) {
tests.push(file);
}
}
}
requirejs.config({
paths: {
'angular': '../components/angular/angular',
'angular-mocks': '../components/angular-mocks/angular-mocks'
},
shim: {
'angular': {exports: 'angular'},
'angular-mocks': {
deps: ['angular']
}
},
// ask Require.js to load these files (all our tests)
deps: tests,
// start test run, once Require.js is done
callback: window.__karma__.start
});
test file:
define(['angular'], function () {
describe('example test', function () {
it('should pass the test', function () {
expect(true).toBe(true);
})
});
});
When i try to run this, I get this error message:
PhantomJS 1.9.1 (Windows 7): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
PhantomJS 1.9.1 (Windows 7) ERROR
Error: Script error for: angular
http://requirejs.org/docs/errors.html#scripterror
at C:/workspaces/trunk/pearl/client/node_modules/karma-requirejs/lib/require.js:138
PhantomJS 1.9.1 (Windows 7): Executed 0 of 0 ERROR (0.06 secs / 0 secs)
All files loaded as you can see here:
C:\workspaces\trunk\pearl\client\example>grunt test
Running "karma:unit" (karma) task
DEBUG [plugin]: Loading karma-* from C:\workspaces\trunk\pearl\client\node_modules
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-chrome-launcher.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-coffee-preprocessor.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-firefox-launcher.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-html2js-preprocessor.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-jasmine.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-phantomjs-launcher.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-requirejs.
DEBUG [plugin]: Loading plugin C:\workspaces\trunk\pearl\client\node_modules/karma-script-launcher.
DEBUG [plugin]: Loading inlined plugin (defining ).
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
DEBUG [launcher]: Creating temp dir at C:\Users\nirk\AppData\Local\Temp\karma-30300678
DEBUG [launcher]: C:\Program Files (x86)\phantomjs\phantomjs.exe C:\Users\nirk\AppData\Local\Temp\karma-30300678/capture.js
DEBUG [watcher]: Resolved files:
C:/workspaces/trunk/pearl/client/node_modules/karma-requirejs/lib/require.js
C:/workspaces/trunk/pearl/client/node_modules/karma-requirejs/lib/adapter.js
C:/workspaces/trunk/pearl/client/node_modules/karma-jasmine/lib/jasmine.js
C:/workspaces/trunk/pearl/client/node_modules/karma-jasmine/lib/adapter.js
C:/workspaces/trunk/pearl/client/components/angular/angular.js
C:/workspaces/trunk/pearl/client/example/welcomeScreen/welcomScreenSpec.js
C:/workspaces/trunk/pearl/client/example/test-main.js
Why does the angularjs shows an error?
Related
Problem:
Attempting to integrate SystemJS config with Karma using karma-systemjs, however Karma is complaining about not being able to find the package.json file for each import:
...
10 07 2017 13:38:15.107:WARN [web-server]: 404: /node_modules/angular-mocks/package.json
10 07 2017 13:38:15.380:WARN [web-server]: 404: /node_modules/moment/package.json
10 07 2017 13:38:15.382:WARN [web-server]: 404: /node_modules/angular/package.json
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/node_modules/angular-mocks/package.json
Error loading http://localhost:9876/node_modules/angular-mocks/package.json
Error loading build/js/app.spec.js
PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.945 secs / 0 secs)
Above has been truncated, but there are several more missing package.json warnings above the output. Also these errors only relate to Karma, actually application itself runs fine with below setup.
Dependency Versions:
"karma": "1.7.0"
"karma-jasmine": "1.1.0"
"karma-systemjs": "0.16.0"
"systemjs": "0.19.47"
SystemJS Config:
(Referenced from: https://github.com/systemjs/systemjs/issues/767#issuecomment-139515090)
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
'*': './node_modules/*',
},
packageConfigPaths: ['./node_modules/*/package.json'],
map: {
'systemjs': './node_modules/systemjs/dist/system.js',
'system-polyfills': './node_modules/systemjs/dist/system-polyfills.js',
'babel': './node_modules/babel-core/browser.js',
'angular-feature-flags': './node_modules/angular-feature-flags/dist/featureFlags.min.js',
crypto: '#empty',
fs: '#empty',
stream: '#empty'
}
});
Karma Config:
module.exports = function (config) {
"use strict";
config.set({
autoWatch: true,
singleRun: false,
port: 9876,
frameworks: ["systemjs", "jasmine"],
babelPreprocessor: {
options: {
compact: true
}
},
files: [
"node_modules/phantomjs-polyfill-object-assign/object-assign-polyfill.js",
{pattern: "app/assets/images/**/*", watched: false, included: false, served: true},
"build/**/*spec*.js"
],
systemjs: {
configFile: "./config.js",
serveFiles: [
'./build/**/*.js'
]
},
browsers: ["PhantomJS"],
reporters: ["spec"]
});
};
karma-systemjs is supposed to read your SystemJS configuration and automatically tell karma to serve the files that you tell SystemJS about. However, I looked at the code of karma-systemjs and I don't see any provision there to deal with packageConfigPaths. (And the project needs a new maintainer, which does not inspire confidence.) Therefore, you should add an element to your files configuration like:
{ pattern: "node_modules/**/package.json", included: false }
I'm suggesting a pattern with ** so that you can automatically handle paths like node_modules/#angular/core/package.json, which are more than one level deep.
I don't know how to fix this issue. I get no errors other than the one above. Here are my config files:
./webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app/app.jsx',
output: { path: __dirname, filename: 'app.js' },
port: 9090,
devServer: {
contentBase: './src',
hot: true,
port: 9090,
publicPath: '/assets/',
noInfo: false
},
resolve: ['.js', '.jsx', ''],
module: {
loaders: [
{
test: /.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
./karma.conf.js
var webpackConfig = require('./webpack.config');
webpackConfig.devtool = 'inline-source-map';
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'chai', 'sinon', 'sinon-chai'],
plugins: [
'karma-chrome-launcher',
'karma-mocha',
'karma-chai',
'karma-sinon',
'karma-sinon-chai',
'karma-sourcemap-loader',
'karma-webpack'
],
files: [
'tests.webpack.js'
],
exclude: [],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true,
});
}
./tests.webpack.js
'use strict';
require('babel-polyfill');
require('core-js/fn/object/assign');
var context = require.context('./test', true, /Test\.jsx$/);
context.keys().forEach(context);
An example test file (test/app/AppTest.jsx):
'use strict';
var TestUtils = require('react-addons-test-utils');
import {expect} from 'chai';
describe('App', () => {
it('should display correct text on render', () => {
let component = TestUtils.renderIntoDocument(<App/>);
expect('hello').to.equal('hello');
});
});
Here is karma debug output (I removed the times, so it was more readable):
DEBUG: [config]: autoWatch set to false, because of singleRun
DEBUG [plugin]: Loading plugin karma-chrome-launcher.
DEBUG [plugin]: Loading plugin karma-mocha.
DEBUG [plugin]: Loading plugin karma-chai.
DEBUG [plugin]: Loading plugin karma-sinon.
DEBUG [plugin]: Loading plugin karma-sinon-chai.
DEBUG [plugin]: Loading plugin karma-sourcemap-loader.
DEBUG [plugin]: Loading plugin karma-webpack.
DEBUG [web-server]: Instantiating middleware
DEBUG [preprocessor.sourcemap]: base64-encoded source map for /Users/gasim/Stack/gasim/gasim-frontend/tests.webpack.js
INFO [karma]: Karma v1.1.0 server started at http://localhost:9876/
INFO [launcher]: Launching browser Chrome with unlimited concurrency
INFO [launcher]: Starting browser Chrome
DEBUG [temp-dir]: Creating temp dir at /var/folders/0q/z4cbhb7x49jgk2ycw4f9hxd00000gn/T/karma-37005516
DEBUG [launcher]: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --user-data-dir=/var/folders/0q/z4cbhb7x49jgk2ycw4f9hxd00000gn/T/karma-37005516 --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-background-timer-throttling http://localhost:9876/?id=37005516
DEBUG [web-server]: serving: /Users/gasim/Stack/gasim/gasim-frontend/node_modules/karma/static/client.html
DEBUG [web-server]: serving: /Users/gasim/Stack/gasim/gasim-frontend/node_modules/karma/static/karma.js
DEBUG [karma]: A browser has connected on socket /#ZLT5diBbmtOJweMIAAAA
DEBUG [web-server]: upgrade /socket.io/?EIO=3&transport=websocket&sid=ZLT5diBbmtOJweMIAAAA
DEBUG [web-server]: serving: /Users/gasim/Stack/gasim/gasim-frontend/node_modules/karma/static/favicon.ico
INFO [Chrome 51.0.2704 (Mac OS X 10.11.5)]: Connected on socket /#ZLT5diBbmtOJweMIAAAA with id 37005516
DEBUG [launcher]: Chrome (id 37005516) captured in 2.52 secs
DEBUG [middleware:karma]: custom files null null
DEBUG [middleware:karma]: Serving static request /context.html
DEBUG [web-server]: serving: /Users/gasim/Stack/gasim/gasim-frontend/node_modules/karma/static/context.html
DEBUG [web-server]: serving: /Users/gasim/Stack/gasim/gasim-frontend/node_modules/karma/static/context.js
Chrome 51.0.2704 (Mac OS X 10.11.5) ERROR
You need to include some adapter that implements __karma__.start method!
What really interests me is the following line in the debug output:
DEBUG [middleware:karma]: custom files null null
Why does it say null null? Does this mean files for tests are empty or something?
The problem here in this line here:
frameworks: ['mocha', 'chai', 'sinon', 'sinon-chai'],
There is no need to include chai or sinon. They were the ones giving me errors. So, I only kept mocha and sinon-chai and I just load chai and sinon from within my test scripts.
I'm trying to set up karma tests with Jasmine on my Angular project.
I can't get basic test
`it("dummy", function() {
expect(true).toBe(true);`
to run, and I'm getting the error:
PhantomJS 1.9.8 (Linux 0.0.0) ERROR
Error: Cannot find module 'gulp'
This is my gulp test task:
gulp.task('test', function(coverage) {
gulp.src('dummy')
.pipe(karma({
configFile: 'karma.conf.js',
action: 'run'
}))
.on('error', function(err) {
// Make sure failed tests cause gulp to exit non-zero
throw err;
});
});
And this is my karma conf file:
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['browserify', 'jasmine'],
plugins : [
'karma-browserify',
'karma-jasmine',
'karma-phantomjs-launcher'
],
preprocessors: {
'src/app/**/*.spec.js': [ 'browserify' ],
'src/components/**/*.spec.js': [ 'browserify' ],
'src/services/**/*.spec.js': [ 'browserify' ]
},
// list of files / patterns to load in the browser
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/**/*.js',
'src/**/*.spec.js'
],
// list of files / patterns to exclude
exclude: [],
// web server port
port: 8080,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
Please help me stackoverflow you're my only hope!
The most common question: did you install gulp correctly?
npm install gulp
Also check which files you are loading into the files property in karma.conf.js. There should be only your 3rd party libraries js files, your custom js files and your test files.
There's also a chance that your gulp task is not correct but since I often use grunt, I can't really help in that part :P
I have been trying to setup the Karma config for a new angular project that uses the Angular Deferred Bootstrap to load a config file (JSON). When Karma loads it gives me errors that it cannot find the app.json file.
Here is my angular module.
angular.module('CareerPortal', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize']);
// Defer the application until we have the configuration for the app!
deferredBootstrapper.bootstrap({
element: document.body,
module: 'MyApp',
resolve: {
configuration: ['$http', function ($http) {
return $http.get('app.json');
}]
}
});
Here is my karma config
function listFiles() {
var wiredepOptions = _.extend({}, conf.wiredep, {
dependencies: true,
devDependencies: true
});
return wiredep(wiredepOptions).js
.concat([
path.join(conf.paths.tmp, '/serve/app/index.module.js'),
path.join(conf.paths.src, '/**/*.spec.js'),
path.join(conf.paths.src, '/**/*.mock.js'),
path.join(conf.paths.src, '/**/*.html')
]);
}
module.exports = function (config) {
var configuration = {
files: listFiles(),
singleRun: true,
autoWatch: false,
debug: true,
frameworks: ['jasmine'],
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'CareerPortal'
},
browsers: ['PhantomJS'],
plugins: [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'src/**/*.html': ['ng-html2js']
}
};
config.set(configuration);
};
And then the JSON file is just a standard JSON file.
Here is the error that I get
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket 6MHhNTNq1d3djLp7R0z3 with id 21194787
WARN [web-server]: 404: /app.json
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.001 secs / 0 secs)
[18:23:44] Finished 'test' after 1.71 s
I'm trying to set up WebStorm to develop AngularJS. I've followed the instructions from JetBrains and I'm trying to run the test from that tutorial.
describe('PhoneCat controllers', function() {
beforeEach(module('phonecatApp'));
describe('PhoneListCtrl', function(){
it('should create "phones" model with 3 phones', inject(function($controller) {
var scope = {},
ctrl = $controller('PhoneListCtrl', { $scope: scope });
expect(scope.phones.length).toBe(3);
}));
});
});
I'm getting the following error
"C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\JetBrains\WebStorm 7.0.3\plugins\js-karma\js_reporter\karma-intellij\lib\intellijRunner.js" --karmaPackageDir=C:\Users\L\node_modules\karma --serverPort=9876 --urlRoot=/
Testing started at 21:02 ...
ReferenceError: module is not defined
at null.<anonymous> (C:/Users/L/WebstormProjects/AngularJS/test/unit/ControllerTests.js:4:16)
at C:/Users/L/WebstormProjects/AngularJS/test/unit/ControllerTests.js:3:1
Process finished with exit code 0
My directory layout is
test/unit/ControllerTest.js
test/karma.conf.js
karma.conf.js below
// Karma configuration
// Generated on Sun Feb 16 2014 20:49:06 GMT+0000 (GMT Standard Time)
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// frameworks to use
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
{pattern: '*.js', included: true},
{pattern: 'unit/*.js', included: true}
],
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
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, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: ['Chrome'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
angular-mocks.js is missing
See http://devnet.jetbrains.com/thread/452824?tstart=0
in karma.conf.js should change to :
basePath: './',
$files: [
{pattern: './*.js', included: true},
{pattern: './unit/*.js', included: true}
],