unit-testing - 使用原生 View 封装时访问嵌套组件的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 只是查询组件的轻型 DOM 子级(模仿 querySelector 的行为)，所以 nestedComponent 是null 使用原生 View 封装时。

您应该如何获得对嵌套组件的 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 中