在Angular 2中编写最基本的单元测试?

12 浏览
0 Comments

在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。

0