Как проверить источник углового события в родительском компоненте?

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>

код компонента в родительском компоненте:

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