茉莉花测试错误-TypeError：无法读取未定义的属性“隐藏”

Question

我正在.html＆BSModalService中使用BSModalRef组件，以显示弹出模式打开和关闭。在茉莉花上测试modalRef.hide（）时出现错误-> TypeError：无法读取未定义的属性“ hide”

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

Stripe's Sigma

  

测试cancelUser（）方法的预期结果应该是成功，但会失败并显示错误-> TypeError：无法读取未定义的属性“ hide”

Answer 1

由于您的测试与html的关联性更高，因此最好通过click事件进行测试，而不是在openModal()之前调用cancelUser。

请尝试在 html 按钮（例如

）中添加ID

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

和规范中

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

Answer 2

除非您调用PIL.Image.open方法，否则PIL.Image将不存在。在调用modalRef之前尝试调用此方法。