假设我想简单地对一个组件进行单元测试,该组件采用从路径的一部分获取的参数。例如,我的组件的ngOnInit如下所示:
ngOnInit() {
this.route.parent.params.switchMap((params: Params) => this.service.getProject(params['projectId']))
.subscribe((project: Project) => this.update(project));
}
我现在怎么办: 1:设置我的测试,以便组件创建工作,所以我可以单元测试其他部分
使用回答编辑 - 示例ActivatedRouteStub应该使用也具有可观察参数的父项进行扩展,我应该使用useClass而不是useValue(忘记将其更改回来):
@Injectable()
export class ActivatedRouteStub {
// ActivatedRoute.params is Observable
private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable();
// Test parameters
private _testParams: {};
get testParams() { return this._testParams; }
set testParams(params: {}) {
this._testParams = params;
this.subject.next(params);
}
// ActivatedRoute.snapshot.params
get snapshot() {
return { params: this.testParams };
}
// ActivatedRoute.parent.params
get parent() {
return { params: this.subject.asObservable() };
}
}
2:在我的UnitTest中为projectId提供一个值?
angular2文档中的示例似乎不适用于switchMap,甚至根本不适用(我已经使用了ActivatedRouteStub,但到目前为止没有运气 - params总是未定义的。)
编辑回答:
describe('ProjectDetailsComponent', () => {
let component: ProjectDetailsComponent;
let fixture: ComponentFixture<ProjectDetailsComponent>;
let activatedRoute: ActivatedRouteStub;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([{ path: 'projects/:projectId', component: ProjectDetailsComponent }])],
declarations: [ProjectDetailsComponent],
schemas: [NO_ERRORS_SCHEMA],
providers: [{ provide: ProjectsService, useClass: ProjectsServiceStub }, {provide: ActivatedRoute, useClass: ActivatedRouteStub}]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectDetailsComponent);
component = fixture.componentInstance;
activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
activatedRoute.testParams = { projectId: '123'};
fixture.detectChanges();
});
fit('should create', () => {
expect(component).toBeTruthy();
});
});
答案 0 :(得分:5)
只有在你没有正确创建存根的情况下,params的唯一方法是未定义的。看看电话
this.route.parent.params.switchMap
params
是一个深层次的嵌套属性。所以作为普通的JS对象你需要
let mock = {
parent: {
params: Observable.of(...)
}
}
如果你想使用一个类,你可以使用像
这样的东西class ActivatedRouteStub {
parent = {
params: Observable.of({})
};
set testParams(params: any) {
this.parent.params = Observable.of(params);
}
}
您只需使用testParams
上的setter设置parent.params
的值即可。那么,当您执行stub.testParams = whatever
时,该值将在parent.params
的可观察值上设置。
除了以上有关如何实现此功能的说明之外,您的配置中也存在错误
{provide: ActivatedRoute, useValue: ActivatedRouteStub}
useValue
应该是您创建的对象。所以你传递的是一个类,那个类将是注入的,而不是类的实例。如果您希望Angular创建它,那么您应该使用useClass
。否则,您应该自己创建实例,并将该实例用作值
{provide: ActivatedRoute, useValue: new ActivatedRouteStub() }
注意实例化。
答案 1 :(得分:0)
如果最终有人遇到了Angular 7的问题,Angular文档将给出一个清晰的示例,说明如何测试依赖于ActivatedRoute服务https://angular.io/guide/testing#activatedroutestub的组件。与上面的回复略有不同。