旁观者角度测试 - 在ngOnInit之前通过输入

Question

我正在使用Spectator编写我的Angular 8测试，并使用Jest来运行它们。根据自述文件，我可以使用setInput()将我的值分配给字段的名称，这有效。问题是在创建组件后正在验证输入，但在此之前我需要它，因为我在ngOnInit方法中使用它进行初始化：

// item.component.ts
@Input() items: Items[] = [];
ngOnInit(): void {
// do something with this.items
// read query param 'page' and use it for something
}

跟

// item.component.spec.ts
let spectator: SpectatorRouting<ItemComponent>;
const createComponent = createRoutingFactory({
component: ItemComponent,
queryParams: {page: 1}
});
beforeEach(() => spectator = createComponent());
it('test items', () => {
spectator.setRouteQueryParam('page', '2');
spectator.setInput("items", myItemsList); 
});

旁观者将正确设置 queryParampage和输入items，但仅在创建组件之后。 在组件创建过程中，ngOnInit将使用page == 1和items == []进行初始化。

我可以在每个方法中创建旁观者组件并单独传递 queryParams，但我找不到在createRoutingFactory参数中传递输入的方法。

或者，我可以使用主机组件工厂来传递我的输入参数，但随后我就失去了传递我认为的查询参数的能力。

Answer 1

您可以在 createRoutingFactory 选项中设置 detectChanges=false。这将使createComponent((不会自动调用init((，并且在测试中，您应该在设置输入(或stubing/mocking服务间谍(后调用spectator.detectChanges((：

// item.component.spec.ts
let spectator: SpectatorRouting<ItemComponent>;
const createComponent = createRoutingFactory({
component: ItemComponent,
queryParams: {page: 1},
detectChanges: false // set this to avoid calling onInit() automatically
});
beforeEach(() => spectator = createComponent());
it('test items', () => {
spectator.setRouteQueryParam('page', '2');
// spectator.inject(AnyService).doSomething.andReturn()... // stub services if needed
spectator.setInput("items", myItemsList); 
spectator.detectChanges(); // Now onInit() will be called
});

Answer 2

我找到了这个问题的答案。 事实证明非常简单，可以在设置模拟和其他参数后再次调用ngOnInit以重新初始化组件。所以我的测试方法变成了：

// item.component.spec.ts
let spectator: SpectatorRouting<ItemComponent>;
const createComponent = createRoutingFactory({
component: ItemComponent,
queryParams: {page: 1}
});
beforeEach(() => spectator = createComponent());
it('test items', () => {
spectator.setRouteQueryParam('page', '2');
spectator.setInput("items", myItemsList); 
spectator.component.ngOnInit(); // Now the component is reinitialized and the input will contain myItemsList
});