[角单位测试]：我如何在单元测试中模拟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

您可以使用 ng-mocks to mock 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.
});

Answer 2

使用object.sign（）如下：

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