2
我在使用我的組件中的templateUrl時，運行Angular 2測試與Karma時遇到了一些麻煩。用Karma運行Angular 2測試，問題與templateUrl
這是我的人緣配置文件：
'use strict';
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: './',
autoWatchBatchDelay: 3000,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files/patterns to load in the browser
files: [
'node_modules/zone.js/dist/zone-microtask.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/es6-module-loader/dist/es6-module-loader.js',
'node_modules/traceur/bin/traceur-runtime.js', // Required by PhantomJS2, otherwise it shouts ReferenceError: Can't find variable: require
'node_modules/traceur/bin/traceur.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/reflect-metadata/Reflect.js',
// beta.7 IE 11 polyfills from https://github.com/angular/angular/issues/7144
'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
{ pattern: 'node_modules/angular2/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'dist/dev/**/*.js', included: false, watched: true },
{ pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it
'test-main.js'
],
// list of files to exclude
exclude: [
'node_modules/angular2/**/*spec.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'dist/**/!(*spec).js': ['coverage']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha', 'coverage'],
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'text-summary' },
{ type: 'json', subdir: '.', file: 'coverage-final.json' },
{ type: 'html' }
]
},
// web server port
port: 9876,
// enable/disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable/disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
'PhantomJS'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
這裏是一個模塊的例子：
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {NameList} from '../../shared/services/name_list';
@Component({
selector: 'about',
moduleId: module.id, // using relative paths, see http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/
templateUrl: './about.html',
styleUrls: ['./about.css'],
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class AboutCmp {
newName;
constructor(list = new NameList()) {
this.list = list;
}
/*
* @param newname any text as input.
* @returns return false to prevent default form submit behavior to refresh the page.
*/
addName() {
this.list.add(this.newName);
this.newName = '';
return false;
}
}
和我的測試規範文件：
import {
TestComponentBuilder,
describe,
expect,
injectAsync,
it
} from 'angular2/testing';
import {Component} from 'angular2/core';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {AboutCmp} from './about';
import {NameList} from '../../shared/services/name_list';
export function main() {
describe('About component',() => {
it('should work',
injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(TestComponent)
.then(rootTC => {
rootTC.detectChanges();
let aboutInstance = rootTC.debugElement.children[0].componentInstance;
let aboutDOMEl = rootTC.debugElement.children[0].nativeElement;
let nameListLen = function() {
return aboutInstance.list.names.length;
};
expect(aboutInstance.list).toEqual(jasmine.any(NameList));
expect(nameListLen()).toEqual(4);
expect(DOM.querySelectorAll(aboutDOMEl, 'li').length).toEqual(nameListLen());
aboutInstance.newName = 'Minko';
aboutInstance.addName();
rootTC.detectChanges();
expect(nameListLen()).toEqual(5);
expect(DOM.querySelectorAll(aboutDOMEl, 'li').length).toEqual(nameListLen());
expect(DOM.querySelectorAll(aboutDOMEl, 'li')[4].textContent).toEqual('Minko');
});
}));
});
}
@Component({
providers: [NameList],
selector: 'test-cmp',
template: '<about></about>',
directives: [AboutCmp]
})
class TestComponent {}
這個問題我有是在我運行我的構建系統（使用gulp）之後，然後將所有轉換後的文件和css移動到根目錄下的另一個文件夾e項目：/ dist/dev/all-my-files-are-moved-here。移動文件後
結構示例：
dist/dev/about/components/about.js
dist/dev/about/components/about.html
dist/dev/about/components/about.css
這是警告和錯誤，我得到：
14 03 2016 16:55:26.687:WARN [web-server]: 404: /base/dist/dev/about/components/about.html
和
SUMMARY:
✔ 1 test completed
✖ 3 tests failed
FAILED TESTS:
About component
✖ should work
PhantomJS 2.1.1 (Mac OS X 0.0.0)
Failed: Failed to load /Users/ogran83/Developer/Projects/angular2-seed/dist/dev/about/components/about.html
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:1217:29
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:1194:29
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:442:25
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:454:53
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:425:53
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:375:42
/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:97:12
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:1217:29
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:1194:29
[email protected]/Users/ogran83/Developer/Projects/angular2-seed/node_modules/zone.js/dist/zone-microtask.js:236:18
文件/Users/ogran83/Developer/Projects/angular2-seed/dist/dev/about/components/about.html明顯存在，但似乎當在PhantomJS中通過業力運行時不工作。在瀏覽器中測試時，該應用本身運行良好。
你清楚地得到404，這意味着有一定有什麼東西在config。 TCB和templateUrl的問題已經解決。你的問題是一個配置的事情，而不是角度錯誤。嘗試在你的配置文件中添加這行代碼{pattern：'dist/dev/**/*。html'，包括：false，watched：true}''' –
這樣做很明顯，一旦你指出它。我對.css文件做了同樣的處理，因爲它們有相同的問題。謝謝！ –
不客氣！很高興它的工作（我通常會ping你，但我不能寫你的暱稱的第一個字母:(） –