Zugang DebugElement verschachtelter Komponente bei der Verwendung von nativen Ansicht Verkapselung

Question

Ich teste eine Komponente wie folgt

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

Wenn das Gerät meine Komponente testen, ich möchte MyOtherComponent einen Verweis auf die verschachtelte Komponente erhalten. Wenn my-component verwendet keine Verkapselung, oder wenn es Verkapselung emuliert verwendet wird, könnte ich verwenden:

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

einen Verweis auf die Komponente zu erhalten.

Aber in diesem Fall fragt query nur die Licht DOM Kinder der Komponente (das Verhalten von querySelector imitiert), so nestedComponentnull ist, wenn nativer Ansicht Kapselung.

Wie werden Sie einen Verweis auf die DebugElement (und damit die Komponenteninstanz) der verschachtelten Komponente bekommen soll?

Answer 1

Lassen Sie uns sagen, dass wir die folgenden Komponenten:

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

So würde ich Test wie folgt schreiben:

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'); 

Sie können auch versuchen, diesen Test als live example in Plunker