Karma/Jasmin Probleme w/Angular2 Projekt

Question

Ich habe ein Projekt, das wie folgt aussieht:

Ich versuche Karma/Jasmin arbeitet als Test-Framework zu bekommen. Ich habe versucht, dieses Projekt zu replizieren: https://github.com/juliemr/ng2-test-seed, modifiziere es auf meine Bedürfnisse. Ich habe einen Mock-Test in test Ordner, den ich versuche zu laufen. Obwohl, wenn ich versuche, die npm run test dies zu tun, was ich bekommen:

Ich bin nicht sicher, ob meine Dateipfade korrekt sind im karma-test-shim.js/karma.conf.js als ich noch relativ neu bin mit npm zu arbeiten/Knoten-Projekte.

Hier ist meine karma-test-shim.js (Dateipfade in var moduleName und onlyAppFiles Funktion befinden):

// Tun on full stack traces in errors to help debugging 
Error.stackTraceLimit = Infinity; 


jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 

// // Cancel Karma's synchronous start, 
// // we will call `__karma__.start()` later, once all the specs are loaded. 
__karma__.loaded = function() {}; 


System.config({ 
    packages: { 
    'base/src/app': { 
     defaultExtension: false, 
     format: 'register', 
     map: Object.keys(window.__karma__.files). 
      filter(onlyAppFiles). 
      reduce(function createPathRecords(pathsMapping, appPath) { 
       // creates local module name mapping to global path with karma's fingerprint in path, e.g.: 
       // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e' 
       var moduleName = appPath.replace(/^\/base\/app\/.*\/.*\//, './').replace(/\.js$/, ''); 
       pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath] 
       return pathsMapping; 
      }, {}) 

     } 
    } 
}); 

System.import('angular2/testing').then(function(testing) { 
    return System.import('angular2/platform/testing/browser').then(function(providers) { 
    testing.setBaseTestProviders(providers.TEST_BROWSER_PLATFORM_PROVIDERS, 
           providers.TEST_BROWSER_APPLICATION_PROVIDERS); 
    }); 
}).then(function() { 
    return Promise.all(
    Object.keys(window.__karma__.files) // All files served by Karma. 
    .filter(onlySpecFiles) 
    // .map(filePath2moduleName)  // Normalize paths to module names. 
    .map(function(moduleName) { 
     // loads all spec files via their global module names (e.g. 'base/src/app/hero.service.spec') 
     return System.import(moduleName); 
    })); 
}) 
.then(function() { 
    __karma__.start(); 
}, function(error) { 
    __karma__.error(error.stack || error); 
}); 


function filePath2moduleName(filePath) { 
    return filePath. 
      replace(/^\//, '').    // remove/prefix 
      replace(/\.\w+$/, '');   // remove suffix 
} 


function onlyAppFiles(filePath) { 
    return /^\/base\/app\/.*\/.*\/.*\.js$/.test(filePath) 
} 


function onlySpecFiles(path) { 
    return /_test\.js$/.test(path); 
} 

Und mein karma.conf.js:

module.exports = function(config) { 
    config.set({ 

    basePath: '', 

    frameworks: ['jasmine'], 

    files: [ 
     // paths loaded by Karma 
     {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true}, 
     {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true}, 
     {pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: true}, 
     {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true}, 
     {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true}, 
     {pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true}, 
     {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true}, 

     {pattern: 'karma-test-shim.js', included: true, watched: true}, 

     // paths loaded via module imports 
     {pattern: 'app/components/**/*.js', included: false, watched: true}, 
     {pattern: 'app/interfaces/**/*.js', included: false, watched: true}, 
     {pattern: 'app/models/**/*.js', included: false, watched: true}, 
     {pattern: 'app/services/**/*.js', included: false, watched: true}, 

     // paths loaded via Angular's component compiler 
     // (these paths need to be rewritten, see proxies section) 
     {pattern: 'app/components/**/*.html', included: false, watched: true}, 
     {pattern: 'assets/css/*.css', included: false, watched: true}, 

     // paths to support debugging with source maps in dev tools 
     {pattern: 'app/*.ts', included: false, watched: false}, 
     {pattern: 'app/components/**/*.ts', included: false, watched: true}, 
     {pattern: 'app/interfaces/**/*.ts', included: false, watched: true}, 
     {pattern: 'app/models/**/*.ts', included: false, watched: true}, 
     {pattern: 'app/services/**/*.ts', included: false, watched: true}, 
     //{pattern: 'app/**/**/*.js.map', included: false, watched: false} 
    ], 

    // proxied base paths 
    proxies: { 
     // required for component assests fetched by Angular's compiler 
     "/app/": "/base/app/" 
    }, 

    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }) 
} 

Und package.json:

{ 
    "name": "taohd-app-seed", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "npm run lite", 
    "app": "./node_modules/.bin/electron main.js", 
    "lite": "lite-server -c bs-config.json", 
    "typings": "typings", 
    "postinstall": "typings install", 
    "test": "karma start karma.conf.js" 
    }, 
    "main": "main.js", 
    "license": "MIT", 
    "dependencies": { 
    "angular2": "^2.0.0-beta.12", 
    "app-module-path": "^1.0.5", 
    "bootstrap": "^3.3.6", 
    "electron-prebuilt": "^0.36.11", 
    "es6-module-loader": "^0.17.11", 
    "es6-promise": "^3.1.2", 
    "es6-shim": "^0.35.0", 
    "graceful-fs": "^4.1.3", 
    "jspm": "^0.16.31", 
    "lodash": "^4.6.1", 
    "moment": "^2.12.0", 
    "ng2-material": "^0.2.12", 
    "polo": "^0.8.1", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "systemjs": "^0.19.22", 
    "tslint": "^3.6.0", 
    "uuid": "^2.0.1", 
    "zone.js": "^0.6.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "del": "^2.2.0", 
    "electron-debug": "^0.5.2", 
    "gulp": "^3.9.1", 
    "gulp-coverage": "^0.3.38", 
    "gulp-debug": "^2.1.2", 
    "gulp-htmllint": "0.0.7", 
    "gulp-inject": "^3.0.0", 
    "gulp-jasmine": "^2.3.0", 
    "gulp-shell": "^0.5.2", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-tslint": "^4.3.3", 
    "gulp-typescript": "^2.12.1", 
    "gulp-util": "^3.0.7", 
    "jasmine": "^2.4.1", 
    "jasmine-core": "^2.4.1", 
    "karma": "^0.13.22", 
    "karma-chrome-launcher": "^0.2.3", 
    "karma-cli": "^0.1.2", 
    "karma-jasmine": "^0.3.8", 
    "lite-server": "^2.1.0", 
    "typescript": "^1.8.9", 
    "typings": "^0.7.9" 
    }, 
    "jspm": { 
    "directories": { 
     "baseURL": "app" 
    }, 
    "dependencies": { 
     "angular": "github:angular/bower-angular@^1.5.2", 
     "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.6" 
    }, 
    "devDependencies": { 
     "babel": "npm:babel-core@^5.8.24", 
     "babel-runtime": "npm:babel-runtime@^5.8.24", 
     "core-js": "npm:core-js@^1.1.4", 
     "traceur": "github:jmcriffey/bower-traceur@0.0.93", 
     "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.93", 
     "typescript": "npm:typescript@^1.8.9" 
    } 
    } 
} 

Kann jemand finde heraus, wo e Ich gehe falsch?

Answer 1

Es scheint, dass Sie keine src Ebene in Ihrer Projektstruktur haben. So verwenden Sie diese in Ihre karma-test-shim.js Datei:

System.config({ 
    packages: { 
    'base/app': { // <----- (instead of base/src/app) 
     defaultExtension: false, 
     format: 'register', 
     map: Object.keys(window.__karma__.files). 
     filter(onlyAppFiles). 
     reduce(function createPathRecords(pathsMapping, appPath) { 
      (...) 
     }, {}) 
     } 
    } 
}); 

Ich würde auch eine pretest Aufgabe in Ihre package.json Datei hinzufügen, um Ihre Typoskript Dateien zu kompilieren, bevor Karma ausführt. Etwas wie das:

Answer 2

Ich landete es funktioniert, stellt sich heraus, ich bekam die Reihenfolge der Bau von Modulen/Lauftests falsch. Hier

ist die aktuelle Setup, ich habe .spec.js Dateien innerhalb jedes .ts/.js äquivalent:

Mein karma.conf.js

module.exports = function(config) { 
    config.set({ 

    basePath: '', 

    frameworks: ['jasmine'], 

    files: [ 
     // paths loaded by Karma 
     {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true}, 
     {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true}, 
     {pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: true}, 
     {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true}, 
     {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true}, 
     {pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true}, 
     {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true}, 

     {pattern: 'karma-test-shim.js', included: true, watched: true}, 

     // paths loaded via module imports 
     {pattern: 'app/components/**/*.js', included: false, watched: true}, 
     {pattern: 'app/interfaces/*.js', included: false, watched: true}, 
     {pattern: 'app/models/**/*.js', included: false, watched: true}, 
     {pattern: 'app/services/**/*.js', included: false, watched: true}, 

     // paths loaded via Angular's component compiler 
     // (these paths need to be rewritten, see proxies section) 
     {pattern: 'app/components/**/*.html', included: false, watched: true}, 
     {pattern: 'assets/css/*.css', included: false, watched: true}, 

     // paths to support debugging with source maps in dev tools 
     {pattern: 'app/*.ts', included: false, watched: false}, 
     {pattern: 'app/components/**/*.ts', included: false, watched: false}, 
     {pattern: 'app/interfaces/*.ts', included: false, watched: false}, 
     {pattern: 'app/models/**/*.ts', included: false, watched: false}, 
     {pattern: 'app/services/**/*.ts', included: false, watched: false}, 
     {pattern: 'app/components/**/*.js.map', included: false, watched: false}, 
     {pattern: 'app/interfaces/*.js.map', included: false, watched: false}, 
     {pattern: 'app/models/**/*.js.map', included: false, watched: false}, 
     {pattern: 'app/services/**/*.js.map', included: false, watched: false} 
    ], 

    // proxied base paths 
    proxies: { 
     // required for component assests fetched by Angular's compiler 
     "/app/": "/base/app/" 
    }, 

    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }) 
} 

Mit karma-test-shim.js

// Tun on full stack traces in errors to help debugging 
Error.stackTraceLimit = Infinity; 


jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 

// // Cancel Karma's synchronous start, 
// // we will call `__karma__.start()` later, once all the specs are loaded. 
__karma__.loaded = function() {}; 


System.config({ 
    packages: { 
    'base/app': { 
     defaultExtension: false, 
     format: 'register', 
     map: Object.keys(window.__karma__.files). 
      filter(onlyAppFiles). 
      reduce(function createPathRecords(pathsMapping, appPath) { 
       // creates local module name mapping to global path with karma's fingerprint in path, e.g.: 
       // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e' 
       var moduleName = appPath.replace(/^\/base\/app\/.*\/.*\//, './').replace(/\.js$/, ''); 
       pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath] 
       return pathsMapping; 
      }, {}) 

     } 
    } 
}); 

System.import('angular2/testing').then(function(testing) { 
    return System.import('angular2/platform/testing/browser').then(function(providers) { 
    testing.setBaseTestProviders(providers.TEST_BROWSER_PLATFORM_PROVIDERS, 
           providers.TEST_BROWSER_APPLICATION_PROVIDERS); 
    }); 
}).then(function() { 
    return Promise.all(
    Object.keys(window.__karma__.files) // All files served by Karma. 
    .filter(onlySpecFiles) 
    // .map(filePath2moduleName)  // Normalize paths to module names. 
    .map(function(moduleName) { 
     // loads all spec files via their global module names (e.g. 'base/src/app/hero.service.spec') 
     return System.import(moduleName); 
    })); 
}) 
.then(function() { 
    __karma__.start(); 
}, function(error) { 
    __karma__.error(error.stack || error); 
}); 


function filePath2moduleName(filePath) { 
    return filePath. 
      replace(/^\//, '').    // remove/prefix 
      replace(/\.\w+$/, '');   // remove suffix 
} 


function onlyAppFiles(filePath) { 
    return /^\/base\/app\/.*\/.*\/.*\.js$/.test(filePath) 
} 


function onlySpecFiles(path) { 
    return /\.spec\.js$/.test(path); 
} 

eine gulpfile.js Verwenden ts Dateien zu kompilieren (Beispiel):

gulp.task('compile-components', function() 
{ 
    del(config.components_source + '(?!.*\.spec\.js$)*.js'); 
    return gulp 
      .src(config.components_source + '*.ts', { base: "." }) 
      .pipe(debug()) 
      .pipe(tsc(tsProjectComponents)) 
      .pipe(gulp.dest(".")); 
}); 

Schritte:

1. Compile .ts Dateien
2. .spec.js Dateien erstellen w/testet
3. Lauf karma start karma.conf.js