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

您也可以嘗試這個測試爲live example在plunker