旁观者 Angular 测试 - 在 ngOnInit 之前传递输入

Question

我正在使用 Spectator to write my Angular 8 tests and Jest to run them. According to the README 我可以使用 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); 
});

旁观者将正确设置查询参数page 和输入items，但前提是组件已创建。在组件创建过程中，ngOnInit 将初始化为 page == 1 和 items == []。

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

或者我可以使用 a host component factory 来传递我的输入参数，但我相信我会失去传递查询参数的能力。

Answer 1

我找到了这个问题的答案。原来很简单，设置好mocks等参数后，可以再次调用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
});

Answer 2

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

// 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
});

旁观者 Angular 测试 - 在 ngOnInit 之前传递输入

Spectator Angular testing - pass input before ngOnInit

angular

jestjs

angular-spectator