我正在尝试围绕ng2-admin project编写一些测试。我在设置测试环境时遇到问题。测试将用typescript编写,因此karma.config.js还需要指定一个转换器。但是在尝试运行它时遇到错误。
karma.config.js
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'requirejs'],
files: [
// paths loaded by Karma
{pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true},
{pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
{pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true},
{pattern: 'node_modules/angular2/bundles/angular2.dev.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},
{pattern: 'node_modules/lodash/lodash.js',included:true,watched:true},
// paths to support debugging with source maps in dev tools
{pattern: 'src/app/**/*.ts', included: true, watched: true},
{pattern: 'src/test/**/*.ts', included: true, watched: true},
],
// proxied base paths
proxies: {
// required for component assests fetched by Angular's compiler
},
port: 9876,
logLevel: config.LOG_INFO,
colors: true,
autoWatch: true,
browsers: ['Chrome'],
// Karma plugins loaded
plugins: [
'karma-jasmine',
'karma-coverage',
'karma-requirejs',
'karma-chrome-launcher',
'karma-typescript-preprocessor'
],
// Coverage reporter generates the coverage
reporters: ['progress', 'dots', 'coverage'],
// Source files that you wanna generate coverage for.
// Do not include tests or libraries (Files used by Istanbul)
preprocessors: {
'src/app/**/*.ts': 'typescript',
'src/test/**/*.ts': 'typescript',
'dist/**/!(*spec).js': ['coverage']
},
coverageReporter: {
reporters:[
{type: 'json', subdir: '.', file: 'coverage-final.json'}
]
},
singleRun: true
})
};
果报测试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/dist': {
defaultExtension: false,
format: 'cjs',
map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
}
}
});
System.import('angular2/src/platform/browser/browser_adapter')
.then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); })
.then(function() { return Promise.all(resolveTestFiles()); })
.then(function() { __karma__.start(); }, function(error) { __karma__.error(error.stack || error); });
function createPathRecords(pathsMapping, appPath) {
// creates local module name mapping to global path with karma's fingerprint in path, e.g.:
// './vg-player/vg-player':
// '/base/dist/vg-player/vg-player.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
var pathParts = appPath.split('/');
var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/');
moduleName = moduleName.replace(/\.js$/, '');
pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
return pathsMapping;
}
function onlyAppFiles(filePath) {
return /\/base\/dist\/(?!.*\.spec\.js$).*\.js$/.test(filePath);
}
function onlySpecFiles(path) {
return /\.spec\.js$/.test(path);
}
function resolveTestFiles() {
return Object.keys(window.__karma__.files) // All files served by Karma.
.filter(onlySpecFiles)
.map(function(moduleName) {
// loads all spec files via their global module names (e.g.
// 'base/dist/vg-player/vg-player.spec')
return System.import(moduleName);
});
}
这是怪物package.json:
{
"name": "ng2-admin",
"version": "0.4.2",
"description": "Angular 2 and Bootstrap 4 Admin Template.",
"author": "akveo",
"homepage": "http://akveo.github.io/ng2-admin/",
"license": "MIT",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/platform-server": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular2-material/button": "^2.0.0-alpha.7-4",
"@angular2-material/core": "^2.0.0-alpha.7-4",
"@angular2-material/tabs": "^2.0.0-alpha.7-4",
"@angular2-material/tooltip": "^2.0.0-alpha.7-4",
"amcharts3": "file:../amcharts3",
"ammap3": "file:../ammap3",
"angular2": "^2.0.0-beta.17",
"angular2-datatable": "^0.4.2",
"animate.css": "^3.5.1",
"bootstrap": "4.0.0-alpha.2",
"bootstrap-loader": "^1.0.10",
"chart.js": "^1.1.1",
"chartist": "^0.9.7",
"ckeditor": "^4.5.9",
"core-js": "^2.4.0",
"easy-pie-chart": "^2.1.7",
"extract-text-webpack-plugin": "^1.0.1",
"font-awesome": "^4.6.1",
"font-awesome-sass-loader": "^1.0.1",
"fullcalendar": "^2.7.2",
"google-maps": "^3.2.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jquery": "^2.2.3",
"jquery-slimscroll": "^1.3.6",
"leaflet": "^0.7.7",
"leaflet-map": "^0.2.1",
"lodash": "^4.12.0",
"ng2-bootstrap": "1.0.20",
"ng2-branchy": "^0.0.2-5",
"ng2-ckeditor": "1.0.4",
"ng2-uploader": "0.5.6",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.6",
"tether": "^1.2.4",
"zone.js": "~0.6.12"
},
"devDependencies": {
"@types/core-js": "^0.9.28",
"@types/hammerjs": "^2.0.28",
"@types/lodash": "0.0.28",
"@types/node": "^4.0.29",
"@types/source-map": "^0.1.26",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.29",
"angular": "^1.5.8",
"angular-mocks": "^1.5.8",
"angular-ui-router": "^0.3.1",
"angular2-hmr": "~0.8.0",
"angular2-polyfill": "^0.0.32",
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "1.1.1",
"codelyzer": "~0.0.21",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"reflect-metadata": "^0.1.3",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"html-webpack-plugin": "^2.21.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.5.0",
"json-loader": "^0.5.4",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^0.0.4",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-istanbul": "0.0.2",
"karma-requirejs": "^1.0.0",
"karma-typescript-preprocessor": "^0.2.1",
"karma-webpack": "^1.8.0",
"node-sass": "^3.5.3",
"parse5": "^1.5.1",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.4",
"requirejs": "^2.3.1",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"systemjs": "^0.19.37",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.1",
"ts-node": "^0.9.1",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.4.4",
"typescript": "^1.8.10",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.0"
},
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:dev",
"watch:dev": "npm run build:dev -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint 'src/**/*.ts'",
"pree2e": "npm run webdriver:update -- --standalone",
"pretest": "npm run lint",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"gh-pages": "wintersmith build -C docs && gh-pages -d docs/build",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "bower install",
"version": "npm run build",
"postversion": "git push && git push --tags",
"test": "karma start karma.conf.js",
"posttest": "node_modules/.bin/remap-istanbul -i coverage/coverage-final.json -o coverage -t html",
"coverage": "http-server -c-1 -o -p 9875 ./coverage"
},
"repository": {
"type": "git",
"url": "https://github.com/akveo/ng2-admin.git"
},
"bugs": {
"url": "https://github.com/akveo/ng2-admin/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
测试中的类(truncate.pipe.ts):
import {Pipe} from '@angular/core'
@Pipe({
name: 'truncate'
})
export class Truncate {
transform(value, arg1, arg2) : string {
!arg1 ? arg1 = 10 : arg1;
!arg2 ? arg2 = '' : arg2;
return value.length > arg1 ? value.substring(0, arg1) + arg2 : value;
}
}
样本测试(truncate.pipe.spec.ts):
import {Truncate} from '../app/pages/dashboard/quotas/pipes/truncate.pipe.ts';
describe('MyPipe Tests', () => {
let pipe: Truncate;
beforeEach(() => {
pipe = new Truncate();
});
it('Should truncate 10 characters ', () => {
var result = pipe.transform('blah blah blah', null,null);
expect(result).toEqual('blah blah ');
});
});
任何帮助高度赞赏。