Problem: Sobald ich Angular 2 in eine Datei importiere, wird keiner meiner Tests ausgeführt.Schreiben Sie den grundlegendsten Komponententest in Angular 2?
Frage: Wie kann ich meine karma Konfiguration so einrichten, dass sie angular two unterstützt, damit mein Test ordnungsgemäß funktioniert?
OR Frage: Wie kann ich jede Test-Framework mit angular2 in es6 geschrieben?
Git Repo (make sure you're on branch angular-2
Karma:
// Karma configuration
// Generated on Mon Jun 01 2015 14:16:41 GMT-0700 (PDT)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jspm', 'jasmine'],
// list of files/patterns to load in the browser
jspm: {
loadFiles: [
'client/app/**/*.js'
]
},
// list of files to exclude
plugins:[
'karma-jasmine',
'karma-coverage',
'karma-jspm',
'karma-chrome-launcher'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// 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: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
};
JS:
"use strict";
import {ComponentAnnotation as Component, ViewAnnotation as View} from 'angular2/angular2';
import List from './list/list';
//@Component({selector: 'my-app'})
//@View({template: `<h1>{{title}}</h1>`})
class Todo{
constructor(){
this.title = 'Gym';
this.list = [new List()];
}
setTitle(newTitle){
this.title = newTitle;
}
addListItem(){
this.list.push(new List());
}
removeListItem(){
this.list.pop();
}
}
export default Todo;
Todo.spec.js:
import Todo from './todo';
describe('Todo list:', function(){
var todo;
beforeEach(function(){
todo = new Todo();
});
it('expect Todo to be present', function(){
expect(todo).not.toBe(null);
});
it('expect Todo constructor to accept a title', function(){
expect(todo.title).toEqual('Gym');
});
it('expect Todo List property to be Present', function(){
expect(todo.list).not.toBe(null);
})
it('expect Todo List property to accept a title:empty', function(){
expect(todo.list[0].title).toEqual('empty');
});
it('expect Todo Title property to accept a title change', function(){
todo.setTitle('Work');
expect(todo.title).toEqual('Work');
});
it('expect Todo List property to have an add function', function(){
todo.addListItem();
expect(todo.list.length).toEqual(2);
});
it('expect Todo to have a remove function', function(){
todo.removeListItem();
expect(todo.list.length).toEqual(0);
})
});
Erwartete Fehler:
$ karma start
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket 31YT5XsHM29BDG8sYXSq with id 13157663
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 ERROR (0.002 secs/0 secs)
Wenn ich für Todo.js Winkel Import entfernen
$ karma start
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket 7QKCB-7aTRwNsOGfYjmG with id 71239348
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 7 of 7 SUCCESS (0.008 secs/0.005 secs)
UPDATE VON GITTER:
@mat thewharwood versuchen Sie die gebündelte ng2-Datei in Ihre jspm Loadfiles-Sektion zu laden. Mit dem Karma-Jspm-Plugin können Sie benutzerdefinierte Pfade angeben, sodass Sie den Winkel-/Winkelpfad, der auf diese einzelne gebündelte Datei verweist, überschreiben können. Es hat unsere Tests viel einfacher gemacht. außerdem musste ich den karma babel preprocessor einbinden und meinen code durchspielen.
Ich bin leider nicht in der Lage loadfiles richtig arbeiten zu erhalten: c