如何在父组件中测试 Angular 事件发射器？

Question

我想编写一个单元测试来测试父组件中的事件发射器。

父组件中的HTML代码：

  <ng-container *ngIf="canPageBeDisplayed()">
    <wizard-sidebar-item-group *ngFor="let group of sidebarGroups" [sidebarItems]="group"
      [isCurrentPage]="isCurrentPage" (removeItem)="removeItem($event)"></wizard-sidebar-item-group>
  </ng-container>

在父组件中的组件 TypeScript 代码：

  public removeItem(item: SummaryItem): void {
    if (item.actionState !== 'required') {
      this.wizardService.updateSummaryItem(item);
    }
  }

我该如何测试(removeItem)="removeItem($event)"？

- Xin Tu

---

你需要做必要的工作，让子组件发出这样的事件，可以通过获取对子组件的引用（使用debugElement）并直接发出事件来欺骗，也可以像真正的用户一样使用UI来触发子组件发出事件的过程。 - JB Nizet

Answer 1

将您的 wizard-sidebar-item-group 添加一个类，如下所示：

<wizard-sidebar-item-group class="wizard" ... >

那么测试可能是以下内容：

然后，测试可能是这样的：

it('remove item should be triggered', () => {
    fixture = TestBed.createComponent(MyParentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    spyOn(component, 'removeItem');
    
    const wizardElement = fixture.debugElement.query(By.css('.wizard'));
    wizardElement.triggerEventHandler('removeItem', {});
    fixture.detectChanges();

    expect(component.removeItem).toHaveBeenCalled(); 
});

- SnorreDan