Karma / Jasmine问题与Angular2项目 [英] Karma/Jasmine Issues w/ Angular2 Project
本文介绍了Karma / Jasmine问题与Angular2项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个项目如下：
我试图让Karma / Jasmine作为测试框架。我尝试复制这个项目：
我不确定我的文件路径是否正确 karma-test-shim.js / karma.conf.js 因为我还是处理npm / node项目的新手。
这是我的 karma-test-shim.js （文件路径位于 var moduleName 和 onlyAppFiles function）：
//在完整堆栈跟踪中调整错误以帮助调试
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
// //取消Karma的同步启动，
// //我们将在加载所有规格后调用`__karma __。start（）`。
__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）{
/ /创建本地模块名称映射到全局路径，路径中有karma的指纹，例如：
//'。/ machine.service'：'/ base / src / app / machine.service.js？f4523daf879cfb7310ef6242682ccf10b2041b3e'
var moduleName = appPath.replace（/ ^ \ / base \ / app \ /.* \ /.* \ //，'。/'）。renplace（/\。js $ /，' '）;
pathsMapping [moduleName] = appPath +'？'+ window .__ karma __。files [appPath]
return pathsMapping;
}，{}）
}
}
}）;
System.import（'angular2 / testing'）。然后（函数（测试）{
返回System.import（'angular2 / platform / testing / browser'）。然后（函数（提供者）{
testing.setBaseTestProviders（providers.TEST_BROWSER_PLATFORM_PROVIDERS，
providers.TEST_BROWSER_APPLICATION_PROVIDERS）;
}）;
}）。then（function（）{
return Promise .all（
Object.keys（window .__ karma __。files）//由Karma提供的所有文件。
.filter（onlySpecFiles）
// .map（filePath2moduleName）//规范化路径到模块名。
.map（函数（moduleName）{
//通过其全局模块名称加载所有spec文件（例如'base / src / app / hero.service.spec'）
return System.import（moduleName）;
}））;
}）
.then（function（）{
__karma __。start（）;
}，function （错误）{
__karma __。error（error.stack || error）;
}）;
函数filePath2moduleName（filePath）{
返回filePath。
替换（/ ^ \ //，''）。 // remove / prefix
replace（/\.\w + $ /，''）; //删除后缀
}
function onlyAppFiles（filePath）{
return /^\/base\/app\/.*\/ 。* \ /.* \。js $ / .test（filePath）
}
仅函数SpecFiles（path）{
return / _test\ 。的.js $ /测试（路径）;
}
我的 karma.conf.js ：
module.exports = function（config）{
config.set（{
basePath：''，
框架：['jasmine']，
文件：[
//由Karma $ b $加载的路径b {pattern：'node_modules / systemjs / dist / system-polyfills.js'，included：true，watched：true}，
{pattern：'node_modules / systemjs / dist / system.src.js'，包括： true，watched：true}，
{pattern：'node_modules / es6-shim / es6-shim.js'，included：true，watched：true}，
{pattern：'node_modules / angular2 / bundles /angular2-polyfills.js'，包括：true，watched：true}，
{pattern：'node_modules / rxjs / bundles / Rx.js'，包括：true，watched：true}，
{ pattern：'node_modules / angular2 / bundles / angular2.js'，包括：true，watched：true}，
{pattern：'node_modules / angular2 / bundles / testing.dev.js'，包括：true，watched ：true}，
{pattern：'karma-test-shim.js'，包含：true，watched：true}，
//通过模块导入加载的路径
{pattern：'app / components / ** / * .js'，包括：false，watched：true}，
{pattern：'app / interfaces / ** / * .js'，包括： false，watched：true}，
{pattern：'app / models / ** / * .js'，included：false，watched：true}，
{pattern：'app / services / ** /*.js'，包括：false，watched：true}，
//通过Angular的组件编译器加载的路径
//（这些路径需要重写，请参阅代理部分）
{pattern：'app / components / ** / * .html'，包括：false，watched：true}，
{pattern：'assets / css / * .cs'，包括：false，观看：true}，
//支持在dev工具中使用源映射进行调试的路径
{pattern：'app / * .ts'，包含：false，watched：false}，
{pattern：'app / components / ** / * .ts'，包括：false，watche d：true}，
{pattern：'app / interfaces / ** / * .ts'，包括：false，watched：true}，
{pattern：'app / models / ** / * .ts'，包括：false，watched：true}，
{pattern：'app / services / ** / * .ts'，包括：false，watched：true}，
// {pattern ：'app / ** / ** / * .js.map'，包括：false，watched：false}
]，
//代理基路径
代理： {
//由Angular编译器获取的组件声明所需的
/ app /：/ base / app /
}，
记者：['进度']，
端口：9876，
颜色：true，
logLevel：config.LOG_INFO，
autoWatch：true，
浏览器：['Chrome']，
singleRun：false
}）
}
和 package.json ：
{
name：taohd -app-seed，
版本：1.0.0，
脚本：{
开始：npm run lite，
app ：。/ node_modules / .bi n / 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：麻省理工学院，
依赖：{
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，
时刻：^ 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：{
并发：^ 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：{
目录：{
baseURL：app
}，
依赖 ：{
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
}
}
}
任何人都可以知道我哪里出错了吗？
解决方案
您的项目结构中似乎没有 src 级别。所以你在你的 karma-test-shim.js 文件中使用它：
System.config（{
packages：{
'base / app'：{//< -----（而不是base / src / app）
defaultExtension：false ，
格式：'register'，
map：Object.keys（window .__ karma __。files）。
filter（onlyAppFiles）。
reduce（function createPathRecords（pathsMapping，appPath） {
（...）
}，{}）
}
}
}）;
我还要将预测试任务添加到你的 package.json 文件，用于在执行Karma之前编译你的TypeScript文件。类似的东西：
{
（...）
脚本：{
（ ...）
pretest：tsc，
test：karma start karma.conf.js
}
}
I have a project that looks like:
I am trying to get Karma/Jasmine working as the test framework. I tried replicating this project: https://github.com/juliemr/ng2-test-seed, modifying it to my needs. I have a mock test in test folder that I am trying to get to run. Though, when I try to do the npm run test this is what I get:
I am not sure if my file paths are correct in the karma-test-shim.js/karma.conf.js as I'm still relatively new to working with npm/node projects.
Here is my karma-test-shim.js (file paths are located in var moduleName and onlyAppFiles function):
// 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);
}
And my 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
})
}
And 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"
}
}
}
Can anyone figure out where I am going wrong?
解决方案
It seems that you don't have a src level into your project structure. So you use this into your karma-test-shim.js file:
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) {
(...)
}, {})
}
}
});
I would also add a pretest task into your package.json file to compile your TypeScript files before executing Karma. Something like that:
{
(...)
scripts: {
(...)
"pretest": "tsc",
"test": "karma start karma.conf.js"
}
}
这篇关于Karma / Jasmine问题与Angular2项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
