Angular 单元测试如何调度事件发射器

Question

在我的单元测试中，我想要调度 eventEmitter

事件.component.ts：

@Output() openDialog = new EventEmitter();
getData() {
  // ...
  this.openDialog.emit(true);
}
ngOnDestroy(): void {
    this.openDialog.unsubscribe();
}

html：

<open #openBlock (openDialog)='showErrorModal($event)'></open>

我试过像这样调用它们 events.component.spec.ts

  it('openDialog has been called', () => {
      fakeAsync(() => {
       const event = new Event('');
       const inputE1=fixture.debugElement.query(By.css('.openBlock'));
       inputE1.triggerEventHandler('openDialog','');
       inputE1.nativeElement.dispatchEvent(new Event('inputE1'));
       fixture.detectChanges();
       spyOn(component, 'ngOnDestroy').and.callThrough();
       expect(inputE1).toBeDefined();
      expect(component.ngOnDestroy).toHaveBeenCalled();

     });
   });

但它不工作。

Answer 1

triggerEventHandler应该足够了。

我认为主要问题是这一行：

const inputE1=fixture.debugElement.query(By.css('.openBlock'));

我们正在寻找一个 openBlock 为openBlock的元素，但它似乎不存在。

尝试这个：

// !! Add class to HTML element
<open class="open-block" #openBlock (openDialog)='showErrorModal($event)'></open>
....
// !! Get by newly added class
const inputE1=fixture.debugElement.query(By.css('.open-block'));

inputEl.triggerEventHandler('openDialog', {/* mock $event here */ });

// Now showErrorModal should be called