[英]Angular 2: How to mock ChangeDetectorRef while unit testing
[英]Unit Testing No provider for ChangeDetectorRef
版本:Angular 4。
我正在将子组件注入子组件以通过子组件访问父方法。
在父组件中,我不得不使用ChangeDetectorRef,因为它有一个将更新运行时的属性。
现在代码工作正常,但是子组件规范为“ChangeDetectorRef”抛出了错误,该错误是在父组件中注入的。
错误:没有ChangeDetectorRef的提供者!
父组件
import { Component, AfterViewChecked, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'parent-component',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ParentComponent implements AfterViewChecked {
stageWidth: number;
constructor(private ref: ChangeDetectorRef) {
this.ref = ref;
}
//call this function as many times as number of child components within parent-component.
parentMethod(childInterface: ChildInterface) {
this.childInterfaces.push(childInterface);
}
ngAfterViewChecked() {
this.elementWidth = this.updateElementWidthRuntime();
this.ref.detectChanges();
}
}
子组件
import { Component, AfterViewInit } from '@angular/core';
import { ParentComponent } from '../carousel.component';
@Component({
selector: 'child-component',
templateUrl: './carousel-slide.component.html',
styleUrls: ['./carousel-slide.component.scss'],
})
export class ChildComponent implements AfterViewInit {
constructor(private parentComponent: ParentComponent) {
}
ngAfterViewInit() {
this.parentComponent.parentMethod(this);
}
}
app.html
<parent-component>
<child-component>
<div class="box">Content of any height and width</div>
</child-component>
<child-component>
<div class="box">Content of any height and width</div>
</child-component>
<child-component>
<div class="box">Content of any height and width</div>
</child-component>
</parent-component>
子组件的单元测试
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ParentComponent } from '../parent.component';
import { ChildComponent } from './child.component';
describe('ChildComponent', () => {
let component: ChildComponent;
let fixture: ComponentFixture<ChildComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ChildComponent],
providers: [ParentComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChildComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create \'ChildComponent\'', () => {
expect(component).toBeTruthy();
});
});
当我试图在子规范中的提供程序中添加ChangeDetectorRef时,我收到以下错误。
失败:遇到未定义的提供商! 通常这意味着您有一个循环依赖(可能是由使用'桶'index.ts文件引起的。)
谷歌搜索和尝试很多事情后,我无法找到解决方案。 任何帮助赞赏。
您正在使用组件作为提供程序,这可能不是您的意图。 更改测试模块以声明父组件和子组件。
TestBed.configureTestingModule({
declarations: [ChildComponent, ParentComponent],
providers: []
})
通过在我的父组件中将 “ ChangeDetectorRef ”作为@Optional依赖项,我能够摆脱这个错误。
constructor(@Optional() private ref: ChangeDetectorRef) {
this.ref = ref;
}
这样我的子组件的configureTestingModule将忽略ParentComponent提供者。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.