在Angular 2中编写最基本的单元测试?
在Angular 2中编写最基本的单元测试?
问题:一旦我将Angular 2导入文件中,我的所有测试都不执行。
问题:我如何设置我的karma配置来支持angular 2,以便我的测试正确通过?
或者
问题:我如何在es6中设置任何测试框架与angular2?
Git Repo (确保你在angular-2分支上)
Karma配置:
// Karma配置
// 生成于2015年6月1日星期一14:16:41 GMT-0700(PDT)
module.exports = function(config) {
config.set({
// 用于解析所有模式的基本路径(例如,文件,排除)
basePath: '',
// 使用的框架
// 可用的框架:https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jspm', 'jasmine'],
// 在浏览器中加载的文件/模式列表
jspm: {
loadFiles: [
'client/app/**/*.js'
]
},
// 要排除的文件列表
plugins:[
'karma-jasmine',
'karma-coverage',
'karma-jspm',
'karma-chrome-launcher'
],
// 要排除的文件列表
exclude: [
],
// 在提供给浏览器之前预处理匹配的文件
// 可用的预处理器:https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// 用于使用的测试结果报告器
// 可能的值:'dots','progress'
// 可用的报告器:https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// Web服务器端口
port: 9876,
// 在输出(报告器和日志)中启用/禁用颜色
colors: true,
// 日志级别
// 可能的值:config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// 启用/禁用监视文件并在任何文件更改时执行测试
autoWatch: true,
// 启动这些浏览器
// 可用的浏览器启动器:https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// 连续集成模式
// 如果为true,则Karma会捕获浏览器,运行测试并退出
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: `
{{title}}
`})
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);
})
});
预期的错误:
$ karma start
INFO [karma]: Karma v0.12.36 服务器已启动,位于http://localhost:9876/
INFO [launcher]: 正在启动浏览器Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: 已通过31YT5XsHM29BDG8sYXSq套接字连接,ID为13157663
Chrome 43.0.2357 (Mac OS X 10.10.3): 执行0个错误的0个成功(0.002秒/ 0秒)
如果我删除Todo.js中的Angular导入:
$ karma start
INFO [karma]: Karma v0.12.36 服务器已启动,位于http://localhost:9876/
INFO [launcher]: 正在启动浏览器Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: 已通过7QKCB-7aTRwNsOGfYjmG套接字连接,ID为71239348
Chrome 43.0.2357 (Mac OS X 10.10.3): 执行7个成功的7个成功(0.008秒/ 0.005秒)
GITTER的更新:
@matthewharwood 尝试将捆绑的ng2文件加载到jspm Loadfiles部分。使用karma-jspm插件,您可以指定自定义路径,因此可以将angular/angular路径覆盖为指向该单个捆绑文件。它使我们的测试更容易运行。另外,我还需要包含karma babel预处理器并通过它运行我的代码。
很遗憾,我无法正确使用loadfiles。