使用本机视图封装时访问嵌套组件的DebugElement
使用本机视图封装时访问嵌套组件的DebugElement
提问于 2016-12-02 09:39:30
我正在测试一个组件，如下所示
@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。
如何获得对嵌套组件的DebugElement (因此是组件实例)的引用？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-12-10 16:24:59
假设我们有以下组件：
@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');您还可以将此测试作为柱塞中的实例化进行测试。
Stack Overflow用户
发布于 2018-08-21 12:58:06
让我根据旧工具的更新版本更新正确的答案：
下面是我的工作原理，使用"@angular/core": "^5.2.6"，"typescript": "~2.4.2"和"jasmine-core": "2.5.2"
const shadowRoot: DocumentFragment = fixture.debugElement.nativeElement
const nativeElement = shadowRoot.querySelector("html-element")
const debugElement = getDebugNode(nativeElement) as DebugElement
const instance: NestedComponent = debugElement.componentInstance
expect(debugElement.query(By.css("h1")).nativeElement.textContent).toBe("ExpectedText")Stack Overflow用户
发布于 2018-10-01 17:03:16
与角v6.1.8和组件与阴影根。示例：
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance as AppComponent;
const shadowRoot: DocumentFragment = fixture.debugElement.nativeElement.shadowRoot;
app.active = true;
app.title = 'Title';
fixture.detectChanges();
expect(shadowRoot.querySelector('.bz-modal__header_title').textContent).toEqual('Title');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40928963
复制相关文章
相似问题
腾讯云开发者
