angular2 使用主机组件进行单元测试
Posted
技术标签:
【中文标题】angular2 使用主机组件进行单元测试【英文标题】:angular2 unit testing using a host component 【发布时间】:2016-10-26 14:57:28 【问题描述】:我正在尝试了解 Angular2 v2.0.0 中的单元测试。我使用 angular-cli 生成一个项目,并通过启动“ng test”来运行单元测试。 cli 生成一个包含测试的示例组件。
我通过尝试创建一个主机组件来扩展示例组件测试,我可以在其中测试未来的自定义组件。类似于我在这里找到的方法:
unit testing using host components
问题是,在实例化测试组件后,在测试组件内部寻找绑定值的测试失败。这是此处序列中的最后一个测试。
/* tslint:disable:no-unused-variable */
import TestBed, async from '@angular/core/testing';
import AppComponent from './app.component';
import Component, Input, OnInit from '@angular/core';
// let's create a host component to test subcomponents
@Component(
template: `<span>testitemname</span>`
)
class TestComponent
testitemname: 'testitem';
testitemtags: ['tag1', 'tag2', 'tag3'];
describe('App: Testhostcomp', () =>
beforeEach(() =>
TestBed.configureTestingModule(
declarations: [
AppComponent,
TestComponent
],
);
);
it('should create the app', async(() =>
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
));
it(`should have as title 'app works!'`, async(() =>
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
));
it('should render title in a h1 tag', async(() =>
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
));
// this test fails
it('should render the property value inside the test component', async(() =>
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('span').textContent).toContain('testitem');
));
);
它失败并出现以下错误:
26 10 2016 10:48:15.456:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#mcN6GltigqminZ3yAAAA with id 34237141
Chrome 54.0.2840 (Windows 7 0.0.0) App: Testhostcomp should render the property value inside the test component FAILED
Expected '' to contain 'testitem'.
at webpack:///C:/Angular2Projects/testhostcomp/src/app/app.component.spec.ts:49:55 <- src/test.ts:12000:60
at ZoneDelegate.invoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/zone.js:232:0 <- src/test.ts:20985:26)
at AsyncTestZoneSpec.onInvoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/async-test.js:49:0 <- src/test.ts:13735:39)
at ProxyZoneSpec.onInvoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/proxy.js:76:0 <- src/test.ts:14427:39)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.196 secs)
Chrome 54.0.2840 (Windows 7 0.0.0) App: Testhostcomp should render the property value inside the test component FAILED
Expected '' to contain 'testitem'.
at webpack:///C:/Angular2Projects/testhostcomp/src/app/app.component.spec.ts:49:55 <- src/test.ts:12000:60
at ZoneDelegate.invoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/zone.js:232:0 <- src/test.ts:20985:26)
at AsyncTestZoneSpec.onInvoke (webpack:///C:/Angular2Projects/testhostcomp/~/zone.js/dist/async-test.js:49:0 <- src/test.ts:13735:39)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0.273 secs / 0.196 secs)
我注意到,当我将 testitemname 更改为“testitem”时,测试通过了。所以我认为这可能与绑定有关?我不明白为什么这不起作用。提前感谢您的帮助。
[1]: https://angular.io/docs/ts/latest/guide/testing.html#!#component-inside-test-host "host components"
【问题讨论】:
【参考方案1】:这是因为您使用'testitem'
作为类型而不是作为值
field: Type; // colon is used for typing
field = value; // equals sign for assignment
你的代码
testitemname: 'testitem';
testitemtags: ['tag1', 'tag2', 'tag3'];
【讨论】:
谢谢!这解决了我的问题。我想我还在学习 javascript。以上是关于angular2 使用主机组件进行单元测试的主要内容,如果未能解决你的问题,请参考以下文章