Question

在我的指令中，我要注入DOCUMENT并添加一个事件监听器：

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit() {
  this.document.addEventListener('click', this.clicked, true);
}

@Bound // custom decorator, you can ignore it
private clicked() {
  // do stuff
}

然后我有一个测试，该测试需要获取注入的document并对其进行监视，以查看是否调用了addEventListener：

it('should add a click event listener to document on ngOnInit', async(() => {

  // Overrides the template and returns the fixture
  overrideAndCompileComponent(LibTestComponent, `
    <div libClickOutsideDocumentListener></div>
  `).then((fixture) => {

    const spy = spyOn<any>(fixture.componentRef.injector.get(Document), 'addEventListener');

    expect(spy).toHaveBeenCalled();
  });
}));

这给了我以下错误：

StaticInjectorError（平台：核心）[文档]

问题是我无法弄清楚如何正确提供DOCUMENT。如果我将以下内容添加到TestBed的{{1}}数组中：

providers

我收到以下（内部角度）错误：

TestBed.configureTestingModule({
  ... excluded code ...
  providers: [
   { provide: DOCUMENT, useValue: Document }
  ]
});

因此，似乎用错误的值覆盖了el.querySelectorAll is not a function。我一直在研究Angular文档，但找不到解决方案。

我在做什么错了？

Answer 1

对我来说似乎有点矫kill过正...

使用主机监听器装饰器来简化您的工作流程：

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) { ... }

这取消了覆盖提供程序的需要，并允许您仅测试函数本身，而不测试是否已添加事件侦听器（从现在开始，您将事件侦听器逻辑委托给Angular，并且您不进行测试什么角度做，只有你做什么）

Angular-如何提供文件？

1 个答案: