如何为信号查询添加单元测试？

Question

我正在使用 Angular 的 信号查询（

viewChild

、

viewChildren

、

contentChild

、

contentChildren

），如下所示：

export class MyComponent {
  myScrollContainer = viewChild('scrollContainer', { read: ElementRef });

  scrollToTop() {
    this.myScrollContainer()?.nativeElement.scroll({ top: 0 });
  }
}

代码运行良好。然而，我正在努力寻找一种好的方法来为其添加单元测试并模拟查询值。对于信号输入，我们可以使用

ComponentRef

的

setInput()

函数。我错过了类似的信号查询吗？

现在我已经通过覆盖信号实现了如下测试：

it('should scroll to the top', () => {
  const mockElement = document.createElement('div');
  const spy = spyOn(mockElement, 'scroll');
  component.myScrollContainer = signal({ nativeElement: mockElement }).asReadonly();
  component.scrollToTop();

  expect(spy).toHaveBeenCalledOnceWith({ top: 0 });
});

它确实有效，但感觉像是一个老套的解决方案。而且它不允许我将属性标记为

readonly

，这是我想要的。

Answer 1

可以通过直接窥探信号查询返回的对象来实现：

it('should scroll to the top', () => {
  const mockElement = component.myScrollContainer()!.nativeElement;
  const spy = spyOn(mockElement, 'scroll');
  // if you want to spy on properties, you can use `spyOnProperty`
  component.scrollToTop();

  expect(spy).toHaveBeenCalledOnceWith({ top: 0 });
});