angular2 Unit-Test mit einer Host-Komponente

Question

Ich versuche Unit Tests in Angular2 v2.0.0 zu verstehen. Ich habe angle-cli verwendet, um ein Projekt zu generieren, und führe Einheitentests durch, indem ich 'ng test' starte. Der CLI generiert eine Beispielkomponente einschließlich Tests.

Ich habe den Beispielkomponententest erweitert, indem ich versucht habe, eine Hostkomponente zu erstellen, in der ich zukünftige benutzerdefinierte Komponenten testen könnte. Ähnlich wie bei der Methode fand ich hier:

unit testing using host components

Das Problem ist, dass nach der Testkomponente instanziiert wird, es einen Test für einen gebundenen Wert in der Testkomponente suchen ausfällt. Es ist der letzte Test in der Sequenz hier.

/* 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'); 
    })); 

}); 

Es schlägt mit dem folgenden Fehler:

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) 

Ich habe bemerkt, dass, wenn ich geändert {{testitemname}} auf 'TestItem', der Test bestanden. Also denke ich, dass es etwas mit Bindung zu tun haben könnte? Ich verstehe nicht, warum das nicht funktioniert. Vielen Dank im Voraus für Ihre Hilfe.

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

Answer 1

Es ist, weil Sie 'testitem' als Typ nicht als Wert

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

Code

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