angle2ユニットテスト（ホストコンポーネントを使用）

Question

私はAngular2 v2.0.0でユニットテストを理解しようとしています。私はangle-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) 

は私が 'testitem' に{{testitemname}}変更したとき、テストに合格していることに気づきました。だから私はそれが束縛と関係するかもしれないと思う？なぜこれがうまくいかないのか分かりません。ご協力いただきありがとうございます。

[1]: https://angular.io/docs/ts/latest/guide/testing.html#!#component-inside-test-host "host components" 

Answer 1

値

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

あなたのコード

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