在 Angular 2 中编写最基本的单元测试?
Posted
技术标签:
【中文标题】在 Angular 2 中编写最基本的单元测试?【英文标题】:Writing the most basic Unit test in Angular 2? 【发布时间】:2015-08-28 22:53:40 【问题描述】:问题:我将Angular 2 导入文件后,我的任何测试都不会执行。
问题:如何设置我的 karma 配置以支持 Angular 2,以便我的测试正确通过?
或 问题:如何使用 es6 编写的 angular2 设置任何测试框架?
Git Repo (make sure you're on branch angular-2
业力:
// 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);
)
);
预期错误:
$ 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)
如果我删除 Todo.js 的角度导入
$ 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)
从 GITTER 更新:
@matthewharwood 尝试将捆绑的 ng2 文件加载到您的 jspm Loadfiles 部分。使用 karma-jspm 插件,您可以指定自定义路径,因此您可以覆盖 angular/angular 路径以指向该单个捆绑文件。它使我们的测试运行起来更加容易。我还必须包含 karma babel 预处理器并通过它运行我的代码。
不幸的是,我无法让加载文件正常工作:c
【问题讨论】:
【参考方案1】:打开调试页面后,您可以看到 angular 告诉您它缺少 reflect-metadata
包。所以我在app/todo/todo.js
中添加了一个手动导入语句,它解决了这个问题:
import Reflect from 'reflect-metadata'
import ComponentAnnotation as Component, ViewAnnotation as View from 'angular2/angular2';
import List from './list/list';
我现在的输出是:
node_modules/.bin/karma start --single-run
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 cGnqva8p5bf-j7L2EVzI with id 94803307
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 7 of 7 SUCCESS (0.005 secs / 0.004 secs)
【讨论】:
以上是关于在 Angular 2 中编写最基本的单元测试?的主要内容,如果未能解决你的问题,请参考以下文章
使用 Angular 2 添加 Firebase 的单元测试
Angular 2 单元测试组件,模拟 ContentChildren
如何使用 Jasmine 为私有方法编写 Angular / TypeScript 单元测试