使用主机组件进行 angular2 单元测试

Question

我想了解 Angular2 v2.0.0 中的单元测试。我使用 angular-cli 生成项目，并通过启动 'ng test' 进行运行单元测试。 cli 生成一个示例组件，包括测试。

我通过尝试创建一个主机组件来扩展示例组件测试，我可以在其中测试未来的自定义组件。类似于我在这里找到的方法：

问题是在实例化测试组件后，在测试组件内部查找绑定值的测试失败。这是此处序列中的最后一个测试。

    /* 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"

Answer 1

这是因为您使用 'testitem' 作为类型而不是值

field: Type;     // colon is used for typing
field = value;   // equals sign for assignment

你的代码

testitemname: 'testitem';
testitemtags: ['tag1', 'tag2', 'tag3'];

使用主机组件进行 angular2 单元测试

angular2 unit testing using a host component

unit-testing

karma-runner

angular