我使用的是systemjs,karma,angular2和jspm。该项目运行良好。在我运行测试时,我遇到了问题。它说它无法找到核心测试库。我不知道在哪里更改此配置。
感谢任何帮助。
吉姆。
- 单元测试
import {it, describe, expect, beforeEach, inject} from '@angular/core/testing'
import {myCOmponent} from 'path to my comonent';
describe('myCOmponent ', () => {
it('should have the component of defined', () => {
expect(myCOmponent).toBeDefined();
});
});
---- karma conf
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
// paths loaded by Karma
{pattern: 'jspm_packages/system-polyfills.js', included: true, watched: true},
{pattern: 'jspm_packages/system.src.js', included: true, watched: true},
{pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: true},
{pattern: 'node_modules/angular2-polyfill/bundles/angular2-polyfill.js', included: true, watched: true},
{pattern: 'jspm_packages/npm/@angular/core/testing', included: true, watched: true},
{pattern: 'karma-test-shim.js', included: true, watched: true},
// paths to support debugging with source maps in dev tools
{pattern: 'app/**/*.ts', included: false, watched: false},
],
// proxied base paths
proxies: {
// required for component assests fetched by Angular's compiler
"/app/": "/base/app/"
},
preprocessors: {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
'app/**/*.js': ['coverage']
},
htmlReporter: {
outputFile: 'reports/test/index.html'
},
// optionally, configure the reporter
coverageReporter: {
type: 'json',
dir: 'reports/',
subdir: '.',
file: 'coverage.json'
},
reporters: ['progress', 'html', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
--- karma shim
// Tun on full stack traces in errors to help debugging
// Error.stackTraceLimit = Infinity;
Error.stackTraceLimit = 0;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
// // 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/public/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
var moduleName = appPath.replace(/^\/base\/app\//, './').replace(/\.js$/, '');
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
return pathsMapping;
}, {})
}
}
});
System.import('@angular/core/testing').then(function(testing) {
console.log(testing);
return System.import('@angular/platform-browser-dynamic/testing').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/public/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 /^\/base\/test\/.*\.js$/.test(path);
}
答案 0 :(得分:1)
所以配置这个有两个部分。你有Karma配置,你有SystemJS配置。 Karma是服务器,因此您需要在服务器中包含所有文件,就像您应用任何应用程序一样。 a = [[0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1],
[0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0],
[1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1],
[1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0]]
list(map(sum, zip(*a)))
中的files
数组列出了应包含在服务器中的所有文件。所以目前你缺少一堆Angular文件。您可以简单地执行以下操作以包含所有这些
karma.conf
这使用模式来包含所有{ pattern: 'jspm_packages/npm/@angular/**/*.js', included: false, watched: false },
{ pattern: 'jspm_packages/npm/@angular/**/*.js.map', included: false, watched: false },
个文件。 @angular
因为您不希望它们作为include: false
添加到karma服务器中使用的索引页面。 <script>
,因为您不希望Karma在观看模式下观看它们。
您可能还需要其他文件,例如watched: false
。请查看karma.conf
from the Angular 2 quickstart以获取其中包含的所有文件的列表。
您还会注意到rxjs
文件。如果您使用SystemJS作为应用程序的模块加载器,那么您应该拥有此文件。该文件加载了应用程序所需的所有模块,因此您也需要它们进行测试。
然后您需要配置SystemJS进行测试。您有应用程序systemjs.config.js
文件,但这仅适用于主应用程序。您仍然需要加载systemjs.config.js
模块进行测试,例如@angular
。这些不包含在应用程序@angular/core/testing
文件中,因为您不需要在应用程序中使用这些测试文件。这就是systemjs.conf.js
的用途。
因此,在您karma-test-shim
中,您需要配置SystemJS以加载测试模块。您可以查看karma-test-shim
from the Angular 2 quickstart以了解他们如何配置它。您需要创建映射,以便可以使用短名称加载文件,而不是完整路径。例如
karma-test-shim
如果查看System.config({
paths: {
'jspm:': 'jspm_packages/npm/'
},
baseURL: 'base',
map: {
'@angular/core/testing': 'jspm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'jspm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'jspm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'jspm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'jspm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'jspm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'jspm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'jspm:@angular/forms/bundles/forms-testing.umd.js',
},
});
,您会看到它只是设置了一个前缀,以便您以后不需要输入更多内容。创建映射时将使用此前缀。
然后在paths
中,您将看到创建了别名。例如
map
请在此处使用前面提到的'@angular/core/testing': 'jspm:@angular/core/bundles/core-testing.umd.js',
前缀将映射@angular/core/testing
映射到实际模块文件。这就是我们能够做到的方式
paths
这是因为我们能够做到这一点的映射。如果我们没有映射,SystemJS将查找它找不到的文件名import { TestBed } from '@angular/core/testing'
System.import('@angular/core/testing')
,因此是404。
我认为这应该会为您提供足够的信息来帮助您弄清楚您需要做什么。如果您遇到问题,请查看我链接到的quickstart中的文件作为参考。