jasmine test failure: Expected spy openQuickSubtypes to have been called. Context menu test cas

Question

I am getting error for jasmine test, Expected spy openQuickSubtypes to have been called.

I have implemented context menu.

component.html

<div class="each-shift" *ngFor="let shift of shiftsWithEmptyBoxes">
    <div class="shift-cover" [ngClass]="shiftDetails(shift)">
      <div class="requested-vertical-bar"
           [ngClass]="getShiftVerticalBarColor(shift)"></div>
      <div class="shift-left-box" #subtype (contextmenu)="openQuickSubtypes(subtype, subtypeMenu, shift); $event.preventDefault();">
        {{ showShiftOverTime(shift) }}
        {{ getShiftSubTypeLetter(shift, false) }}
        {{ showSubTypeShiftNotation(shift) }}
      </div>

component.ts

 openQuickSubtypes(origin:any,menu:any,index:number)
  {
    this.contextService.openContextMenu(origin,menu,this.viewContainerRef,{data:index})
    .subscribe(openMenu=>{
    })
  }

my test case: test case should open right click

it('should right click', fakeAsync(() => {
    component.shiftsWithEmptyBoxes = [{
      "shiftId": 130374,
      "shiftType": "empty"
    }
    ];
    fixture.detectChanges();
    const menuClick = fixture.debugElement.query(By.css('.shift-left-box'));
    const spyonOpenQuickSubtypes = spyOn(component, 'openQuickSubtypes').and.callThrough();
    const event = new MouseEvent('click',
    {
    view: window,
    bubbles: true,
    cancelable: true,
    relatedTarget: document
    });  
    menuClick.nativeElement.dispatchEvent(event);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(spyonOpenQuickSubtypes).toHaveBeenCalled();
    });
  }));

Whenever, I am running test case, it gives me below error:

Error: Expected spy openQuickSubtypes to have been called.

Answer 1

Try this approach and don't use the return value of spyOn

it('should right click', fakeAsync(() => {
    component.shiftsWithEmptyBoxes = [{
      "shiftId": 130374,
      "shiftType": "empty"
    }
    ];
    fixture.detectChanges();
    const menuClick = fixture.debugElement.query(By.css('.shift-left-box'));
    spyOn(component, 'openQuickSubtypes').and.callThrough();
    menuClick.triggerEventHandler("contextmenu", new  MouseEvent("contextmenu"));
    fixture.detectChanges();
    expect(component.openQuickSubtypes).toHaveBeenCalled(); 
  }));