アクセスDebugElementネイティブビューのカプセル化

Question

を使用して、私は

@Component({ 
    selector: 'my-component', 
    template: ` 
    <my-nested-component [state]="state"></my-nested-component> 
    `, 
    encapsulation: ViewEncapsulation.Native 
}) 
export class MyComponent {} 

次

のようなコンポーネントをテストしています、私は、ネストされたコンポーネント MyOtherComponentへの参照を取得します。 my-componentは何のカプセル化を使用しない場合、またはそれがエミュレートされたカプセル化を使用した場合、私が使用できます。

let fixture = TestBed.createComponent(MyComponent); 
let nestedComponent = fixture.debugElement.query(By.directive(MyNestedComponent)) 

をコンポーネントへの参照を取得します。

しかし、この場合には、queryはちょうど（querySelectorの行動を模倣する）成分の光のDOMの子を照会し、そのネイティブビューのカプセル化を使用しているときnestedComponentがnullです。

ネストされたコンポーネントのDebugElement（したがってコンポーネントインスタンス）への参照を取得する方法を教えてください。

Answer 1

のは、我々は次のコンポーネントを持っているとしましょう：

@Component({ 
    selector: 'my-nested-component', 
    template: ` 
    <h1>Nested component - {{ state }}</h1> 
    `, 
}) 
export class NesterComponent { 
    @Input() state: number; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <my-nested-component [state]="state"></my-nested-component> 
    `, 
    encapsulation: ViewEncapsulation.Native 
}) 
export class TestComponent { 
    state = 1; 
} 

だから私はこのようなテストを記述します。

let fixture = TestBed.createComponent(TestComponent); 
let component = fixture.componentInstance; 

const shadowRoot: DocumentFragment = fixture.debugElement.nativeElement.shadowRoot; 
const nestedComponentNativeElement = shadowRoot.querySelector('my-nested-component'); 

const nestedComponentDebugElement = <DebugElement>getDebugNode(nestedComponentNativeElement); 

var nestedComponentInstance: NesterComponent = nestedComponentDebugElement.componentInstance; 
// here can be your code 

component.state = 2; 
fixture.detectChanges(); 

de = nestedComponentDebugElement.query(By.css('h1')); 

expect(de.nativeElement.textContent).toBe('Nested component - 2'); 

ます。またplunkerでlive example