Блог

Главная - Вопросы по программированию - Как протестировать источник угловых событий в родительском компоненте?

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

#angular #unit-testing

#angular #модульное тестирование

Вопрос:

Я хочу написать модульный тест для тестирования источника события в родительском компоненте.

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)" ?

Комментарии:

1. Вы бы сделали то, что необходимо для того, чтобы дочерний компонент выдал такое событие, либо получив ссылку на дочерний компонент (используя debugElement) и обманув, отправив событие напрямую, либо используя пользовательский интерфейс, как это сделал бы реальный пользователь, чтобы инициировать отправку события дочерним компонентом.

Ответ №1:

Добавьте класс в свой мастер-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(); 
});