title: Jasmine test error - TypeError: Cannot read property 'hide' of undefined
body: <p>i am using  in .html &amp; 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</p>
  
  <h2>component.html</h2>
  
  <pre><code> &lt;div class="col col-md-2"&gt;
          &lt;button type="button" class="btn border btn-basic" (click)="openModal(userModal,1)"
            style="border-radius: 50%"&gt;Search&lt;/button&gt;
   &lt;/div&gt;
  
  &lt;ng-template #userModal&gt;
    &lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title pull-left"&gt;Search User&lt;/h4&gt;
      &lt;button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;div class="row" style="margin-bottom:15px"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchText"
            [ngModelOptions]="{standalone: true}" (ngModelChange)="searchUser($event.target.value)"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="list-group scrollbar"&gt;
        &lt;a class="list-group-item" *ngFor="let usr of users" [class.active]="usr===selectedUsr"
          (click)="setIndexUser(usr)"&gt;{{usr.First_Name + ' ' + usr.Last_Name}}&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer text-right"&gt;
      &lt;button class="col col-md-2 btn-basic" (click)="selectUser()"&gt;Ok&lt;/button&gt;
      &lt;button class="col col-md-2 btn-basic" (click)="cancelUser()"&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <h2>component.ts</h2>
  
  <pre><code>//open the User Pop-Up to select User.
    openModal(template: TemplateRef&lt;any&gt;, type: number) {    
      if (type === 1) {            
        this.userService.getUserList().subscribe((res) =&gt; {
          this.users = res.Data as User[];
          this.modalRef = this.modelService.show(template);        
        },
          (error) =&gt; {
            this.toastr.error(error);
          });
      }    
    }
  
  //cancel pop-up of selecting user.
    cancelUser(){
      this.modalRef.hide();
      this.selectedUsr=null;    
    }
  </code></pre>
  
  <h2>component.spec.ts</h2>
  
  <pre><code>it('call cancel user', () =&gt;{
      component.cancelUser();
      expect(component.modalRef.hide);
      expect(component.selectedUser).toBeNull;
    });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cMtty.png" rel="nofollow noreferrer">image</a></p>
  
  <blockquote>
    <p>Expected results on testing the cancelUser() method, should be success, but failing with error --> TypeError: Cannot read property 'hide' of undefined</p>
  </blockquote>