3

我正在使用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和 Input items，但前提是组件已经创建。在组件创建期间，将使用和ngOnInit进行初始化。page == 1items == []

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

或者，我可以使用主机组件工厂来传递我的输入参数，但是我失去了传递我相信的查询参数的能力。

4

2 回答 2

8

您可以在 createRoutingFactory 选项中设置 detectChanges=false。这将使 createComponent() 不会自动调用 onInit()，并且在您的测试中，您应该在设置输入（或 stubing/mocking services spys）后调用 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
});
于 2020-11-05T17:30:35.720 回答
-1

我找到了这个问题的答案。结果很简单，ngOnInit设置完 mocks 和其他参数后，可以再次调用来重新初始化组件。所以我的测试方法变成了：

// 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
});
于 2019-12-14T09:43:37.160 回答