How to test angular event emitter in a parent component?

Issue

I want to write a unit test to test the event emitter in a parent component.

html code in parent component:

  <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>

component ts code in parent component:

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

How could I test (removeItem)="removeItem($event)"?

Solution

Add a class to your wizard-sidebar-item-group like:

<wizard-sidebar-item-group class="wizard" ... >

Then the test could be something like:

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

Answered By - SnorreDan