Угловой - Как предоставить ДОКУМЕНТ?

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 providers:

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

Я получу следующую (внутреннюю угловую) ошибку:

el.querySelectorAll is not a function

Так что, похоже, переопределить document с неверным значением.Я копался в Angular Docs, но не могу найти решение ..

Что я делаю не так?

Answer 1

мне кажется немного излишним ...

Используйте декоратор принимающего слушателя для упрощения вашего рабочего процесса:

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

Это устраняет необходимость переопределять провайдеров и позволяет вам только тестировать саму функцию, а не проверять, был ли добавлен прослушиватель событий (поскольку теперь вы делегируете логику прослушивателя событий в Angular и не тестируете какой угловой делать, только то что делаешь)