如何在父組件中測試角度事件發射器？

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