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

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>

父组件中的

组件ts代码：

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

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

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