角2テストエラー：コンポーネントには1つの<ng-content>要素がありますが、0スロットしか提供されていません

Question

だから私はこれを持っていますグリッター入力文字列とトランスコードされたコンテンツを受け入れるコンポーネント。このエラーが発生しました」コンポーネントには1つのng-contentの要素がありますが、スロットは0個しかありませんでした。私がng-contentタグを追加したとき。それを取り除くと、テストはエラーなく実行されます。ここに私のコードとテストコードがあります。ここで

import { Component, OnInit, Input } from 'angular2/core'; 

@Component({ 
    selector: 'greeter', 
    template: ` 
    <h1>Hello {{name}}!</h1> 
    <ng-content></ng-content> 
` 
}) 
export class Greeter { 
    @Input() name: string; 
} 

は私のテストコードです： -

import {TestComponentBuilder, ComponentFixture, beforeEachProviders, beforeEach, inject, describe, 
expect, it, injectAsync, setBaseTestProviders } from 'angular2/testing'; 
import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser' 

import {Greeter} from './noob.component'; 

describe('Noob: component',() => { 
let tcb: TestComponentBuilder; 
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); 

beforeEachProviders(() => [ 
    TestComponentBuilder, 
    Greeter 
]); 

beforeEach(<any>inject([TestComponentBuilder], (_tcb: TestComponentBuilder) => { 
    tcb = _tcb; 
})); 

//specs 
it('should render `John Doe!`', (done: any) => { 
    tcb.createAsync(Greeter).then((fixture: ComponentFixture) => { 
     let greeter = fixture.componentInstance, 
      element = fixture.nativeElement; 
     greeter.name = 'John Doe'; 
     fixture.detectChanges(); //trigger change detection 
     expect(element.querySelector('h1').innerText).toBe('Hello John Doe!'); 
     done(); 
    }) 
     .catch((e: any) => done.fail(e)); 
}); 
}) 

Answer 1

問題はNG-コンテンツは、ルートレベルのコンポーネントでサポートされていないことです。単体テストでコンポーネントを単独でインスタンス化すると、そのコンテキストではルートになります。

回避策は、テスト目的のためだけに、コンポーネント用の単純なホストコンポーネントを作成することです。

@Component({ 
    directives:[Greeter], 
    template:'<greeter></greeter>' 
}) 
class GreeterHost{ 
} 

今ユニットテストにかわりので、あなたのNG-コンテンツコンポーネントはもはやルートであることをGreeterHostをインスタンス化します。

この方法ではまだgreeterをテストできますが、新しいホストを介してテストされます。