Açısal 2 Sınama hatası: Bileşen 1 <ng-content> öğelerine sahip, ancak yalnızca 0 yuvaları

Question

sağlandı. Bu yüzden bir giriş dizesi ve aktarılmış içerik kabul eden Greeter bileşenine sahibim. Bu hatayı aldım "Bileşen 1 ng içerikli öğelerine sahip, ancak yalnızca 0 yuva sağlandı." ng-content etiketini eklediğimde. Bunu kaldırırsam, testim hata olmadan yürütülür. İşte kodum ve test kodum.

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; 
} 

İşte benim test kodu: -

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

konu kök düzey bileşenleri desteklenmediğini ng-içeriğidir. Bileşeni ünite testinde izole ettiğinde, bu bağlamda bir kök haline gelir.

Çözüm, yalnızca test amacıyla bileşeniniz için basit bir ana makine bileşeni oluşturmaktır.

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

Şimdi birim testinde yerine böylece ng-içerik bileşeni artık bir kök olduğu GreeterHost örneğini.

Bu yaklaşımla selamlamayı hala test edebilirsiniz, ancak yeni ana bilgisayar üzerinden test edilecektir.