如何在父组件中测试角度事件发射器？答案

【问题标题】：How to test angular event emitter in a parent component?如何在父组件中测试角度事件发射器？
【发布时间】：2019-03-26 17:06:22
【问题描述】：

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

父组件中的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>

父组件中的组件ts代码：

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

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

【问题讨论】：

您可以通过获取对子组件的引用（使用 debugElement）并通过直接发出事件来作弊，或者使用 UI 作为真正的用户会触发子事件的发射。

标签： angular unit-testing

【解决方案1】：

向您的向导侧边栏项目组添加一个类，例如：

<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(); 
  });

【讨论】：