[Angular单元测试]:如何在单元测试中模拟QueryList(没有集成测试)

Question

在内容投影场景中，我有以下场景:

// my-component.ts
@ContentChildren(SelectOption) selectOptions: QueryList<SelectOption>;
...
ngAfterContentInit() {
this.selectOptions.forEach((selectOption, i) => {
selectOption.index = i;
});
}

假设模板具有以下结构:

<ng-content select="select-option"></ng-content>

我试着用以下方式模拟测试，但我找不到"方法，可以添加子组件。

// my-component.spec.ts
component.selectOptions = {} as QueryList<SelectOption>;

但是我不知道如何在单元测试场景(不是集成测试)中添加预计的组件

Answer 1

像这样使用Object.assign():

Object.assign(new QueryList(), {_results: [selectOptionMock1, selectOptionMock2, selectOptionMock3]}) as QueryList<SelectOption>;

Answer 2

可以使用ng-mocks来模拟SelectOption。

beforeEach(() => {
return TestBed.configureTestingModule({
declarations: [
MyComponent,
MockComponent(SelectOption), // or MockDirective
],
}).compileComponents();
});
it('testing', () => {
const fixture = MockRender(`
<my-component>
<select-option value="1"></select-option>
<select-option value="2"></select-option>
</my-component>
`);
const component = ngMocks.findInstance(MyComponent);
expect(component.selectOptions.size).toEqual(2);
// and other assertions.
});