Jasmine Test Error - TypeError: Cannot Read Property 'hide' Of Undefined

i am using in .html & BSModalService, BSModalRef in component to display the pop-up modal open and close. getting error in Jasmine on testing the modalRef.hide() as --> TypeError: Cannot read property 'hide' of undefined

component.html

 <div class="col col-md-2">
        <button type="button" class="btn border btn-basic" (click)="openModal(userModal,1)"
          style="border-radius: 50%">Search</button>
 </div>

<ng-template #userModal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Search User</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="row" style="margin-bottom:15px">
      <div class="col-sm-12">
        <input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchText"
          [ngModelOptions]="{standalone: true}" (ngModelChange)="searchUser($event.target.value)">
      </div>
    </div>
    <div class="list-group scrollbar">
      <a class="list-group-item" *ngFor="let usr of users" [class.active]="usr===selectedUsr"
        (click)="setIndexUser(usr)">{{usr.First_Name + ' ' + usr.Last_Name}}</a>
    </div>
  </div>
  <div class="modal-footer text-right">
    <button class="col col-md-2 btn-basic" (click)="selectUser()">Ok</button>
    <button class="col col-md-2 btn-basic" (click)="cancelUser()">Cancel</button>
  </div>
</ng-template>

component.ts

//open the User Pop-Up to select User.
  openModal(template: TemplateRef<any>, type: number) {    
    if (type === 1) {            
      this.userService.getUserList().subscribe((res) => {
        this.users = res.Data as User[];
        this.modalRef = this.modelService.show(template);        
      },
        (error) => {
          this.toastr.error(error);
        });
    }    
  }

//cancel pop-up of selecting user.
  cancelUser(){
    this.modalRef.hide();
    this.selectedUsr=null;    
  }

component.spec.ts

it('call cancel user', () =>{
    component.cancelUser();
    expect(component.modalRef.hide);
    expect(component.selectedUser).toBeNull;
  });

image

Expected results on testing the cancelUser() method, should be success, but failing with error --> TypeError: Cannot read property 'hide' of undefined

Since your test is more associated with html , so its better if you test is via click event rather than calling openModal() before cancelUser.

Try by putting ids in html buttons such as

 <div class="col col-md-2">
      <button type="button" 
      class="btn border btn-basic"
      id="open-btn"
      (click)="openModal(userModal,1)"
       style="border-radius: 50%">Search</button>
 </div>
  ....
.....
    <div class="modal-footer text-right">
    <button class="col col-md-2 btn-basic" (click)="selectUser()">Ok</button>
    <button id="cancel-btn" class="col col-md-2 btn-basic" (click)="cancelUser()">Cancel</button>
  </div>
</ng-template>

and in spec,

it('call cancel user and set "selectedUser" as null', () =>{
    spyOn(component.modalRef,'hide').and.callThrough();
    spyOn(component,'cancelUser').and.callThrough();
    const openBtn = fixture.nativeElement.querySelector('#open-btn');
    openBtn.click();
    fixture.detectChanges();
    const cancelBtn = fixture.nativeElement.querySelector('#cancel-btn');
    cancelBtn.click();
    expect(component.modalRef.hide).toHaveBeenCalled();
    expect(component.cancelUser).toHaveBeenCalled();
    expect(component.selectedUser).toBeNull();
  });