I'm trying to set up automated testing with Karma. Although I ran into a problem.
npm start or npm install give me this error:
> concurrently "npm run tsc:w" "npm run lite"
[0] /c: /c: is a directory
[1] /c: /c: is a directory
[0] npm run tsc:w exited with code 126
[1] npm run lite exited with code 126
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Ivar\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v4.5.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 start: `concurrently "npm run tsc:w" "npm run lite" `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 start script 'concurrently "npm run tsc:w" "npm run lite" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
Before they gave me:
> karma start karma.conf.js
29 09 2016 16:49:27.659:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/systemjs.config.extras.js" does not match any file.
29 09 2016 16:49:27.679:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/app/**/*.css" does not match any file.
29 09 2016 16:49:27.691:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/test/**/*.ts" does not match any file.
29 09 2016 16:49:27.692:WARN [watcher]: Pattern "C:/Users/Ivar/documents/school/stage/workspace/webapplicatie/test/**/*.js.map" does not match any file.
29 09 2016 16:49:28.158:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
29 09 2016 16:49:28.159:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
29 09 2016 16:49:28.166:INFO [launcher]: Starting browser PhantomJS
29 09 2016 16:49:29.956:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#GGY-X69uV6wlYJOnAAAA with id 60252055
29 09 2016 16:49:30.387:WARN [web-server]: 404: /base/node_modules/systemjs/dist/system-polyfills.js
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
TypeError: undefined is not a constructor (evaluating 'System.config')
at karma-test-shim.js:30
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
TypeError: undefined is not a constructor (evaluating 'System.config')
at karma-test-shim.js:30
npm ERR! Test failed. See above for more details.
while in node_modules/systemjs/dist the sytem-polyfills.js does exist.
Now my karma config code:
module.exports = function(config) {
var appBase = 'app/'; // transpiled app JS and map files
var appSrcBase = 'app/'; // app source TS files
var appAssets = '/base/app/'; // component assets fetched by Angular's compiler
var testBase = 'test/'; // transpiled test JS and map files
var testSrcBase = 'test/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-phantomjs-launcher'),
require('karma-jasmine-html-reporter'), // click "Debug" in browser to see it
require('karma-htmlfile-reporter') // crashing w/ strange socket error
],
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',
'node_modules/reflect-metadata/Reflect.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/http://ift.tt/1KReNIi',
'node_modules/http://ift.tt/2c7PMID',
'node_modules/http://ift.tt/2cGDBrq',
'node_modules/http://ift.tt/1KReLA0',
'node_modules/http://ift.tt/2anIl3w',
'node_modules/http://ift.tt/2b8mEkP',
// 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: 'systemjs.config.js', included: false, watched: false},
{pattern: 'systemjs.config.extras.js', included: false, watched: false},
'karma-test-shim.js',
// transpiled application & spec code paths loaded via module imports
{pattern: appBase + '**/*.js', included: false, watched: true},
{pattern: testBase + '**/*.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: appSrcBase + '**/*.ts', included: false, watched: false},
{pattern: appBase + '**/*.js.map', included: false, watched: false},
{pattern: testSrcBase + '**/*.ts', included: false, watched: false},
{pattern: testBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": appAssets
},
exclude: [],
preprocessors: {},
// disabled HtmlReporter; suddenly crashing w/ strange socket error
reporters: ['progress', 'kjhtml'],//'html'],
// HtmlReporter configuration
htmlReporter: {
// Open this file to see results in browser
outputFile: '_test-output/tests.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: __dirname
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
})
}
Karma shim
// #docregion
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
var builtPath = '/base/app/';
__karma__.loaded = function () { };
function isJsFile(path) {
return path.slice(-3) == '.js';
}
function isSpecFile(path) {
return /\.spec\.(.*\.)?js$/.test(path);
}
function isBuiltFile(path) {
return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}
var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isBuiltFile);
System.config({
baseURL: '/base',
// Extend usual application package list with test folder
packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
// Assume npm: is set in `paths` in systemjs.config
// Map the angular testing umd bundles
map: {
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
},
});
System.import('systemjs.config.js')
.then(importSystemJsExtras)
.then(initTestBed)
.then(initTesting);
/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
return System.import('systemjs.config.extras.js')
.catch(function(reason) {
console.log(
'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
);
console.log(reason);
});
}
function initTestBed(){
return Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
])
.then(function (providers) {
var coreTesting = providers[0];
var browserTesting = providers[1];
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting());
})
}
// Import all spec files and start karma
function initTesting () {
console.log("init testing");
return Promise.all(
allSpecFiles.map(function (moduleName) {
console.log("module: "+moduleName);
return System.import(moduleName);
})
)
.then(__karma__.start, __karma__.error);
}
last but not least package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"webdriver:update": "webdriver-manager update"
},
"license": "ISC",
"dependencies": {
"@angular/common": "~2.0.1",
"@angular/compiler": "~2.0.1",
"@angular/core": "~2.0.1",
"@angular/forms": "~2.0.1",
"@angular/http": "~2.0.1",
"@angular/platform-browser": "~2.0.1",
"@angular/platform-browser-dynamic": "~2.0.1",
"@angular/router": "~3.0.1",
"@angular/upgrade": "~2.0.1",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.7"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server":"~2.2.2",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.2",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-spec-reporter": "0.0.13",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.4",
"phantomjs-prebuilt": "^2.1.7",
"typescript": "^2.0.3",
"typings": "^1.4.0"
}
}
Sorry for the amount of code but I can't seem to find the problem myself.